Inicio rápido: registrar una aplicación para un dispositivo 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 dispositivo de Reproducción automática. Los eventos de dispositivo de Reproducción automática se generan cuando se conecta un dispositivo a un equipo.
Aquí te enseñamos a identificar tu aplicación como una opción de Reproducción automática cuando una cámara se conecta a un equipo. La aplicación se registra como un controlador del evento de WPD\ImageSourceReproducción automática. Esto es un evento común que el sistema de Dispositivos portátiles de Windows (WPD) genera cuando las cámaras y otros dispositivos de imagen notifican que son un ImageSource con MTP. Para obtener más información, consulta Dispositivos portátiles de Windows.
Si eres un fabricante de dispositivos y quieres asociar tu aplicación para dispositivo de la Tienda Windows como controlador de Reproducción automática en tu dispositivo, puedes identificar esa aplicación en los metadatos del dispositivo. Si asocias la aplicación como una aplicación de instalación automática para la identificación de tu dispositivo, el sistema operativo detectará la asociación cuando el dispositivo se conecte a un equipo. Si el equipo no tiene instalada la aplicación, el sistema operativo la descargará e instalará automáticamente. Reproducción automática presentará la aplicación como primera opción para que el usuario elija como controlador del dispositivo. Para obtener más información, consulta el tema sobre la Reproducción automática de aplicaciones para dispositivo de la Tienda Windows.
Objetivo: Crea una aplicación para administrar un evento de dispositivo 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 AutoPlayDevice_Camera a la aplicación y haz clic en Aceptar.
Abre el archivo Package.appxmanifest y selecciona la pestaña Capacidades. Selecciona la funcionalidad Almacenamiento extraíble. Esto proporcionar a la aplicación acceso a los datos de la cámara dispositivo de volumen de almacenamiento extraíble.
En el archivo de manifiesto, selecciona la pestaña Declaraciones. En la lista desplegable Declaraciones disponibles, selecciona Dispositivo de Reproducción automática y haz clic en Agregar. Selecciona el nuevo elemento Dispositivo de Reproducción automática que se agregó a la lista Declaraciones admitidas.
Una declaración Dispositivo de Reproducción automática identifica a la aplicación como opción cuando Reproducción automática genera un evento de dispositivo para eventos conocidos.
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 WPD\ImageSource 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. Para ver un ejemplo del uso de varios verbos en una sola aplicación, consulta Inicio rápido: registrar una aplicación para el contenido de Reproducción automática.
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 Show Images from Camera y el campo Nombre en camera_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>.
<table> <tr> <td colspan="2">Device Information</td> </tr> <tr> <td style="vertical-align:top"><div id="deviceInfoDiv" style="width:400px;" /></td> <td style="vertical-align:top"><div id="picturesDiv" style="overflow:scroll;width:400px;height:400px" /></td> </tr> </table>
3. Agregar código de activación
El código de este paso hace referencia a la cámara como StorageDevice, pasando el identificador de información del dispositivo de la cámara al método fromId. El identificador de información del dispositivo de la cámara se obtiene de la propiedad detail.deviceInformationId de los argumentos pasados al controlador de eventos OnActivated.
Abre la carpeta js. Abre el archivo Default.js y reemplaza la función OnActivated predeterminada con el siguiente código.
app.onactivated = function (args) { if (args.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.device) { args.setPromise(WinJS.UI.processAll()); showImages(Windows.Devices.Portable.StorageDevice.fromId(args.detail.deviceInformationId)); } };
4. Agregar código para mostrar información de dispositivo
Puedes obtener información de la cámara en las propiedades de la clase StorageDevice. El código de este paso muestra al usuario el nombre del dispositivo y otra información cuando se ejecuta la aplicación. El código llama después al método getImages, que agregarás en el paso siguiente, para mostrar miniaturas de las imágenes almacenadas en la cámara.
En el archivo Default.js, agrega el siguiente código después de la función onactivated.
var imagesDiv; function showImages(folder) { var infoDiv = document.getElementById("deviceInfoDiv"); imagesDiv = document.getElementById("picturesDiv"); infoDiv.innerHTML = "Display Name = " + folder.displayName + "<br />" + "Display Type = " + folder.displayType + "<br />" + "FolderRelativeId = " + folder.folderRelativeId + "<br />"; getImages(folder); }
5. Agregar código para mostrar imágenes
El código de este paso muestra las miniaturas de las imágenes almacenadas en la cámara. El código realiza llamadas asincrónicas a la cámara para obtener la imagen de miniatura. Sin embargo, la siguiente llamada asincrónica no ocurre hasta que se complete la anterior. Esto garantiza que solo se haga una solicitud a la cámara cada vez.
En el archivo Default.js, agrega el siguiente código después de la función showImages.
function getImages(folder) { // Find images in the specified folder folder.getFilesAsync().done( function (files) { files.forEach(function (file) { file.getThumbnailAsync( Windows.Storage.FileProperties.ThumbnailMode.singleItem, 100, Windows.Storage.FileProperties.ThumbnailOptions.useCurrentScale).done( function (thumbnail) { // Create an img element to display on the page var element = document.createElement("img"); element.src = window.URL.createObjectURL(thumbnail, { oneTimeOnly: true }); element.style.height = thumbnail.originalHeight; element.style.width = thumbnail.originalWidth; element.alt = file.name; imagesDiv.appendChild(element); } ); }) // Find images in subfolders folder.getFoldersAsync().done( function (folders) { folders.forEach(function (f) { getImages(f); }) }); }); }
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, conecta una cámara al equipo. Después, selecciona la aplicación en la lista de opciones de Reproducción automática. Nota No todas las cámaras se anuncian para el evento de dispositivo de Reproducción automática WPD\ImageSource.
Resumen
En este tutorial has creado una aplicación que muestra archivos de imagen de un dispositivo de cámara. Has registrado la aplicación para el evento de dispositivo de Reproducción automática WPD\ImageSource.