Guia de início rápido: usando Reproduzir em em aplicativos (HTML)

Artigo
02/16/2016

[ 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 usar o recurso Reproduzir em para permitir que os usuários executem facilmente o streaming de áudio, vídeo ou imagens, de seus computadores para dispositivos nas redes domésticas. Este tópico mostra como usar Reproduzir em no aplicativo da Windows Store para permitir que os usuários façam o streaming de mídia em um dispositivo de destino.

Objetivo: Use Reproduzir em para realizar streaming de mídia em um dispositivo de destino.

Pré-requisitos

Microsoft Visual Studio

Instruções

1. Criar um novo projeto e permitir o acesso a bibliotecas de mídia

Abra o Visual Studio e selecione Novo Projeto no menu Arquivo. Na seção Javascript, selecione Aplicativo em Branco. Nomeie o aplicativo PlayToSample e clique em OK.
Abra o arquivo package.appxmanifest e selecione a guia Recursos. Selecione os recursos Biblioteca de Músicas, Biblioteca de Imagens e Biblioteca de Vídeos para permitir que o aplicativo acesse as bibliotecas de mídia em um computador. Feche e salve o arquivo de manifesto.

2. Adicionar a interface do usuário HTML

Abra o arquivo Default.html e adicione o seguinte HTML à seção <body>.

  <div style="position:fixed;width:300px;height:30px;">
      <button id="videoButton">Video</button>
      <button id="audioButton">Audio</button>
      <button id="imageButton">Image</button>
  </div>
  <div id="displayDiv" style="position:fixed;top:40px;height:360px">
    <div id="videoDiv">
      <video id="vplayer" height="338" width="600" controls >
         Cannot play video.
      </video>
    </div>
    <div id="audioDiv">
      <audio id="aplayer" controls >Cannot play audio.</audio>
    </div>
    <div id="imageDiv">
      <img id="iplayer" height="338" width="600" alt="image">
    </div>
     <br/>
  </div>

  <div id="messageDiv" style="position:fixed;top:400px;height:auto"></div>

3. Adicionar código de inicialização

O código desta etapa cria os manipuladores de eventos de clique dos botões HTML. A função showDiv alterna entre os elementos de mídia HTML5 (<video>, <audio> ou <img>) visíveis e mantém uma referência ao elemento ativo. Essa referência é passada ao PlayToManager para realizar streaming da origem do elemento para o destino de Reproduzir em. Uma função de atalho (id) é incluída para permitir o acesso conveniente à função getElementById.

Abra a pasta js. Abra o arquivo Default.js e adicione o código a seguir no lugar da função WinJS.Application.onmainwindowactivated padrão.

app.onactivated = function (eventObject) {
    if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
        id("videoButton").addEventListener("click", videoButtonClick, false);
        id("audioButton").addEventListener("click", audioButtonClick, false);
        id("imageButton").addEventListener("click", imageButtonClick, false);

        videoButtonClick();

        WinJS.UI.processAll();
    }
};

function id(tagName) {
    return document.getElementById(tagName);
}

// Save a reference to the current media element for PlayTo.
var mediaElement;

function showDiv(divName) {
    id("audioDiv").style.display = "none";
    id("aplayer").src = null;
    id("imageDiv").style.display = "none";
    id("videoDiv").style.display = "none";
    id("vplayer").src = null;

    id(divName).style.display = "block";

    switch (divName) {
        case "audioDiv":
            mediaElement = id("aplayer");
            break;
        case "videoDiv":
            mediaElement = id("vplayer");
            break;
        case "imageDiv":
            mediaElement = id("iplayer");
            break;
    }
}

function videoButtonClick() {
    showDiv("videoDiv");
    getVideoFile(0);
}

function audioButtonClick() {
    showDiv("audioDiv");
    getAudioFile(0);
}

function imageButtonClick() {
    showDiv("imageDiv");
    getImageFile(0);
}

4. Adicionar código para obter a origem de mídia das bibliotecas de mídia locais

O código desta etapa é chamado durante os eventos de clique dos botões HTML. Cada função pega o primeiro item encontrado na biblioteca de mídia selecionada e o reproduz ou o exibe no elemento de mídia HTML5 relacionado. Por exemplo, quando você clica no botão Vídeo do aplicativo, a função getVideoFile obtém o primeiro vídeo dos Vídeos, o define como origem da marca <video> e o reproduz.

No arquivo Default.js file, adicione o seguinte código após o código da etapa anterior.

