Quickstart: using Play To in apps (HTML)

Article
10/13/2015

[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]

You can use Play To to enable users to easily stream audio, video, or images from their computer to devices in their home network. This topic shows you how to use Play To in a Windows Store app to enable users to stream media to a target device.

Objective: Use Play To to stream media to a target device.

Prerequisites

Microsoft Visual Studio

Instructions

1. Create a new project and enable access to media libraries

Open Visual Studio and select New Project from the File menu. In the Javascript section, select Blank Application. Name the application PlayToSample and click OK.
Open the package.appxmanifest file and select the Capabilities tab. Select the Music Library, Pictures Library, and Videos Library capabilities to enable your application to access the media libraries on a computer. Close and save the manifest file.

2. Add HTML UI

Open the Default.html file and add the following HTML to the <body> section.

  <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. Add initialization code

The code in this step creates the event handlers for the click events of the HTML buttons. The showDiv function toggles which HTML5 media element (<video>, <audio>, or <img>) is visible and retains a reference to the active element. This reference is passed to the PlayToManager to stream the source of the element to the Play To target. A shortcut function, id, is included for convenient access to the getElementById function.

Open the js folder. Open the Default.js file and add the following code in place of the default WinJS.Application.onmainwindowactivated function.

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. Add code to get media source from the local media libraries

The code in this step is called during the click events of the HTML buttons. Each function takes the first item found in the selected media library and plays or displays it in the related HTML5 media element. For example, if you click the Video button in the application, then the getVideoFile function gets the first video from Videos, sets it as the source for the <video> tag, and plays the video.

In the Default.js file, add the following code after the code from the previous step.

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. Add Play To code

The code in this step is all that you need to enable Play To in your application. It gets a reference to the PlayToManager for the current application and associates the event handler for the sourcerequested event. In the sourcerequested event handler, you pass the msPlayToSource property of the HTML5 media element to the setSource method of the PlayToManager. The PlayToManager then streams the media to the Play To target selected by the user.

In the Default.js file, add the following code after the code from the previous step.

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. Create a Play To target (optional)

To run the application, you will need a target device to which Play To can stream media. If you do not have a certified Play To receiver, you can use Windows Media Player as a target device. In order to use Windows Media Player as a target device your computer must be connected to a private network.

Start Windows Media Player.
Expand the Stream menu and enable the Allow remote control of my Player... option. Leave Windows Media Player open; it must be running to be available as a Play To target.
Open the Devices and Printers control panel. Click Add devices and printers. In the Add devices and printers wizard, in the Choose a device or printer to add to this PC window, locate the Digital media renderer for your PC. This is the Windows Media Player for your PC. Select it and click Next. When the wizard finishes, you will see your instance of Windows Media Player in the list of Multimedia Devices.

7. Run the app

In Visual Studio, press F5 (debug) to run the app. You can select any of the media buttons to play or view the first media item in the different media libraries. While the media is playing, open the Devices charm and select your Play To target to stream the media to the target device.

Summary

In this quickstart, you added Play To capability to an application that played video and audio content and displayed images. The Play To capability enables users to stream the content from the application to a certified Play To receiver on their network.

Streaming media to devices using Play To

Samples

Play To sample

PlayToReceiver sample

Media Server sample