Início rápido: criando a opção Reproduzir para o Receptor
Idioma: HTML | XAML

Início rápido: criando um Receptor de reprodução (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 criar um receptor Reproduzir em de software que receba a mídia transmitida de um computador do cliente e reproduza ou exiba o conteúdo como parte de seu aplicativo. Este tópico mostra como criar um aplicativo da Windows Store que notifique a si mesmo, na sua rede local, como um Renderizador de Mídia Digital; receba a mídia de vídeo de outro computador; reproduza esse vídeo e responda a comandos adicionais do computador cliente (por exemplo, alterações de volume, alterações de local de reprodução etc.).

Pré-requisitos

Microsoft Visual Studio

Criar um novo projeto e permitir o acesso às Imagens

  1. Abra o Visual Studio e selecione Novo Projeto no menu Arquivo. Na seção Javascript, selecione Aplicativo em Branco. Nomeie o aplicativo PlayToReceiverSample e clique em OK.
  2. Abra o arquivo package.appxmanifest e selecione a guia Recursos. Selecione o recurso Rede doméstica ou do trabalho para habilitar seu aplicativo a se conectar com outros computadores de sua rede local. Feche e salve o arquivo de manifesto.

Adicionar a interface do usuário em HTML

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


<table>
    <tr>
        <td><button id="startReceiverButton">Start Play To Receiver</button></td>
        <td style="text-align:right"><button id="stopReceiverButton">Stop Play To Receiver</button></td>
    </tr>
    <tr>
        <td colspan="2"><video id="videoPlayer" width="800" height="600" /></td>
    </tr>
    <tr>
        <td colspan="2"><div id="statusDiv" /></td>
    </tr>
</table>


Adicione o código de inicialização

O código desta etapa associa os botões da página com seus respectivos manipuladores de eventos. Há dois botões no aplicativo. Um botão iniciar para notificar o receptor Reproduzir em sobre a rede local e um botão parar para interromper a notificação do receptor Reproduzir em.

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


app.onactivated = function (args) {
    if (args.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
        if (args.detail.previousExecutionState !== Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
            startReceiverButton.addEventListener("click", startReceiverButton_Click);
            stopReceiverButton.addEventListener("click", stopReceiverButton_Click);
        } else {
            // TODO: This application has been reactivated from suspension. 
            // Restore application state here.
        }
        args.setPromise(WinJS.UI.processAll());
    }
};


Adicionar o botão manipuladores de eventos

O código nesta etapa define os manipuladores de eventos para os botões iniciar e parar. Durante o manipulador de eventos para o botão iniciar, o código cria uma instância da classe PlayToReceiver que é o Receptor de reprodução para o aplicativo. Depois que o código cria a instância do Receptor de reprodução, ele associa os manipuladores de eventos com os eventos do Receptor de reprodução. Esses eventos ocorrem quando uma ação é solicitada pelo computador do cliente de reprodução. Essas ações incluem o recebimento da mídia de origem, que aciona o evento SourceChangeRequested, e solicita pausar, continuar ou parar de reproduzir da mídia, alterar o nível do volume, ativar o mudo ou desativar o mudo do áudio, alterar a taxa de reprodução da mídia ou alterar o tempo do local de reprodução. Cada ação tem um evento respectivo.

Depois que os manipuladores de eventos são adicionados, o aplicativo define a propriedade FriendlyName do Receptor de reprodução que identifica o nome do Receptor de reprodução, pois ele é visto na rede e as propriedades que mostram que este Receptor de reprodução suporta apenas vídeo.

Depois que o Receptor de reprodução tiver sido inicializado, o aplicativo associa os manipuladores de evento para o rótulo do vídeo HTML5. Esses eventos são acionados quando uma ação ocorre para o rótulo do vídeo que é incluído no aplicativo. Quando esses eventos ocorrem , o manipulador de eventos chama um método de notificação do Receptor de reprodução para informar o cliente de reprodução sobre a ação. Por exemplo, quando a mídia termina de ser reproduzida, o evento ended do rótulo do vídeo é acionado. Durante o manipulador de eventos do evento ended, o código chama o evento NotifyEnded do Receptor de reprodução para informar o computador do cliente que o vídeo está concluído.

Depois que o Receptor de reprodução e o rótulo de vídeo tiverem sido iniciados, o código no manipulador do botão iniciar chama o método StartAsync para notificar o aplicativo como um Renderizador de mídia digital na rede local. O aplicativo também obtém uma referência para a janela de exibição ativa para impedir que a tela seja bloqueada.

No manipulador de eventos para o botão parar, o código chama o botão StopAsync para parar o anúncio do receptor Reproduzir em, libera a referência para a janela de exibição ativa e remove os manipuladores de eventos para o receptor Reproduzir em e marca de vídeo.

Adicione o seguinte código ao arquivo Default.js e após o código da etapa anterior.


var receiver;
var display;
var videoPlayer;

function startReceiverButton_Click() {
    try {
        if (receiver == null) {
            receiver = new Windows.Media.PlayTo.PlayToReceiver();
        }

        // Add Play To Receiver events and properties
        receiver.addEventListener("currenttimechangerequested", receiver_CurrentTimeChangeRequested);
        receiver.addEventListener("mutechangerequested", receiver_MuteChangeRequested);
        receiver.addEventListener("pauserequested", receiver_PauseRequested);
        receiver.addEventListener("playbackratechangerequested", receiver_PlaybackRateChangeRequested);
        receiver.addEventListener("playrequested", receiver_PlayRequested);
        receiver.addEventListener("sourcechangerequested", receiver_SourceChangeRequested);
        receiver.addEventListener("stoprequested", receiver_StopRequested);
        receiver.addEventListener("timeupdaterequested", receiver_TimeUpdateRequested);
        receiver.addEventListener("volumechangerequested", receiver_VolumeChangeRequested);

        receiver.friendlyName = "Sample Play To Receiver";
        receiver.supportsAudio = false;
        receiver.supportsVideo = true;
        receiver.supportsImage = false;

        // Add MediaElement events
        videoPlayer = document.getElementById("videoPlayer");
        videoPlayer.addEventListener("durationchange",videoPlayer_DurationChange); 
        videoPlayer.addEventListener("ended", videoPlayer_Ended); 
        videoPlayer.addEventListener("error", videoPlayer_Error);
        videoPlayer.addEventListener("loadedmetadata", videoPlayer_LoadedMetadata); 
        videoPlayer.addEventListener("pause", videoPlayer_Pause); 
        videoPlayer.addEventListener("playing", videoPlayer_Playing); 
        videoPlayer.addEventListener("ratechange", videoPlayer_RateChange); 
        videoPlayer.addEventListener("seeked", videoPlayer_Seeked); 
        videoPlayer.addEventListener("seeking", videoPlayer_Seeking); 
        videoPlayer.addEventListener("volumechange", videoPlayer_VolumeChange); 

        // Advertise the receiver on the local network and start receiving commands
        receiver.startAsync().done(function () {
            // Prevent the screen from locking
            if (display == null) {
                display = new Windows.System.Display.DisplayRequest();
            }
            display.requestActive();

            statusDiv.innerHTML = "'" + receiver.friendlyName + "' started.";
        });


    }
    catch(e) {
        receiver = null;
        statusDiv.innerHTML = "Failed to start receiver.";
    }
}

function stopReceiverButton_Click(e) {
    try {
        if (receiver != null) {
            receiver.stopAsync().done(function() {
                if (display != null)
                    display.requestRelease();

                // Remove Play To Receiver events
                receiver.removeEventListener("currenttimechangerequested", receiver_CurrentTimeChangeRequested);
                receiver.removeEventListener("mutechangerequested", receiver_MuteChangeRequested);
                receiver.removeEventListener("pauserequested", receiver_PauseRequested);
                receiver.removeEventListener("playbackratechangerequested", receiver_PlaybackRateChangeRequested);
                receiver.removeEventListener("playrequested", receiver_PlayRequested);
                receiver.removeEventListener("sourcechangerequested", receiver_SourceChangeRequested);
                receiver.removeEventListener("stoprequested", receiver_StopRequested);
                receiver.removeEventListener("timeupdaterequested", receiver_TimeUpdateRequested);
                receiver.removeEventListener("volumechangerequested", receiver_VolumeChangeRequested);

                //  Remove MediaElement events
                videoPlayer = document.getElementById("videoPlayer");
                if (videoPlayer.readyState != 0) {
                    videoPlayer.pause();
                    videoPlayer.currentTime = 0;
                }

                videoPlayer.removeEventListener("durationchange",videoPlayer_DurationChange); 
                videoPlayer.removeEventListener("ended", videoPlayer_Ended); 
                videoPlayer.removeEventListener("error", videoPlayer_Error);
                videoPlayer.removeEventListener("loadedmetadata", videoPlayer_LoadedMetadata); 
                videoPlayer.removeEventListener("pause", videoPlayer_Pause); 
                videoPlayer.removeEventListener("playing", videoPlayer_Playing); 
                videoPlayer.removeEventListener("ratechange", videoPlayer_RateChange); 
                videoPlayer.removeEventListener("seeked", videoPlayer_Seeked); 
                videoPlayer.removeEventListener("seeking", videoPlayer_Seeking); 
                videoPlayer.removeEventListener("volumechange", videoPlayer_VolumeChange); 

                statusDiv.innerHTML = "Stopped receiver.";
            });
        }
    }
    catch (e) {
        statusDiv.innerHTML = "Failed to stop '" + receiver.FriendlyName + "'.";
    }
}


Adicione os manipuladores de eventos do receptor Reproduzir em

O código nesta etapa adiciona o código para os manipuladores de eventos do receptor Reproduzir em. Esses manipuladores de eventos são chamados em resposta às solicitações do computador do cliente de reprodução. Por exemplo, se o computador do cliente de reprodução ativar ou desativar o mudo do volume, então o evento MuteChangeRequested será gerado. No manipulador de eventos associados, o aplicativo ativa ou desativa o mudo da marca do vídeo local em resposta à solicitação.

Adicione o seguinte código ao arquivo Default.js e após o código da etapa anterior.


function receiver_CurrentTimeChangeRequested(args) {
    if (videoPlayer.currentTime !== 0 || args.time !== 0) {
        videoPlayer.currentTime = args.time / 1000;
    }
}

function receiver_MuteChangeRequested(args) {
    videoPlayer.muted = args.mute;
}

function receiver_PauseRequested() {
    videoPlayer.pause();
}


function receiver_PlaybackRateChangeRequested(args) {
    videoPlayer.playbackRate = args.rate;
}

function receiver_PlayRequested() {
    videoPlayer.play();
}

function receiver_SourceChangeRequested(args) {
    if (args.stream != null) {
        var mediaStream = MSApp.createBlobFromRandomAccessStream(args.stream.contentType, args.stream);
        videoPlayer.src = URL.createObjectURL(mediaStream, false);
    }
}

function receiver_StopRequested() {
    if (videoPlayer.readyState != 0) {
        videoPlayer.pause();
        videoPlayer.currentTime = 0;
    }
}

function receiver_TimeUpdateRequested() {
    receiver.notifyTimeUpdate(videoPlayer.currentTime * 1000);
}

function receiver_VolumeChangeRequested(args) {
    videoPlayer.volume = args.volume;
}


Adicionar manipuladores de evento do player de vídeo

O código nesta etapa adiciona o código dos manipuladores de eventos do player de vídeo. Esses manipuladores de eventos são chamados quando ocorrem eventos para o player de vídeo local. Os manipuladores de eventos então notificam o computador do cliente usando o respectivo método do receptor Reproduzir em.

  1. Adicione o seguinte código ao arquivo Default.js e após o código da etapa anterior.

    
        function videoPlayer_DurationChange() {
            if (videoPlayer.duration !== Infinity)
            {
                receiver.notifyDurationChange(videoPlayer.duration * 1000);
            }
        }
    
        function videoPlayer_LoadedMetadata () { 
            receiver.notifyLoadedMetadata(); 
        }
    
        function videoPlayer_Ended () { 
            receiver.notifyEnded(); 
        }
    
        function videoPlayer_Error() {
            receiver.notifyError();
            receiver.notifyStopped();
        }
    
        function videoPlayer_Pause () { 
            receiver.notifyPaused(); 
        }
    
        function videoPlayer_Playing () { 
            receiver.notifyPlaying(); 
        }
        
        function videoPlayer_RateChange () { 
            receiver.notifyRateChange(videoPlayer.playbackRate); 
        }
    
        function videoPlayer_Seeked () { 
            receiver.notifySeeked(); 
        }
    
        function videoPlayer_Seeking () { 
            receiver.notifySeeking(); 
        }
    
        function videoPlayer_VolumeChange() {
            receiver.notifyVolumeChange(videoPlayer.volume, videoPlayer.muted);
        }
    
    
    
  2. Salve e feche o arquivo Default.js.

Executar o aplicativo

  1. No Visual Studio, pressione F5 (depurar) para executar o aplicativo.
  2. Clique no botão Start Play To Receiver (Iniciar Receptor de reprodução).
  3. Se o Receptor de reprodução iniciar com sucesso, abra o botão Configurações em outro computador e selecione Mais configurações do PC. Na janela Mais configurações, selecione Dispositivos.
  4. Na seção Dispositivos, clique em Adicionar um dispositivo. Localize o Renderizador de mídia digital do Receptor de reprodução de exemplo. Se você mudou o valor da propriedade FriendlyName do Receptor de reprodução, então localize aquele nome. Selecione o Receptor de reprodução na lista para adicioná-lo.
  5. No computador do cliente, reproduza um vídeo que possa ser transmitido usando Reproduzir em. Enquanto a mídia está em execução, abra o botão Dispositivos e selecione o Receptor de reprodução personalizado como o destino para o vídeo transmitido.

Resumo

Neste início rápido, você criou um aplicativo que se auto notifica como um Renderizador de mídia digital e reproduz o conteúdo transmitido de um cliente de reprodução.

Tópicos relacionados

Transmitindo mídia para dispositivos usando Reproduzir em
Exemplos
Exemplo do botão Reproduzir em
exemplo de PlayToReceiver
exemplo de Servidor de Mídia

 

 

Mostrar:
© 2018 Microsoft