Inicio rápido: crear un receptor Reproducir en (HTML)

Artículo
02/16/2016

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]

Puedes crear un software de receptor Reproducir en que reciba multimedia transmitido desde un equipo cliente y reproduzca o muestre el contenido como parte de tu aplicación. En este tema te explicamos cómo crear una aplicación de la Tienda Windows que se anuncie en tu red local como un Representador de medios digitales, reciba multimedia de vídeo procedente de otro equipo, reproduzca dicho vídeo y responda a más comandos del equipo cliente (como cambios de volumen, cambios de ubicación de reproducción, etc.).

Requisitos previos

Microsoft Visual Studio

Crear un nuevo proyecto y habilitar el acceso a las imágenes

Abre Visual Studio y selecciona Nuevo proyecto en el menú Archivo. En la sección JavaScript, selecciona Aplicación vacía. Asigna el nombre PlayToReceiverSample a la aplicación y haz clic en Aceptar.
Abre el archivo package.appxmanifest y selecciona la pestaña Capacidades. Selecciona la funcionalidad Redes domésticas o de trabajo para que la aplicación pueda conectarse a otros equipos de la red local. Cierra y guarda el archivo de manifiesto.

Agregar una interfaz de usuario HTML

Abre el archivo Default.html y agrega el siguiente código HTML en la sección <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>

Agregar código de inicialización

El código de este paso relaciona los botones en la página con sus respectivos controladores de eventos. La aplicación tiene dos botones: un botón Iniciar para anunciar el receptor Reproducir en en la red local y un botón Detener para dejar de anunciarlo.

Abre la carpeta js. Abre el archivo Default.js y agrega el siguiente código en lugar de la función onactivated.

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());
    }
};

Agregar controladores de eventos de botón

El código de este paso define los controladores de eventos de los botones Iniciar y Detener. Durante el controlador de eventos del botón Iniciar, el código crea una instancia de la clase PlayToReceiver, que es el receptor Reproducir en de la aplicación. Después de que el código cree la instancia del receptor Reproducir en, asociará controladores de eventos con los eventos de dicho receptor. Estos eventos se generan cuando el equipo cliente de Reproducir en solicite una acción. Entre las posibles acciones encontramos recibir los medios de origen (lo que genera el evento SourceChangeRequested) y solicitudes para pausar, continuar o detener la reproducción multimedia, cambiar el nivel de volumen, silenciar o reactivar el audio, cambiar la velocidad de reproducción multimedia o cambiar la hora de ubicación de reproducción. Cada acción tiene su evento correspondiente.

Tras agregar los controladores de eventos, la aplicación define la propiedad FriendlyName del receptor Reproducir en (que muestra el nombre del receptor tal y como se ve en la red) y las propiedades que indican que este receptor Reproducir en solo admite vídeo.

Cuando el receptor Reproducir en se inicializa, la aplicación asocia los controladores de eventos para la etiqueta de vídeo HTML5. Estos eventos se generan cuando tiene lugar una acción relacionada con la etiqueta de vídeo que incluye la aplicación. Cuando estos eventos se producen, el controlador de eventos llama a un método de notificación del receptor Reproducir en para informar de la acción al cliente Reproducir en. Por ejemplo, cuando el elemento multimedia termina de reproducirse, se genera el evento ended de la etiqueta de vídeo. Durante el controlador de eventos del evento ended, el código llama al evento NotifyEnded del receptor Reproducir en para informar al equipo cliente de que el vídeo ha acabado.

Después de que tanto el receptor Reproducir en como la etiqueta de vídeo se hayan inicializado, el código del controlador del botón llama al método StartAsync para anunciar la aplicación como un Representador de medios digitales en la red local. La aplicación obtiene además una referencia a la ventana activa para evitar que la pantalla se bloquee.

En el controlador de eventos del botón Detener, el código llama al botón StopAsync para dejar de anunciar el receptor Reproducir en, libera la referencia a la ventana activa y quita los controladores de eventos correspondientes al receptor Reproducir en y a la etiqueta de vídeo.

Agrega el siguiente código al archivo Default.js y tras el código del paso 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 + "'.";
    }
}

Agregar controladores de eventos del receptor Reproducir en

El código de este paso agrega el código de los controladores de eventos del receptor Reproducir en. Se llama a estos controladores de eventos en respuesta a las solicitudes procedentes del equipo cliente Reproducir en. Por ejemplo, si el equipo cliente Reproducir en activa o desactiva el volumen, se genera el evento MuteChangeRequested. En el controlador de eventos asociado, la aplicación silencia o reactiva el audio de la etiqueta de vídeo local en respuesta a la solicitud.

Agrega el siguiente código al archivo Default.js y tras el código del paso 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;
}

Agregar controladores de eventos del reproductor de vídeo

El código de este paso agrega el código de los controladores de eventos del reproductor de vídeo. Se llama a estos controladores de eventos cuando se producen eventos relacionados con el reproductor de vídeo local. Después, los controladores de eventos notifican al equipo cliente a través del método del receptor Reproducir en correspondiente.

Agrega el siguiente código al archivo Default.js y tras el código del paso 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);
    }

Guarda y cierra el archivo Default.js.

Ejecuta la aplicación.

En Visual Studio, presiona F5 (depurar) para ejecutar la aplicación.
Haz clic en el botón Start Play To Receiver (Iniciar receptor Reproducir en).
Si el receptor Reproducir en se inicia correctamente, abre el acceso Configuración en otro equipo y selecciona Más opciones de configuración de PC. En la ventana Más configuraciones, selecciona Dispositivos.
En la sección Dispositivos, haz clic en Agregar un dispositivo. Busca el Representador de medios digitales Receptor Reproducir en de ejemplo. Si cambiaste el valor de la propiedad FriendlyName del receptor Reproducir en, busca el nombre en cuestión. Selecciona el receptor Reproducir en de la lista para agregarlo.
En el equipo cliente, reproduce un vídeo que se pueda transmitir con Reproducir en. Durante la reproducción de los recursos multimedia, abre el acceso Dispositivos y selecciona tu receptor Reproducir en personalizado como destino del vídeo transmitido.

Resumen

En este inicio rápido has creado una aplicación que se anuncia como un Representador de medios digitales y que reproduce contenido transmitido desde un cliente Reproducir en.