Guia de início rápido: obter uma imagem de uma câmera usando Reproduzir em Automática (HTML)
[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]
Este tutorial mostra como acessar o armazenamento removível quando o dispositivo de armazenamento estiver conectado, tratando eventos da Reprodução Automática.
Objetivo: Você aprenderá como acessar o armazenamento removível tratando com eventos de ativação de Reprodução Automática em seu aplicativo.
Pré-requisitos
Você deve estar familiarizado com JavaScript e HTML.
Você precisa ter uma câmera ou dispositivo de memória de câmera que possa conectar no computador para disparar um evento de Reprodução Automática. O dispositivo deve conter alguns arquivos de imagem já que este aplicativo encontra a primeira imagem no dispositivo e a exibe.
Tempo para conclusão: 20 minutos.
Instruções
1. Abrir o Microsoft Visual Studio
Abra uma instância do Visual Studio.
2. Criar um Novo Projeto
Na caixa de diálogo Novo Projeto, escolha um aplicativo em branco dos tipos de projetos JavaScript.
3. Declarar a capacidade do Armazenamento Removível
Clique duas vezes em package.appxmanifest no Gerenciador de Soluções. Selecione a guia Recursos. Marque Armazenamento Removível na lista Capacidades.
4. Declarar os tipos de arquivo
- Na guia Declarações, escolha Associações do Tipo de Arquivo de Declarações Disponíveis e clique em Adicionar.
- Sob Propriedades, defina a propriedade Nome como image.
- Na caixa Tipos de Arquivos com Suporte, adicione .gif como um tipo de arquivo suportado inserindo .gif no campo TipoArquivo.
- Adicione mais dois tipos de arquivos suportados para .jpg e .png clicando em Adicionar Novo e preenchendo o TipoArquivo.
5. Declarar o contrato de Conteúdo de Reprodução Automática
- Na guia Declarações, escolha Conteúdo de Reprodução Automática de Declarações Disponíveis e clique em Adicionar.
- Em Propriedades, defina a propriedade ContentEvent para CameraMemoryOnArrival, defina a propriedade Verb para storageDevice e defina propriedade ActionDisplayName para o nome amigável para exibir para seu aplicativo quando ele for iniciado na ativação de reprodução automática.
6. Declarar o contrato de Dispositivos da Reprodução Automática
- Na guia Declarações, escolha Dispositivo de Reprodução Automática de Declarações Disponíveis e clique em Adicionar.
- Em Propriedades, defina a propriedade DeviceEvent como WPD\ImageSource, defina a propriedade Verb como wpdImage e defina a propriedade ActionDisplayName como o nome amigável para exibir para seu aplicativo quando ele for iniciado na ativação de reprodução automática.
7. Inserir o HTML e JavaScript
Abra o seu Default.html e copie o código seguinte para ele, substituindo o conteúdo 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. Testar o Aplicativo
- No menu Compilar, clique em Compilar Solução para compilar a solução.
- No menu Compilar, clique em Implantar Solução para implantar a solução.
- O seu aplicativo deve agora ser registrado como um manipulador de Reprodução Automática. Conecte uma câmera ou memória de câmera que contenha alguns arquivos de imagem. Escolha permitir que o seu aplicativo abra quando o dispositivo for detectado. A primeira imagem no dispositivo deve ser exibida em seu aplicativo.
Observação Se você receber um erro, verifique o seguinte:
- Certifique-se de ter habilitado o acesso à localização abrindo package.appxmanifest no Gerenciador de Soluções e marcando Armazenamento Removível na guia Recursos.
Resumo
Você acabou de registrar um manipulador de Reprodução Automática que será lançado quando uma câmera que tem armazenamento ou memória para uma câmera for conectada.