Schnellstart: Erstellen eines "Wiedergeben auf"-Empfängers
Inhaltsverzeichnis reduzieren
Inhaltsverzeichnis erweitern
Language: HTML | XAML

Schnellstart: Erstellen eines "Wiedergeben auf"-Empfängers (HTML)

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation ]

Sie können einen Softwareempfänger für "Wiedergeben auf" erstellen, der von einem Clientcomputer gestreamte Medien empfängt und den Inhalt als Teil Ihrer App wiedergibt oder anzeigt. In diesem Thema erfahren Sie, wie Sie eine Windows Store-App erstellen, die sich in Ihrem lokalen Netzwerk selbst als Digital Media-Renderer ankündigt, Videomedien von einem anderen Computer empfängt, diese Videomedien wiedergibt und auf weitere Befehle vom Clientcomputer (z. B. Änderung der Lautstärke oder des Wiedergabeorts) reagiert.

Voraussetzungen

Microsoft Visual Studio

Erstellen eines neuen Projekts und Aktivieren des Zugriffs auf Bilder

  1. Öffnen Sie Visual Studio, und wählen Sie im Menü Datei die Option Neues Projekt aus. Wählen Sie im Abschnitt JavaScript die Option Leere Anwendung aus. Geben Sie für die App den Namen PlayToReceiverSample ein, und klicken Sie auf OK.
  2. Öffnen Sie die Datei "package.appxmanifest", und wählen Sie die Registerkarte Funktionen. Wählen Sie die Funktion Heim- oder Arbeitsplatznetzwerke aus, damit Ihre Anwendung mit anderen Computern in Ihrem lokalen Netzwerk verbunden werden kann. Schließen und speichern Sie die Manifestdatei.

Hinzufügen einer HTML-Benutzeroberfläche

Öffnen Sie die Datei "Default.html", und fügen Sie dem Abschnitt <body> folgenden HTML-Code hinzu.


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


Hinzufügen von Initialisierungscode

Der Code in diesem Schritt ordnet die Schaltflächen auf der Seite den entsprechenden Ereignishandlern zu. In der App sind zwei Schaltflächen vorhanden. Eine Startschaltfläche, um im lokalen Netzwerk den Empfänger für "Wiedergeben auf" anzukündigen und eine Stoppschaltfläche, um die Ankündigung zu beenden.

Öffnen Sie den Ordner js. Öffnen Sie die Datei "Default.js", und fügen Sie statt der onactivated-Standardfunktion den folgenden Code hinzu.


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


Hinzufügen von Schaltflächenereignishandlern

Der Code in diesem Schritt bestimmt die Ereignishandler für die Start- und Stoppschaltflächen. Im Ereignishandler für die Startschaltfläche wird vom Code eine Instanz der PlayToReceiver-Klasse erstellt, die den Empfänger für "Wiedergeben auf" für die App darstellt. Nach dem Erstellen der Instanz des Empfängers für "Wiedergeben auf" verknüpft der Code dann Ereignishandler mit den Ereignissen des Empfängers für "Wiedergeben auf". Diese Ereignisse werden ausgelöst, wenn eine Aktion vom Clientcomputer für "Wiedergeben auf" angefordert wird. Diese Aktionen umfassen das Empfangen der Quellmedien, die das SourceChangeRequested-Ereignis auslösen sowie Anforderungen zum Anhalten, Fortfahren oder Beenden der Medienwiedergabe, zum Ändern der Lautstärke, zum Aktivieren bzw. Aufheben der Stummschaltung und zum Ändern der Medienwiedergaberate oder der Uhrzeit des Wiedergabeorts. Jeder Aktion ist ein entsprechendes Ereignis zugeordnet.

Nach dem Hinzufügen der Ereignishandler legt die App die FriendlyName-Eigenschaft des Empfängers für "Wiedergeben auf" fest, die den Namen des Empfängers für "Wiedergeben auf" identifiziert, wie er im Netzwerk zu sehen ist, sowie die Eigenschaften, die anzeigen, dass dieser Empfänger nur Video unterstützt.

Nach dem Initialisieren des Empfängers für "Wiedergeben auf" ordnet die App Ereignishandler für das HTML5-Videotag zu. Diese Ereignisse werden ausgelöst, wenn eine Aktion für das in der App enthaltene Video-Tag ausgeführt wird. Beim Auftreten dieser Ereignisse ruft der Ereignishandler eine Benachrichtigungsmethode des Empfängers für "Wiedergeben auf" auf, um den Client für "Wiedergeben auf" über die Aktion zu informieren. Beispiel: Wenn die Wiedergabe der Medien beendet ist, wird das ended-Ereignis des Video-Tags ausgelöst. Im Ereignishandler für das ended-Ereignis ruft der Code das NotifyEnded-Ereignis des Empfängers für "Wiedergeben auf" auf, um den Clientcomputer zu informieren, dass die Wiedergabe des Videos beendet ist.

