Compartilhar via


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

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. 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

  1. Pressione F5 para compilar e implantar o aplicativo (no modo de depuração).
  2. 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.

Tópicos relacionados

Início automático com Reprodução Automática