function getVideoFile(fileIndex) {
    try {
        var videosLibrary = Windows.Storage.KnownFolders.videosLibrary;
        videosLibrary.getFilesAsync().then(function (resultLibrary) {
            if (resultLibrary.length > 0) {
                id("messageDiv").innerHTML +=
                    "Play video: " + resultLibrary[fileIndex].name + "<br/>";
                id("vplayer").src = URL.createObjectURL(resultLibrary[fileIndex]);
                id("vplayer").play();
            }
        });
    } catch (ex) {
        id("messageDiv").innerHTML +=
            "Exception encountered: " + ex.message + "<br/>";
    }
}

function getAudioFile(fileIndex) {
    try {
        var musicLibrary = Windows.Storage.KnownFolders.musicLibrary;
        musicLibrary.getFilesAsync().then(function (resultLibrary) {
            if (resultLibrary.length > 0) {
                id("messageDiv").innerHTML +=
                    "Play audio: " + resultLibrary[fileIndex].name + "<br/>";
                id("aplayer").src = URL.createObjectURL(resultLibrary[fileIndex]);
                id("aplayer").play();
            }
        });
    } catch (ex) {
        id("messageDiv").innerHTML +=
            "Exception encountered: " + ex.message + "<br/>";
    }
}

function getImageFile(fileIndex) {
    try {
        var picturesLibrary = Windows.Storage.KnownFolders.picturesLibrary;
        picturesLibrary.getFilesAsync().then(function (resultLibrary) {
            if (resultLibrary.length > 0) {
                id("messageDiv").innerHTML +=
                    "Show image: " + resultLibrary[fileIndex].name + "<br/>";
                id("iplayer").src = URL.createObjectURL(resultLibrary[fileIndex]);
            }
        });
    } catch (ex) {
        id("messageDiv").innerHTML +=
            "Exception encountered: " + ex.message + "<br/>";
    }
}

5. Adicione o código de Reproduzir em

O código nesta etapa basta para que você consiga habilitar Reproduzir em no seu aplicativo. Ele pega uma referência ao PlayToManager para o aplicativo atual e associa o manipulador do evento sourcerequested. No manipulador de evento sourcerequested, transfira a propriedade msPlayToSource do elemento de mídia HTML5 ao método setSource do PlayToManager. Em seguida, o PlayToManager faz streaming da mídia para o destino de Reproduzir em selecionado pelo usuário.

No arquivo Default.js file, adicione o seguinte código após o código da etapa anterior.

var ptm = Windows.Media.PlayTo.PlayToManager.getForCurrentView();
ptm.addEventListener("sourcerequested", sourceRequestHandler, false);

function sourceRequestHandler(e) {
    try {
        var sr = e.sourceRequest;
        var controller;

        try {
            controller = mediaElement.msPlayToSource;
        } catch (ex) {
            id("messageDiv").innerHTML +=
                "msPlaytoSource failed: " + ex.message + "<br/>";
        }

        sr.setSource(controller);
    } catch (ex) {

        id("messageDiv").innerHTML +=
            "Exception encountered: " + ex.message + "<br/>";
    }
}

6. Crie um destino para Reproduzir em (opcional)

Para executar o aplicativo, você precisará de um dispositivo para o qual Reproduzir em possa transmitir mídia. Caso você não possua um receptor Reproduzir em certificado, poderá usar o Windows Media Player como dispositivo de destino. Para isso, seu computador deve estar conectado a uma rede privada.

Inicie o Windows Media Player.
Expanda o menu Transmissão e habilite a opção Permitir controle remoto do meu Player.... Deixe o Windows Media Player aberto; é necessário que ele esteja em execução para que fique disponível como o destino de Reproduzir em.
Abra o painel de controle Dispositivos e Impressoras. Clique em Adicionar dispositivos e impressoras. No assistente Adicionar dispositivos e impressoras, na janela Escolha um dispositivo ou impressora para adicionar a este PC, localize o Renderizador de mídia digital para o seu PC. Esse é o Windows Media Player para o seu PC. Selecione o item e clique em Avançar. Quando o assistente for concluído, você verá a sua instância do Windows Media Player na lista de Dispositivos Multimídia.

7. Executar o aplicativo

No Visual Studio, pressione F5 (depurar) para executar o aplicativo. Você pode selecionar qualquer botão de mídia para reproduzir ou visualizar o primeiro item de mídia em bibliotecas de mídia diferentes. Enquanto uma mídia estiver em reprodução, abra o botão Dispositivos e selecione o destino de Reproduzir em para fazer o streaming da mídia para o dispositivo de destino.

Resumo

Neste guia de início rápido, você adicionou o recurso Reproduzir em a um aplicativo que reproduziu conteúdo de vídeo e áudio e exibiu imagens. O recurso Reproduzir em permite que os usuários transmitam o conteúdo do aplicativo para um receptor Reproduzir em de sua rede.