Langage: HTML | XAML

Démarrage rapide : création d’un récepteur Lire sur (HTML)

Applies to Windows only

Vous pouvez créer un récepteur logiciel Lire sur destiné à recevoir les médias diffusés en continu à partir d’un ordinateur client et à lire ou afficher le contenu dans le cadre de votre application. Cette rubrique vous montre comment créer une application du Windows Store qui se présente sur votre réseau local comme un périphérique multimédia de rendu numérique, capable de recevoir des vidéos d’un autre ordinateur, de lire ces vidéos et de répondre à d’autres commandes de l’ordinateur client, telles que les changements de volume, les changements d’emplacement de lecture, etc.

Prérequis

Microsoft Visual Studio

Créer un projet et autoriser l’accès à Images

  1. Ouvrez Visual Studio et sélectionnez Nouveau projet dans le menu Fichier. Dans la section JavaScript, sélectionnez Application vide. Nommez l’application PlayToReceiverSample et cliquez sur OK.
  2. Ouvrez le fichier package.appxmanifest, puis sélectionnez l’onglet Capacités. Sélectionnez la fonctionnalité Réseau domestique/professionnel pour permettre à votre application de se connecter à d’autres ordinateurs au sein de votre réseau local. Fermez et enregistrez le fichier manifeste.

Ajouter une interface utilisateur HTML

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


Ajouter du code d’initialisation

Le code de cette étape associe les boutons de la page à leur gestionnaire des événements respectif. L’application compte deux boutons. Un bouton de démarrage pour annoncer le récepteur Lire sur au niveau du réseau local et un bouton d’arrêt pour arrêter l’annonce du récepteur Lire sur.

Ouvrez le dossier js. Ouvrez le fichier Default.js et ajoutez le code suivant à la fonction onactivated par défaut.


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


Ajouter des gestionnaires d’événements de bouton

Le code de cette étape définit les gestionnaires d’événements pour les boutons de démarrage et d’arrêt. Dans le cadre du gestionnaire des événements du bouton de démarrage, le code crée une instance de la classe PlayToReceiver qui correspond au récepteur Lire sur pour l’application. Après avoir créé l’instance du récepteur Lire sur, le code associe ensuite des gestionnaires d’événements aux événements du récepteur Lire sur. Ces événements sont déclenchés lorsqu’une action est demandée par l’ordinateur client Lire sur. Il peut s’agir d’une action de réception du média source, qui déclenche l’événement SourceChangeRequested et demande la mise en pause, la poursuite ou l’arrêt de la lecture du média, la modification du niveau sonore, la désactivation ou la réactivation du son, la modification de la vitesse de lecture ou la modification de l’heure du lieu de lecture. À chaque action correspond un événement particulier.

Dès lors que les gestionnaires d’événements ont été ajoutés, l’application définit la propriété FriendlyName du récepteur Lire sur qui identifie le nom du récepteur Lire sur tel qu’il apparaît sur le réseau, ainsi que les propriétés qui montrent que ce récepteur Lire sur ne prend en charge que la vidéo.

Une fois que le récepteur Lire sur a été initialisé, l’application associe les gestionnaires d’événements pour la balise vidéo HTML5. Ces événements sont déclenchés lorsqu’une action se produit pour la balise vidéo incluse dans l’application. Lorsque ces événements se produisent, le gestionnaire des événements appelle une méthode de notification du récepteur Lire sur pour informer le client Lire sur de l’action. Par exemple, lorsque la lecture du média se termine, l’événement ended de la balise vidéo est déclenché. Dans le cadre du gestionnaire des événements de l’événement ended, le code appelle l’événement NotifyEnded du récepteur Lire sur pour informer l’ordinateur client que la vidéo est terminée.

Une fois le récepteur Lire sur et la balise vidéo initialisés, le code du gestionnaire de bouton démarrer appelle la méthode StartAsync pour annoncer l’application comme un périphérique multimédia de rendu numérique sur le réseau local. L’application obtient également une référence à la fenêtre d’affichage active pour empêcher le verrouillage de l’écran.

Dans le gestionnaire des événements du bouton d’arrêt, le code appelle le bouton StopAsync pour arrêter l’annonce du récepteur Lire sur, libère la référence à la fenêtre d’affichage active et supprime les gestionnaires d’événements pour le récepteur Lire sur et la balise vidéo.

Ajoutez le code suivant au fichier Default.js après le code de l’étape précédente.


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 + "'.";
    }
}


Ajouter des gestionnaires d’événements de récepteur Lire sur

Le code de cette étape ajoute le code des gestionnaires d’événements de récepteur Lire sur. Ces gestionnaires d’événements sont appelés en réponse aux demandes de l’ordinateur client Lire sur. Par exemple, si l’ordinateur client Lire sur active ou désactive le son, l’événement MuteChangeRequested est déclenché. Dans le gestionnaire des événements associé, l’application active ou désactive le son de la balise vidéo locale en réponse à la demande.

Ajoutez le code suivant au fichier Default.js après le code de l’étape précédente.


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


Ajouter des gestionnaires d’événements de lecteur vidéo

Le code de cette étape ajoute le code des gestionnaires d’événements de lecteur vidéo. Ces gestionnaires d’événements sont appelés lorsque des événements se produisent pour le lecteur vidéo local. Les gestionnaires d’événements notifient ensuite l’ordinateur client via la méthode de récepteur Lire sur correspondante.

  1. Ajoutez le code suivant au fichier Default.js après le code de l’étape précédente.

    
        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. Enregistrez et fermez le fichier Default.js.

Exécuter l’application

  1. Dans Visual Studio, appuyez sur la touche F5 (débogage) pour exécuter l’application.
  2. Cliquez sur le bouton Démarrer le récepteur Lire sur.
  3. Si le récepteur Lire sur démarre correctement, ouvrez l’icône Paramètres sur un autre ordinateur et sélectionnez Plus de paramètres PC. Dans la fenêtre Plus de paramètres, sélectionnez Périphériques.
  4. Dans la section Périphériques, cliquez sur Ajouter un périphérique. Recherchez le périphérique multimédia de rendu numérique Exemple de récepteur Lire sur. Si vous avez modifié la valeur de la propriété FriendlyName du récepteur Lire sur, recherchez ce nom. Sélectionnez le récepteur Lire sur dans la liste pour l’ajouter.
  5. Sur l’ordinateur client, lisez une vidéo qui puisse être diffusée en continu à l’aide la fonctionnalité Lire sur. Pendant la lecture du média, ouvrez l’icône Périphériques et sélectionnez votre récepteur Lire sur personnalisé comme cible de la vidéo diffusée en continu.

Récapitulatif

Dans ce guide rapide, vous avez créé une application qui se présente comme un périphérique multimédia de rendu numérique et lit du contenu diffusé en continu à partir d’un client Lire sur.

Rubriques associées

Diffusion multimédia en continu sur des périphériques à l’aide de la fonctionnalité Lire sur
Exemples
Exemple de la fonctionnalité Lire sur
Exemple de récepteur Lire sur
Exemple de serveur multimédia

 

 

Afficher:
© 2014 Microsoft