Videowiedergabe mit MPEG - DASH

Um einen Kinesis-Videostream mit MPEG - anzusehenDASH, erstellen Sie zunächst eine Streaming-Sitzung mit G etDASHStreaming Session URL. Diese Aktion gibt ein URL (das ein Sitzungstoken enthält) für den Zugriff auf die MPEG DASH -Sitzung zurück. Sie können das dann URL in einem Media Player oder einer eigenständigen Anwendung verwenden, um den Stream anzuzeigen.

Für einen Amazon Kinesis Kinesis-Videostream gelten die folgenden Anforderungen für die Bereitstellung von Video über MPEG -: DASH

• Informationen zu den Anforderungen für die Wiedergabe von Streaming-Videotracks finden Sie unterAnforderungen an die etDASHStreaming G-Sitzung URL.

• Der Datenerhaltzeitraum muss größer als 0 sein.

• Die Videospur jedes Fragments muss private Codec-Daten im Format Advanced Video Coding (AVC) für das H.264-Format und das HEVC H.265-Format enthalten. Weitere Informationen finden Sie in der MPEG-4-Spezifikation /14496-15 ISO. IEC Informationen zur Anpassung von Stream-Daten an ein bestimmtes Format finden Sie unter NAL Adaptation Flags.

• Die Audiospur (falls vorhanden) jedes Fragments muss private Codec-Daten im AAC Format (AACSpezifikation ISO IEC /13818-7) oder im MS Wave-Format enthalten.

Beispiel: Verwendung von MPEG - in und DASH HTML JavaScript

Das folgende Beispiel zeigt, wie Sie eine MPEG DASH Streaming-Sitzung für einen Kinesis-Videostream abrufen und auf einer Webseite wiedergeben können. Das Beispiel veranschaulicht die Wiedergabe von Videos in den folgenden Playern:

• Google Shaka Player

• dash.js

Den Kinesis Video Streams Streams-Client für die Wiedergabe MPEG einrichten DASH

Um mit MPEG - auf Streaming-Video zuzugreifenDASH, erstellen und konfigurieren Sie zunächst den Kinesis Video Streams Streams-Client (zum Abrufen des Service-Endpunkts) und den archivierten Medienclient (zum Abrufen der MPEG - DASH Streaming-Sitzung). Die Anwendung ruft die erforderlichen Werte aus den Eingabefeldern auf der HTML Seite ab.

var streamName = $('#streamName').val();

// Step 1: Configure SDK Clients
var options = {
    accessKeyId: $('#accessKeyId').val(),
    secretAccessKey: $('#secretAccessKey').val(),
    sessionToken: $('#sessionToken').val() || undefined,
    region: $('#region').val(),
    endpoint: $('#endpoint').val() || undefined
    }
var kinesisVideo = new AWS.KinesisVideo(options);
var kinesisVideoArchivedContent = new AWS.KinesisVideoArchivedMedia(options);

Rufen Sie den Endpunkt für archivierte Inhalte von Kinesis Video Streams für die Wiedergabe MPEG ab DASH

Rufen Sie nach der Initiierung der Clients den Endpunkt für archivierte Inhalte von Kinesis Video Streams ab, sodass Sie die MPEG DASH Streaming-Sitzung URL wie folgt abrufen können:

 // Step 2: Get a data endpoint for the stream
console.log('Fetching data endpoint');
kinesisVideo.getDataEndpoint({
    StreamName: streamName,
    APIName: "GET_DASH_STREAMING_SESSION_URL" 
}, function(err, response) {
    if (err) { return console.error(err); }
    console.log('Data endpoint: ' + response.DataEndpoint);
    kinesisVideoArchivedContent.endpoint = new AWS.Endpoint(response.DataEndpoint);

Rufen Sie die MPEG — DASH Streaming-Sitzung ab URL

Wenn Sie den Endpunkt für archivierte Inhalte haben, rufen Sie die etDASHStreamingG-Sitzung URL API auf, um die MPEG DASH Streaming-Sitzung URL wie folgt abzurufen:

// Step 3: Get a Streaming Session URL
var consoleInfo = 'Fetching ' + protocol + ' Streaming Session URL';
console.log(consoleInfo);

if (protocol === 'DASH') {
    kinesisVideoArchivedContent.getDASHStreamingSessionURL({
        StreamName: streamName,
        PlaybackMode: $('#playbackMode').val(),
        DASHFragmentSelector: {
            FragmentSelectorType: $('#fragmentSelectorType').val(),
            TimestampRange: $('#playbackMode').val() === "LIVE" ? undefined : {
                StartTimestamp: new Date($('#startTimestamp').val()),
                EndTimestamp: new Date($('#endTimestamp').val())
            }
        },
        DisplayFragmentTimestamp: $('#displayFragmentTimestamp').val(),
        DisplayFragmentNumber: $('#displayFragmentNumber').val(),
        MaxManifestFragmentResults: parseInt($('#maxResults').val()),
        Expires: parseInt($('#expires').val())
    }, function(err, response) {
        if (err) { return console.error(err); }
        console.log('DASH Streaming Session URL: ' + response.DASHStreamingSessionURL);
                

Zeigen Sie das Streaming-Video mit MPEG — DASH Wiedergabe an

Wenn Sie die MPEG DASH Streaming-Sitzung habenURL, stellen Sie sie dem Videoplayer zur Verfügung. Die Methode zur Bereitstellung für den URL Videoplayer ist spezifisch für den von Ihnen verwendeten Player.

Das folgende Codebeispiel zeigt, wie Sie die Streaming-Sitzung URL für einen Google Shaka-Player bereitstellen:

// Step 4: Give the URL to the video player.

//Shaka Player elements 
<video id="shaka" class="player" controls autoplay></video>
<script src="https://cdnjs.cloudflare.com/ajax/libs/shaka-player/2.4.1/shaka-player.compiled.js">
</script>
...

var playerName = $('#player').val();

if (playerName === 'Shaka Player') {
    var playerElement = $('#shaka');
    playerElement.show();

    var player = new shaka.Player(playerElement[0]);
    console.log('Created Shaka Player');

    player.load(response.DASHStreamingSessionURL).then(function() {
        console.log('Starting playback');
    });
    console.log('Set player source');
}

Das folgende Codebeispiel zeigt, wie die Streaming-Sitzung für einen Player URL mit der Datei dash.js bereitgestellt wird:

<!-- dash.js Player elements -->
<video id="dashjs" class="player" controls autoplay=""></video>
<script src="https://cdn.dashjs.org/latest/dash.all.min.js"></script>

...

var playerElement = $('#dashjs');
playerElement.show();

var player = dashjs.MediaPlayer().create();
console.log('Created DASH.js Player');

player.initialize(document.querySelector('#dashjs'), response.DASHStreamingSessionURL, true);
console.log('Starting playback');
console.log('Set player source');
}

Abgeschlossenes Beispiel

Sie können den fertigen Beispielcode unter herunterladen oder ansehen GitHub.