Videowiedergabe mit MPEG-DASH

Um einen Kinesis-Videostream mit MPEG-DASH anzusehen, erstellen Sie zunächst eine Streaming-Sitzung mit Get SessionUrl. DASHStreaming Diese Aktion gibt eine URL (mit einem Sitzungs-Token) für den Zugriff auf die MPEG-DASH-Sitzung zurück. Anschließend können Sie die URL in einen Media Player oder einer eigenständigen Anwendung zum Anzeigen des Streams verwenden.

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 unter. Rufen Sie die DASHStreaming SessionURL-Anforderungen ab

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

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

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

Beispiel: Verwendung von MPEG-DASH in HTML und JavaScript

Das folgende Beispiel zeigt, wie eine MPEG-DASH-Streaming-Sitzung für einen Kinesis-Videostream abgerufen und auf einer Webseite wiedergegeben wird. 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 MPEG-DASH-Wiedergabe einrichten

Um mit MPEG-DASH auf Streaming-Video zuzugreifen, erstellen und konfigurieren Sie zunächst den Kinesis Video Streams Streams-Client (um den Service-Endpunkt abzurufen) und den archivierten Media-Client (um die MPEG-DASH-Streaming-Sitzung abzurufen). Die Anwendung ruft die erforderlichen Werte aus 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 MPEG-DASH-Wiedergabe ab

Rufen Sie nach der Initiierung der Clients den Endpunkt für archivierte Inhalte von Kinesis Video Streams ab, sodass Sie die URL der MPEG-DASH-Streaming-Sitzung 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 URL der MPEG-DASH-Streaming-Sitzung ab

Wenn Sie den Endpunkt für archivierte Inhalte haben, rufen Sie die Get DASHStreaming SessionUrl API auf, um die URL der MPEG-DASH-Streaming-Sitzung 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-Sitzungs-URL erhalten haben, stellen Sie sie für den Video-Player bereit. Die Methode, mit der die URL für den Video-Player bereitgestellt wird, ist vom jeweils verwendeten Player abhängig.

Das folgende Codebeispiel veranschaulicht, wie die Streaming-Sitzungs-URL für einen Google Shaka-Player bereitgestellt wird:

// 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 veranschaulicht, wie die Streaming-Sitzungs-URL für einen dash.js-Player 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.