Reprodução de vídeo com MPEG - DASH - Amazon Kinesis Video Streams

As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.

Reprodução de vídeo com MPEG - DASH

Para ver um stream de vídeo do Kinesis usando MPEG -DASH, primeiro você cria uma sessão de streaming usando G etDASHStreaming Session. URL Essa ação retorna um URL (contendo um token de sessão) para acessar a MPEG - DASH sessão. Em seguida, você pode usar o URL em um reprodutor de mídia ou em um aplicativo independente para exibir o stream.

Um stream de vídeo do Amazon Kinesis tem os seguintes requisitos para fornecer vídeo por meio MPEG de -: DASH

Exemplo: Usando MPEG - DASH em HTML e JavaScript

O exemplo a seguir mostra como recuperar uma sessão de DASH streaming de um MPEG stream de vídeo do Kinesis e reproduzi-la em uma página da Web. O exemplo mostra como reproduzir vídeo nos seguintes players:

Configurar o cliente Kinesis Video Streams MPEG para - reprodução DASH

Para acessar o streaming de vídeo com MPEG -DASH, primeiro crie e configure o cliente Kinesis Video Streams (para recuperar o endpoint do serviço) e o cliente de mídia arquivado (para MPEG recuperar a sessão de streaming). DASH O aplicativo recupera os valores necessários das caixas de entrada na HTML página.

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

Recupere o endpoint de conteúdo arquivado do Kinesis Video Streams para - reprodução MPEG DASH

Depois que os clientes forem iniciados, recupere o endpoint de conteúdo arquivado do Kinesis Video Streams para que você possa recuperar MPEG a sessão de streaming da seguinte forma: DASH URL

// 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);

Recupere a sessão MPEG DASH de streaming URL

Quando você tiver o endpoint de conteúdo arquivado, chame a etDASHStreamingsessão G URL API para recuperar a sessão de DASH streaming da MPEG seguinte forma: URL

// 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);

Exibir o streaming de vídeo com MPEG - DASH reprodução

Quando você tiver a MPEG sessão DASH de streamingURL, forneça-a ao player de vídeo. O método para fornecer o URL para o player de vídeo é específico para o player que você usa.

O exemplo de código a seguir mostra como fornecer a sessão de streaming URL a um player do Google Shaka:

// 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'); }

O exemplo de código a seguir mostra como fornecer a sessão de streaming URL a um player dash.js:

<!-- 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'); }

Exemplo concluído

Você pode baixar ou visualizar o código de exemplo completo em GitHub.