Aplicaciones de Windows
Contraer la tabla de contenido
Expandir la tabla de contenido

Inicio rápido: Usar Reproducir en en aplicaciones (aplicaciones de la Tienda Windows con JavaScript y HTML)

Puedes usar Reproducir en para permitir que los usuarios transmitan fácilmente audio, vídeo o imágenes desde su equipo a los dispositivos de su red doméstica. En este tema, se muestra cómo usar Reproducir en en una aplicación de la Tienda Windows para que los usuarios puedan transmitir contenido multimedia a un dispositivo de destino.

Objetivo: Usar Reproducir en para transmitir contenido multimedia a un dispositivo de destino.

Requisitos previos

Microsoft Visual Studio Express 2012 for Windows 8

Instrucciones

1. Crear un nuevo proyecto y habilitar el acceso a las bibliotecas multimedia

  1. Abre Visual Studio Express 2012 for Windows 8 y selecciona Nuevo proyecto en el menú Archivo. En la sección Javascript, selecciona Aplicación vacía. Asigna el nombre PlayToSample a la aplicación y haz clic en Aceptar.
  2. Abre el archivo package.appxmanifest y selecciona la pestaña Capacidades. Selecciona las capacidades Biblioteca de música, Biblioteca de imágenes y Biblioteca de vídeos para permitir que la aplicación acceda a las bibliotecas multimedia en un equipo. Cierra y guarda el archivo de manifiesto.

2. Agregar una interfaz de usuario HTML

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

El código de este paso crea los controladores de eventos para los eventos de clic de los botones HTML. La función showDiv alterna entre los elementos multimedia HTML5 (<video>, <audio> o <img>) para determinar cuál está visible y retiene una referencia al elemento activo. Esta referencia se pasa a PlayToManager para trasmitir el origen del elemento al destino de Reproducir en. Se incluye una función de acceso directo, id, para permitir un acceso cómodo a la función getElementById.

  • Abre la carpeta js. Abre el archivo Default.js y agrega el siguiente código en lugar de la función WinJS.Application.onmainwindowactivated predeterminada.
    
    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. Agregar código para obtener un origen multimedia de las bibliotecas multimedia locales

Se llama al código de este paso durante los eventos de clic de los botones HTML. Cada función toma el primer elemento encontrado en la biblioteca multimedia seleccionada y lo reproduce o muestra en el elemento multimedia HTML5 asociado. Por ejemplo, si haces clic en el botón Vídeo de la aplicación, la función getVideoFile obtiene el primer vídeo de la Biblioteca de vídeos, lo establece como el origen para la etiqueta <video> y lo reproduce.

  • En el archivo Default.js, agrega el siguiente código después del código del paso 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. Agregar código de Reproducir en

Lo único que necesitas para habilitar Reproducir en en la aplicación es el código de este paso. Este obtiene una referencia a PlayToManager para la aplicación actual y asocia el controlador de eventos del evento sourcerequested. En el controlador de eventos de sourcerequested, pasa la propiedad msPlayToSource del elemento multimedia HTML5 al método setSource de PlayToManager. Después, PlayToManager transmite el contenido multimedia al destino de Reproducir en que seleccionó el usuario.

  • En el archivo Default.js, agrega el siguiente código después del código del paso 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. Crear un destino para Reproducir en (opcional)

Para ejecutar la aplicación necesitarás un dispositivo de destino al que Reproducir en pueda transmitir recursos multimedia. Si no tienes un receptor Reproducir en certificado, puedes usar el Reproductor de Windows Media como dispositivo de destino. Para poder usar el Reproductor de Windows Media como un dispositivo de destino, el equipo debe estar conectado a una red privada.

  1. Abre el Reproductor de Windows Media de Microsoft.
  2. Expande el menú Transmitir y habilita la opción Permitir el control remoto de mi reproductor.... Deja el Reproductor de Windows Media abierto; debe permanecer en ejecución para estar disponible como el destino de Reproducir en.
  3. Abre el panel de control Dispositivos e impresoras. Haz clic en Agregar dispositivos e impresoras. En el asistente para Agregar dispositivos e impresoras, en la ventana Elegir un dispositivo o una impresora para agregar a este equipo, encuentra el Representador de medios digitales del equipo. Se trata del Reproductor de Windows Media del equipo. Selecciónalo y haz clic en Siguiente. Al finalizar el asistente, verás la instancia del Reproductor de Windows Media en la lista Dispositivos multimedia.

7. Ejecutar la aplicación

  • En Visual Studio Express 2012 for Windows 8, presiona F5 (depurar) para ejecutar la aplicación. Puedes seleccionar cualquier botón multimedia para reproducir o ver el primer elemento multimedia de las distintas bibliotecas multimedia. Durante la reproducción de los recursos multimedia, presiona el acceso a Dispositivos y selecciona el dispositivo de destino de Reproducir en para transmitir a él.

Resumen

En esta guía de inicio rápido, agregaste la funcionalidad de Reproducir en a una aplicación que reproducía contenido de vídeo y audio y mostraba imágenes. La funcionalidad Reproducir en permite a los usuarios transmitir el contenido de una aplicación a un receptor Reproducir en certificado en la red.

Temas relacionados

Transmisión multimedia a dispositivos mediante Reproducir en
Muestras
Ejemplo de Reproducir en
Muestra de PlayToReceiver
Ejemplo de servidor multimedia

 

 

Mostrar:
© 2018 Microsoft