Nachdem sowohl der Empfänger für "Wiedergeben auf" als auch das Video-Tag initialisiert wurden, ruft der Code im Handler der Startschaltfläche die StartAsync-Methode auf, um die App im lokalen Netzwerk als Digital Media-Renderer anzukündigen. Die App erhält darüber hinaus einen Verweis auf das aktive Anzeigefenster, um die Sperrung des Bildschirms zu verhindern.

Im Ereignishandler für die Stoppschaltfläche ruft der Code die StopAsync-Schaltfläche auf, um die Ankündigung für den Empfänger für "Wiedergeben auf" zu beenden, gibt den Verweis auf das aktive Anzeigefenster frei und entfernt die Ereignishandler für den Empfänger für "Wiedergeben auf" und das Video-Tag.

Fügen Sie der Datei "Default.js" folgenden Code nach dem Code aus dem vorherigen Schritt hinzu:


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


Hinzufügen der Ereignishandler für einen Empfänger für "Wiedergeben auf"

Der Code in diesem Schritt fügt den Code für die Ereignishandler des Empfängers für "Wiedergeben auf" hinzu. Diese Ereignishandler werden als Reaktion auf Anforderungen vom Clientcomputer für "Wiedergeben auf" aufgerufen. Wenn vom Clientcomputer für "Wiedergeben auf" z. B. die Stummschaltung aktiviert bzw. aufgehoben wird, wird das MuteChangeRequested-Ereignis ausgelöst. Im zugeordneten Ereignishandler aktiviert bzw. deaktiviert die App das lokale Video-Tag als Reaktion auf die Anforderung.

Fügen Sie der Datei "Default.js" folgenden Code nach dem Code aus dem vorherigen Schritt hinzu:


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


Hinzufügen der Ereignishandler für einen Videoplayer

Der Code in diesem Schritt fügt den Code für die Ereignishandler für einen Videoplayer hinzu. Diese Ereignishandler werden aufgerufen, wenn Ereignisse für den lokalen Videoplayer auftreten. Die Ereignishandler benachrichtigen dann den Clientcomputer mithilfe der entsprechenden Methode des Empfängers für "Wiedergeben auf".

  1. Fügen Sie der Datei "Default.js" folgenden Code nach dem Code aus dem vorherigen Schritt hinzu:

    
        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. Speichern und schließen Sie die Datei "Default.js".

Ausführen der App

  1. Drücken Sie in Visual Studio F5 (Debuggen), um die App auszuführen.
  2. Klicken Sie auf die Schaltfläche Start Play To Receiver (Empfänger für "Wiedergeben auf" starten).
  3. Wird der Empfänger für "Wiedergeben auf" erfolgreich gestartet, öffnen Sie den Charm Einstellungen auf einem anderen Computer, und wählen Sie Weitere PC-Einstellungen. Wählen Sie im Fenster mit den weiteren Einstellungen die Option Geräte.
  4. Klicken Sie im Abschnitt Geräte auf Gerät hinzufügen. Suchen Sie den Digital Media-Renderer Beispiel für einen Empfänger für "Wiedergeben auf". Falls Sie den Wert der FriendlyName-Eigenschaft des Empfängers für "Wiedergeben auf" geändert haben, suchen Sie diesen Namen. Wählen Sie den Empfänger für "Wiedergeben auf" aus der Liste aus, um ihn hinzuzufügen.
  5. Geben Sie auf dem Clientcomputer ein Video wieder, das mit "Wiedergeben auf" gestreamt werden kann. Öffnen Sie während der Medienwiedergabe den Charm "Geräte", und wählen Sie den benutzerdefinierten Empfänger für "Wiedergeben auf" als Ziel für das gestreamte Video aus.

Zusammenfassung

Sie haben in dieser Schnellstartanleitung eine App erstellt, die sich selbst als Digital Media-Renderer ankündigt und Inhalt wiedergibt, der auf einem Client für "Wiedergeben auf" gestreamt wird.

Verwandte Themen

Streamen von Medien auf Geräte mit "Wiedergeben auf"
Beispiele
Beispiel für "Wiedergeben auf"
Beispiel für "PlayToReceiver"
Beispiel für Medienserver

 

 

Anzeigen:
© 2017 Microsoft