Démarrage rapide : utilisation de la fonctionnalité Lire sur dans les applications (HTML)

Article
02/12/2016

[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Vous pouvez utiliser la fonctionnalité Lire sur pour permettre aux utilisateurs de diffuser facilement du contenu audio, des vidéos ou des images depuis leur ordinateur vers les périphériques de leur réseau domestique. Cette rubrique explique comment utiliser la fonctionnalité Lire sur dans une application du Windows Store pour permettre aux utilisateurs de diffuser du contenu multimédia vers un périphérique cible.

Objectif: Utilisez la fonctionnalité Lire sur pour diffuser du contenu multimédia vers un périphérique cible.

Prérequis

Microsoft Visual Studio

Instructions

1. Créer un projet et autoriser l’accès à des bibliothèques multimédias

Ouvrez Visual Studio et sélectionnez Nouveau projet dans le menu Fichier. Dans la section JavaScript, sélectionnez Application vide. Nommez l’application PlayToSample et cliquez sur OK.
Ouvrez le fichier package.appxmanifest, puis sélectionnez l’onglet Capacités. Sélectionnez les fonctionnalités Médiathèque, Bibliothèque d’images et Vidéothèque pour permettre à votre application d’accéder aux bibliothèques multimédias d’un ordinateur. Fermez et enregistrez le fichier manifeste.

2. Ajouter une interface utilisateur HTML

Ouvrez le fichier Default.html et ajoutez le code HTLML suivant à la section <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. Ajouter du code d’initialisation

Le code dans cette étape crée les gestionnaires d’événements pour les événements click des boutons HTML. La fonction showDiv active ou désactive les éléments multimédias HTML5 (<video>, <audio> ou <img>) qui sont visibles et conserve une référence à l’élément actif. Cette référence est transmise à PlayToManager pour diffuser la source de l’élément à la cible Lire sur. Une fonction raccourci, id, est incluse pour fournir un accès pratique à la fonction getElementById.

Ouvrez le dossier js. Ouvrez le fichier Default.js et ajoutez le code suivant à la place de la fonction WinJS.Application.onmainwindowactivated par défaut.

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. Ajouter du code pour obtenir la source multimédia des bibliothèques multimédias locales

Le code dans cette étape est appelé lors des événements click des boutons HTML. Chaque fonction accepte le premier élément trouvé dans la bibliothèque multimédia sélectionnée, puis le lit ou l’affiche dans l’élément multimédia HTML5 associé. Par exemple, si vous cliquez sur le bouton Vidéo dans l’application, la fonction getVideoFile obtient la première vidéo du dossier Vidéos, la définit comme source pour la balise <video>, puis lit la vidéo.

Dans le fichier Default.js, ajoutez le code suivant après le code de l’étape précédente.

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. Ajouter du code Lire sur

Le code fourni dans cette étape est tout ce dont vous avez besoin pour activer la fonctionnalité Lire sur dans votre application. Il obtient une référence à PlayToManager pour l’application active et associe le gestionnaire d’événements pour l’événement sourcerequested. Dans le gestionnaire d’événements sourcerequested, vous passez la propriété msPlayToSource de l’élément multimédia HTML5 à la méthode setSource de PlayToManager. PlayToManager diffuse ensuite le contenu multimédia vers la cible Lire sur sélectionnée par l’utilisateur.

Dans le fichier Default.js, ajoutez le code suivant après le code de l’étape précédente.

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. Créer une cible Lire sur (facultatif)

Pour exécuter l’application, vous avez besoin d’un périphérique cible capable de diffuser le contenu multimédia via la fonctionnalité Lire sur. Si vous ne disposez pas d’un récepteur Lire sur certifié, vous pouvez utiliser le Lecteur Windows Media comme périphérique cible. Pour utiliser le Lecteur Windows Media comme périphérique cible, votre ordinateur doit être connecté à un réseau privé.

Démarrez le Lecteur Windows Media.
Développez le menu Diffuser en continu et activez l’option Autoriser le contrôle à distance de mon Lecteur.... Laissez le Lecteur Windows Media ouvert, car il doit être en cours d’exécution pour être disponible en tant que cible Lire sur.
Ouvrez le Panneau de configuration Périphériques et imprimantes. Cliquez sur Ajouter des périphériques et des imprimantes. Dans l’Assistant Ajouter des périphériques et des imprimantes, dans la fenêtre Choisir un périphérique ou une imprimante à ajouter à cet ordinateur, repérez le Périphérique multimédia de rendu numérique de votre PC. Il s’agit du Lecteur Windows Media de votre ordinateur. Sélectionnez-le et cliquez sur Suivant. À la fin de l’Assistant, l’instance du Lecteur Windows Media figure dans la liste Périphériques multimédias.

7. Exécuter l’application

Dans Visual Studio, appuyez sur la touche F5 (débogage) pour exécuter l’application. Vous pouvez sélectionner n’importe quel bouton pour lire ou afficher le premier élément multimédia des différentes bibliothèques multimédias. Pendant la lecture du média, ouvrez l’icône Périphériques et sélectionnez la cible Lire sur pour diffuser le contenu multimédia sur le périphérique cible.

Récapitulatif

Dans ce guide de démarrage rapide, vous avez ajouté la fonctionnalité Lire sur à une application pour lui permettre de lire du contenu audio et vidéo et d’afficher des images. La fonctionnalité Lire sur permet aux utilisateurs de diffuser du contenu de l’application vers un récepteur Lire sur certifié sur leur réseau.