Inicio rápido: obtener un archivo de imagen desde una cámara mediante 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
Este tutorial te muestra cómo acceder al almacenamiento extraíble cuando el dispositivo de almacenamiento está conectado, administrando los eventos de la Reproducción automática.
Objetivo: Te enseñaremos a acceder al almacenamiento administrando los eventos de activación de la Reproducción automática en tu aplicación.
Requisitos previos
Debes tener conocimientos de JavaScript y HTML.
Debes contar con una cámara o con dispositivo de memoria de cámara que puedas conectar al equipo para desencadenar el evento de la Reproducción automática. El dispositivo debe contener archivos de imagen, ya que esta aplicación busca la primera imagen almacenada en el dispositivo y la muestra.
Tiempo para finalizar: 20 minutos.
Instrucciones
1. Abrir Microsoft Visual Studio
Abre una sesión de Visual Studio.
2. Crear un nuevo proyecto
En el cuadro de diálogo Nuevo proyecto, elige una aplicación vacía en los tipos de proyecto JavaScript.
3. Declarar la funcionalidad de almacenamiento extraíble
Haz doble clic en package.appxmanifest en el Explorador de soluciones. Selecciona la pestaña Funcionalidad. Activa la opción Almacenamiento extraíble en la lista Funcionalidad.
4. Declarar los tipos de archivos
- En la pestaña Declaraciones, elige Asociaciones de tipo de archivo en Declaraciones disponibles y haz clic en Agregar.
- En Propiedades, configura la propiedad Nombre como image.
- En la casilla Tipos de archivo admitidos, agrega la extensión .gif como tipo de archivo admitido. Para ello, escribe .gif en el campo FileType.
- Agrega otros dos tipos de archivo admitidos para las extensiones .jpg y .png haciendo clic en Agregar nuevo y completando el campo FileType.
5. Declarar el contrato de Contenido de reproducción automática
- En la pestaña Declaraciones, elige Contenido de reproducción automática en Declaraciones disponibles y haz clic en Agregar.
- En Propiedades, configura la propiedad ContentEvent como CameraMemoryOnArrival, la propiedad Verbo como storageDevice y la propiedad ActionDisplayName como el nombre descriptivo para mostrar para tu aplicación cuando la aplicación se inicie mediante activación de la Reproducción automática.
6. Declarar el contrato de Dispositivo de reproducción automática
- En la pestaña Declaraciones, elige Dispositivo de reproducción automática en Declaraciones disponibles y haz clic en Agregar.
- En Propiedades, configura la propiedad DeviceEvent como WPD\ImageSource, la propiedad Verbo como wpdImage y la propiedad ActionDisplayName como el nombre descriptivo para mostrar para tu aplicación cuando la aplicación se inicie mediante activación de la Reproducción automática.
7. Insertar el código JavaScript y HTML
Abre el archivo Default.html y copia el siguiente código en él, sustituyendo su contenido original.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Using Autoplay</title>
<link rel="stylesheet" href="/winjs/css/ui-dark.css" />
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", initialize, false);
// Add a handler for the activated event so it can
// do something when activated via AutoPlay.
Windows.UI.WebUI.WebUIApplication.addEventListener(
"activated", activatedHandler);
function activatedHandler(eventArgs) {
if (eventArgs.kind ===
Windows.ApplicationModel.Activation.ActivationKind.file) {
// clear any device id so we always use
// the latest connected device
g_autoPlayDeviceId = null;
g_autoPlayDrive = eventArgs.files[0];
document.getElementById("btn").click();
getFirstImageOnAutoPlayStorage();
} else if (eventArgs.kind ===
Windows.ApplicationModel.Activation.ActivationKind.device) {
// clear any saved drive so we always use
// the latest connected device
g_autoPlayDrive = null;
g_autoPlayDeviceId = eventArgs.deviceInformationId;
document.getElementById("btn").click();
getFirstImageOnAutoPlayStorage();
} else {
document.getElementById("status").innerHTML =
"Not activated using Autoplay";
document.getElementById("btn").disabled = true;
}
}
function initialize() {
document.getElementById("btn").addEventListener(
"click", getFirstImageOnAutoPlayStorage, false);
}
function getFirstImageOnAutoPlayStorage() {
document.getElementById("output").innerHTML = "";
if (g_autoPlayDrive) {
document.getElementById("status").innerHTML =
"Activated using Drive Autoplay";
// Drive Autoplay returns a Windows.Storage.StorageFolder
// representing the storage drive
// Construct the query for image files on the device
var queryOptions = new Windows.Storage.Search.QueryOptions(
Windows.Storage.Search.CommonFileQuery.orderByName,
[".jpg", ".png", ".gif"]);
var imageFileQuery =
g_autoPlayDrive.createFileQueryWithOptions(queryOptions);
// Run the query for image files
imageFileQuery.getFilesAsync().
then(
function (items) {
displayFirstImage(items);
},
function (e) {
document.getElementById("output").innerHTML =
"Error when looking for images in '" +
g_autoPlayDrive.name + "': " + e.message;
});
} else if (g_autoPlayDeviceId) {
document.getElementById("output").innerHTML =
"Activated using Device Autoplay";
// Device Autoplay returns a device ID. We take an extra step to
// convert that identifier into a Windows.Storage.StorageFolder.
var autoplayStorageDevice;
try {
autoplayStorageDevice =
Windows.Devices.Portable.StorageDevice.fromId(g_autoPlayDeviceId);
} catch (e) {
document.getElementById("output").innerHTML =
e.message;
}
// Construct the query for image files on the device
var queryOptions = new Windows.Storage.Search.QueryOptions(
Windows.Storage.Search.CommonFileQuery.orderByName,
[".jpg", ".png", ".gif"]);
var imageFileQuery =
autoplayStorageDevice.createFileQueryWithOptions(queryOptions);
imageFileQuery.getFilesAsync().
then(
function (items) {
displayFirstImage(items);
},
function (e) {
document.getElementById("output").innerHTML =
"Error when looking for images in '" +
autoplayStorageDevice.name + "': " + e.message;
});
} else {
document.getElementById("output").innerHTML =
"Not activated via AutoPlay.";
}
}
function displayImage(imageFile) {
document.getElementById("imageNameHolder").innerHTML =
"Image file name: " + imageFile.name + "<br/>";
// Setting 2nd parameter to 'false' cleans up the URL
// after first use. We set this because we only need
// to load the URL into the image tag once.
document.getElementById("imageHolder").src =
window.URL.createObjectURL(imageFile, false);
}
function displayFirstImage(items) {
var found = false;
for (var i = 0, l = items.length; i < l && !found; i++) {
if (items[i].size > 0) { // display the first non-empty file
displayImage(items[i]);
found = true;
}
}
if (!found) {
// No files found matching our criteria
document.getElementById("output").innerHTML =
"No image files found on the removable storage";
}
}
</script>
</head>
<body>
<div id="imageNameHolder"></div>
<img id="imageHolder" alt="image holder" src="" width="256"/><br />
<div id="output"></div>
<div id="status"></div>
<button class="action" id="btn">Get Image File</button>
</body>
</html>
8. Probar la aplicación
- En el menú Compilar, haz clic en Compilar solución para compilar la solución.
- En el menú Compilar, haz clic en Implementar solución para implementar la solución.
- Ahora tu aplicación debe estar registrada como un identificador de reproducción automática. Conecta una cámara o un dispositivo de memoria de cámara que contenga archivos de imagen. Elije permitir que tu aplicación se abra cuando se detecte el dispositivo. Se debe visualizar la primera imagen del dispositivo en tu aplicación.
Nota Si obtienes un error, realiza las siguientes comprobaciones:
- Asegúrate de que has habilitado el acceso al almacenamiento extraíble. Para ello, abre package.appxmanifest en el Explorador de soluciones y activa Almacenamiento extraíble en la pestaña Funcionalidades.
Resumen
Acabas de registrar un identificador de reproducción automática que se iniciará cuando se conecte una cámara con almacenamiento o una memoria para una cámara.