Inicio rápido: registrar una aplicación para el contenido de Reproducción automática (HTML)
[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows en tiempo de ejecución. Si estás desarrollando para Windows 10, consulta la documentación más reciente
Puedes registrar aplicaciones como opciones para eventos de contenido de Reproducción automática. Los eventos de contenido de Reproducción automática se generan cuando se inserta en el equipo un dispositivo de volumen, como una tarjeta de memoria de una cámara, una unidad USB o un DVD.
Aquí mostramos cómo identificar tu aplicación como una opción de Reproducción automática cuando se inserta un dispositivo de volumen de una cámara.
Objetivo: Crea una aplicación para administrar un evento de contenido de Reproducción automática.
Requisitos previos
Microsoft Visual Studio
Instrucciones
1. Crear un nuevo proyecto y agregar declaraciones de Reproducción automática
Abre Visual Studio y selecciona Nuevo proyecto en el menú Archivo. En la sección Javascript, selecciona Tienda Windows. Asigna el nombre AutoPlayDisplayOrCopyImages a la aplicación y haz clic en Aceptar.
Abre el archivo Package.appxmanifest y selecciona la pestaña Capacidades. Selecciona las funcionalidades Almacenamiento extraíble y Biblioteca de imágenes. Esta acción otorga a la aplicación acceso a dispositivos de almacenamiento extraíbles para la memoria de la cámara y acceso a las imágenes locales.
En el archivo de manifiesto, selecciona la pestaña Declaraciones. En la lista desplegable Declaraciones disponibles, selecciona Contenido de Reproducción automática y después haz clic en Agregar. Selecciona el elemento Contenido de Reproducción automática que se agregó a la lista Declaraciones admitidas.
Una declaración de Contenido de Reproducción automática identifica tu aplicación como opción cuando Reproducción automática genera un evento de contenido. El evento se basa en el contenido de un dispositivo de volumen como un DVD o una unidad USB. Reproducción automática examina el contenido del dispositivo de volumen y determina qué evento de contenido generará. Si la raíz del volumen contiene una carpeta DCIM, AVCHD o PRIVATE\ACHD, o bien si el usuario habilitó Elegir qué hacer con cada tipo de medio en el Panel de control de Reproducción automática y se encuentran imágenes en la raíz del volumen; entonces Reproducción automática genera el evento ShowPicturesOnArrival.
En la sección Acciones de inicio, especifica los siguientes valores para la primera acción de inicio.
Configuración Valor Verbo show Nombre para mostrar de la acción Mostrar imágenes Evento de contenido ShowPicturesOnArrival La configuración Nombre para mostrar de la acción identifica la cadena que Reproducción automática muestra para tu aplicación. La configuración Verbo identifica un valor que se pasa a la aplicación para la opción seleccionada. Puedes especificar varias acciones de inicio para un evento de Reproducción automática y usar la configuración Verbo para determinar qué opción seleccionó un usuario para tu aplicación. Para saber qué opción seleccionó el usuario, comprueba la propiedad verb de los argumentos del evento de inicio que se pasaron a la aplicación. Puedes usar cualquier valor para la configuración Verbo a excepción de open, que está reservado.
En la sección Acciones de inicio del elemento Contenido de reproducción automática, haz clic en Agregar nuevo para agregar una segunda acción de inicio. Especifica los siguientes valores para la segunda acción de inicio.
Configuración Valor Verbo copy Nombre para mostrar de la acción Copiar imágenes en la biblioteca Evento de contenido ShowPicturesOnArrival En la lista desplegable Declaraciones disponibles, selecciona Asociaciones de tipo de archivo y haz clic en Agregar. En las propiedades de la declaración Asociaciones de tipo de archivo nueva, establece el campo Nombre para mostrar en AutoPlay Copy or Show Images y el campo Nombre en image_association1. En la sección Tipos de archivo admitidos, haz clic en Agregar nuevo. Establece el campo Tipo de archivo en .jpg. En la sección Tipos de archivo admitidos, vuelve a hacer clic en Agregar nuevo. Establece el campo Tipo de archivo de la nueva asociación de archivos en .png. Para los eventos de contenido, Reproducción automática filtra todos los tipos de archivo que no están asociados explícitamente a la aplicación.
Guarda y cierra el archivo de manifiesto.
2. Agregar interfaz de usuario HTML
Abre el archivo Default.html y coloca el siguiente código HTML en la sección <body>.
<label>File List</label> <div id="files" style="position:fixed;top:30px;height:400px;width:600px" ></div>
3. Agregar código de inicialización
El código de este paso comprueba el valor de la propiedad verb, que es uno de los argumentos de inicio transmitidos a la aplicación. Después, el código llama a la función relacionada con la opción seleccionada por el usuario. Para el evento de memoria de la cámara, Reproducción automática transmite la carpeta raíz del almacenamiento de la cámara en los argumentos de inicio que se transmiten a la aplicación. Puedes recuperar esta carpeta del primer elemento de la propiedad detail.files.
Abre la carpeta js. Abre el archivo Default.js y reemplaza la función onactivated predeterminada con el siguiente código.
var filesDiv; app.onactivated = function (args) { if (args.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.file) { filesDiv = document.getElementById("files"); if (args.detail.verb === "show") { // Call displayImages with root folder from camera storage. displayImages(args.detail.files[0]); } else if (args.detail.verb === "copy") { // Call copyImagesToLibrary with root folder from camera storage. copyImagesToLibrary(args.detail.files[0]); } } args.setPromise(WinJS.UI.processAll()); };
4. Agregar código para mostrar imágenes
En el archivo Default.js, agrega el siguiente código después de la función onactivated.
function displayImages(rootFolder) { // Display images from first folder in root\DCIM. rootFolder.getFolderAsync("DCIM").then( function (dcimFolder) { dcimFolder.getFoldersAsync().then( function (cameraFolders) { cameraFolders[0].getFilesAsync().then( function (files) { files.forEach(function (file) { filesDiv.innerHTML += file.name + "<br />"; displayImage(file); }); }); }); }); } function displayImage(file) { try { var element = document.createElement("img"); element.src = window.URL.createObjectURL(file, { oneTimeOnly: true }); element.height = 100; element.width = 100; filesDiv.appendChild(element); filesDiv.innerHTML += "<br>"; } catch (e) { filesDiv.innerHTML += e.message; } }
5. Agregar código para copiar imágenes
En el archivo Default.js, agrega el siguiente código después de la función displayImage.
function copyImagesToLibrary(rootFolder) { try { var now = new Date(); var folderName = "Images " + now.toDateString() + " " + now.getHours() + now.getMinutes() + now.getSeconds(); Windows.Storage.KnownFolders. picturesLibrary.createFolderAsync(folderName).then( function (imageFolder) { // Copy images from first folder in root\DCIM. rootFolder.getFolderAsync("DCIM").then( function (dcimFolder) { dcimFolder.getFoldersAsync().then( function (cameraFolders) { cameraFolders[0].getFilesAsync().then( function (files) { files.forEach(function (file) { copyImage(file, imageFolder); }); }); }); }); }); } catch (e) { filesDiv.innerHTML = "Failed copy images.<br />" + e.message; } } function copyImage(file, imageFolder) { try { file.copyAsync( imageFolder, file.fileName, Windows.Storage.NameCollisionOption.replaceExisting).then( function (newFile) { filesDiv.innerHTML += file.name + " copied.<br />"; }); } catch (e) { filesDiv.innerHTML += "Failed to copy image.<br />" + e.message; } }
6. Compilar y ejecutar la aplicación
- Presiona F5 para compilar e implementar la aplicación (en modo de depuración).
- Para ejecutar la aplicación, inserta una tarjeta de memoria de una cámara u otro dispositivo de almacenamiento de una cámara en el equipo. A continuación, selecciona una de las opciones de evento de contenido que especificaste en el archivo package.appxmanifest de la lista de opciones de Reproducción automática. Este código de muestra solo muestra o copia imágenes de la carpeta DCIM de una tarjeta de memoria de una cámara. Si la tarjeta de memoria de tu cámara almacena imágenes en una carpeta AVCHD o PRIVATE\ACHD, tendrás que actualizar el código como corresponda.Nota Si no tienes una tarjeta de memoria de una cámara, puedes usar una unidad flash si tiene una carpeta con el nombre DCIM en la raíz y si la carpeta DCIM tiene una subcarpeta que contiene imágenes.
Resumen y siguientes pasos
En este tutorial, creaste una aplicación que muestra archivos de imagen o los copia a Imágenes. Registraste la aplicación para el evento de contenido ShowPicturesOnArrival de Reproducción automática.
Reproducción automática genera eventos de contenido para contenido compartido entre equipos mediante proximidad (pulsación). Puedes usar los pasos y el código de esta guía de inicio rápido para administrar archivos compartidos entre equipos que usan la proximidad. En la siguiente tabla se enumeran los eventos de contenido de Reproducción automática disponibles para compartir contenido al usar la proximidad.
| Acción | Evento de contenido de Reproducción automática |
|---|---|
| Uso compartido de música | PlayMusicFilesOnArrival |
| Uso compartido de vídeos | PlayVideoFilesOnArrival |
Cuando se comparten archivos mediante proximidad, la propiedad Files del objeto FileActivatedEventArgs contiene una referencia a una carpeta raíz que incluye todos los archivos compartidos.