Guia de início rápido: registrar um aplicativo para um dispositivo de Reprodução 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]
Você pode registrar aplicativos como opções de eventos de dispositivo de Reprodução Automática. Os eventos de dispositivo de Reprodução Automática são gerados quando um dispositivo é conectado a um computador.
Neste exemplo mostramos como identificar seu aplicativo como uma opção de Reprodução Automática quando uma câmera é conectada a um computador. O aplicativo é registrado como um manipulador para o evento de Reprodução Automática WPD\ImageSource. Trata-se de um evento comum que o sistema WPD (Dispositivos Portáteis do Windows) gera quando câmeras e outros dispositivos de imagem notificam o aplicativo de que eles são uma ImageSource que usam MTP. Para saber mais, veja Dispositivos Portáteis do Windows.
Se você é um fabricante de dispositivo e deseja associar um aplicativo de dispositivo da Windows Store como um manipulador de Reprodução Automática para seu dispositivo, é possível identificar o aplicativo nos metadados do dispositivo. Se você associar seu aplicativo como o aplicativo de instalação automática para a ID da experiência do seu dispositivo, o sistema operacional descobrirá a associação quando seu dispositivo for conectado a um computador. Se o computador não tiver seu aplicativo instalado, o sistema operacional baixará automaticamente e instalará seu aplicativo. A Reprodução Automática apresentará seu aplicativo como primeira opção de manipulador para o usuário escolher para seu dispositivo. Para saber mais, veja Reprodução Automática para aplicativos de dispositivo da Windows Store.
Objetivo: Crie um aplicativo para manipular um evento de dispositivo de Reprodução Automática.
Pré-requisitos
Microsoft Visual Studio
Instruções
1. Criar um novo projeto e adicionar declarações de Reprodução Automática
Abra o Visual Studio e selecione Novo Projeto no menu Arquivo. Na seção Javascript, selecione Windows Store. Nomeie o aplicativo AutoPlayDevice_Camera e clique em OK.
Abra o arquivo Package.appxmanifest e selecione a guia Recursos. Selecione a funcionalidade Armazenamento Removível. Isso dá ao aplicativo acesso aos dados na câmera como um dispositivo de volume de armazenamento removível.
No arquivo de manifesto, selecione a guia Declarações. Na lista suspensa Declarações Disponíveis, selecione Dispositivo de Reprodução Automática e clique em Adicionar. Selecione o novo item Dispositivo de Reprodução Automática que foi adicionado à lista Declarações com Suporte.
Uma declaração Dispositivo de Reprodução Automática identifica seu aplicativo como uma opção quando a Reprodução Automática gera um evento de dispositivo para eventos conhecidos.
Na seção Ações de Inicialização, insira os valores a seguir para a primeira ação de inicialização.
Definição Valor Verbo mostrar Nome de exibição da ação Mostrar imagens Evento de conteúdo WPD\ImageSource A configuração Nome de Exibição da Ação identifica a cadeia de caracteres que a Reprodução Automática exibe para seu aplicativo. A configuração Verbo identifica um valor que é passado ao seu aplicativo para a opção selecionada. Você pode especificar várias ações de inicialização para um evento de Reprodução Automática e usar a configuração Verbo para determinar qual opção um usuário selecionou para seu aplicativo. Você pode saber qual opção o usuário selecionou verificando a propriedade verb dos argumentos de eventos de inicialização passados para o seu aplicativo. Você pode usar qualquer valor para a configuração Verbo, exceto open que é reservada. Para obter um exemplo de uso de vários verbos em um único aplicativo, veja Início rápido: como registrar um aplicativo para conteúdo de Reprodução Automática.
Na lista suspensa Declarações Disponíveis, selecione Associações de Tipo de Arquivo e clique em Adicionar. Nas Propriedades da nova declaração Associações de Tipo de Arquivo, defina o campo Nome de Exibição para Show Images from Camera e o campo Nome para camera_association1. Na seção Tipos de Arquivos Suportados, clique em Adicionar Novo. Configure o campo Tipo de arquivo para .jpg. Na seção Tipos de arquivos suportados, clique em Adicionar novo novamente. Defina o campo Tipo de Arquivo da nova associação de arquivo como .png. Nos eventos de conteúdo, a Reprodução Automática filtra qualquer tipo de arquivo que não seja associado explicitamente ao aplicativo.
Salve e feche o arquivo de manifesto.
2. Adicionar UI HTML
Abra o arquivo Default.html e coloque o HTML a seguir na seção <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. Adicione o código de ativação
O código nesta etapa faz referência à câmera como um StorageDevice passando a ID das informações do dispositivo da câmera para o método fromId. A ID das informações do dispositivo da câmera é obtida na propriedade detail.deviceInformationId dos argumentos passados para o manipulador de eventos onactivated.
Abra a pasta js. Abra o arquivo Default.js e substitua a função padrão onactivated usando o seguinte 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. Adicionar código para exibir informações do dispositivo
Você pode obter informações sobre a câmera nas propriedades da classe StorageDevice. O código nesta etapa exibe o nome do dispositivo e outras informações para o usuário quando o aplicativo é executado. O código então chama o método getImages, que você adicionará na próxima etapa para exibir miniaturas das imagens armazenadas na câmera.
No arquivo Default.js, adicione o código a seguir após a função 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. Adicionar código para exibir imagens
O código nesta etapa exibe miniaturas das imagens armazenadas na câmera. O código faz chamadas assíncronas para a câmera para obter a imagem em miniatura. Entretanto, a próxima chamada assíncrona só ocorre depois que a chamada assíncrona anterior é concluída. Isso garante que somente uma solicitação por vez seja feita para a câmera.
No arquivo Default.js, adicione o código a seguir após a função 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 e executar o aplicativo
- Pressione F5 para compilar e implantar o aplicativo (no modo de depuração).
- Para executar seu aplicativo, conecte uma câmera ao seu computador. Em seguida, escolha o aplicativo na lista de opções de Reprodução Automática. Observação Nem todas as câmeras avisam sobre o evento de dispositivo de Reprodução Automática WPD\ImageSource.
Resumo
Neste tutorial, você criou um aplicativo que exibe arquivos de imagem de um dispositivo de câmera. Você registrou o aplicativo para o evento de dispositivo de Reprodução Automática WPD\ImageSource.