Idioma: HTML | XAML

Início rápido: criando um Receptor de reprodução (HTML)

Você pode criar um receptor de reprodução 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 de reprodução sobre a rede local e um botão parar para interromper a notificação do receptor de reprodução.

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 receptor de reprodução, ele associa os manipuladores de eventos com os eventos 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 a marca do vídeo HTML5. Esses eventos são acionados quando uma ação ocorre para a marca 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 da ação. Por exemplo, quando a mídia termina de ser reproduzida, o evento ended da marca 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 a marca do 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 de reprodução, libera a referência para a janela de exibição ativa e remove os manipuladores de eventos para o receptor de reprodução 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 de reprodução

O código nesta etapa adiciona o código para os manipuladores de eventos do receptor de reprodução. 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 de reprodução.

  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 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 Reprodução. 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

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

 

 

Mostrar:
© 2015 Microsoft