HLS를 사용한 비디오 재생 - Amazon Kinesis Video Streams

기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

HLS를 사용한 비디오 재생

HLS를 사용하여 Kinesis video stream를 보려면 먼저 GetHLSStreamingSessionURL을 사용하여 스트리밍 세션을 생성합니다. 이 작업은 HLS 세션에 액세스하기 위한 URL(세션 토큰을 포함)을 반환합니다. 그런 다음 미디어 플레이어 또는 독립 실행형 애플리케이션에서 URL을 사용하여 스트림을 표시할 수 있습니다.

Amazon Kinesis video stream가 HLS를 통해 비디오를 제공하기 위해서는 다음 요구 사항이 있습니다.

  • 데이터 보존이 0보다 커야 합니다.

  • 스트림의 트랙 1에는 V_MPEG/ISO/AVC의 코덱 ID가 있어야 하며 H.264 인코딩된 미디어가 포함되어야 합니다. 오디오 트랙(선택 사항)이 있는 경우, 트랙 번호가 2이어야 하고 A_AAC의 코덱 ID가 있어야 하며 AAC 인코딩된 오디오를 포함해야 합니다.

  • 조각이 H.264 형식( MPEG-4 사양 ISO/IEC 14496-15)용 AVC(Advanced Video Coding)에 코덱 프라이빗 데이터를 포함해야 합니다. 또한 오디오 미디어의 경우(있는 경우), ACC(AAC 사양 ISO/IEC 13818-7)용 코덱 프라이빗 데이터를 포함해야 합니다. 스트림 데이터를 특정 형식에 맞게 조정하는 방법에 대한 자세한 내용은 NAL 적응 플래그 단원을 참조하십시오.

예제: HTML 및 JavaScript에서 HLS 사용

다음 예제는 Kinesis video stream용 HLS 스트리밍 세션을 검색하고 웹 페이지에서 재생하는 방법입니다. 예제에서는 다음 플레이어에서 비디오를 재생하는 방법을 보여줍니다.

HLS 재생을 위한 Kinesis Video Streams 클라이언트 설정

HLS를 사용하여 스트리밍 비디오에 액세스하려면 먼저 Kinesis Video Streams 클라이언트(서비스 엔드포인트를 검색하기 위해) 및 아카이브된 미디어 클라이언트(HLS 스트리밍 세션을 검색하기 위해)를 생성하고 구성합니다. 애플리케이션은 HTML 페이지의 입력 상자에서 필요한 값을 검색합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/aws-sdk/2.278.1/aws-sdk.min.js"></script> ... var protocol = $('#protocol').val(); 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);

HLS 재생을 위해 Kinesis Video Streams 아카이브된 콘텐츠 엔드포인트 검색

클라이언트를 시작한 후 Kinesis Video Streams 아카이브된 콘텐츠 엔드포인트를 검색하여 HLS 스트리밍 세션 URL을 검색합니다.

// Step 2: Get a data endpoint for the stream console.log('Fetching data endpoint'); kinesisVideo.getDataEndpoint({ StreamName: streamName, APIName: "GET_HLS_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);

HLS 스트리밍 세션 URL 검색

아카이브된 콘텐츠 엔드포인트가 있으면 GetHLSStreamingSessionURL API를 호출하여 HLS 스트리밍 세션 URL을 검색합니다.

// Step 3: Get a Streaming Session URL var consoleInfo = 'Fetching ' + protocol + ' Streaming Session URL'; console.log(consoleInfo); ... else { kinesisVideoArchivedContent.getHLSStreamingSessionURL({ StreamName: streamName, PlaybackMode: $('#playbackMode').val(), HLSFragmentSelector: { FragmentSelectorType: $('#fragmentSelectorType').val(), TimestampRange: $('#playbackMode').val() === "LIVE" ? undefined : { StartTimestamp: new Date($('#startTimestamp').val()), EndTimestamp: new Date($('#endTimestamp').val()) } }, ContainerFormat: $('#containerFormat').val(), DiscontinuityMode: $('#discontinuityMode').val(), DisplayFragmentTimestamp: $('#displayFragmentTimestamp').val(), MaxMediaPlaylistFragmentResults: parseInt($('#maxResults').val()), Expires: parseInt($('#expires').val()) }, function(err, response) { if (err) { return console.error(err); } console.log('HLS Streaming Session URL: ' + response.HLSStreamingSessionURL);

HLS 재생을 사용하여 스트리밍 비디오 표시

HLS 스트리밍 세션 URL이 있으면 비디오 플레이어에 제공합니다. 비디오 플레이어에 URL을 제공하는 방법은 사용되는 플레이어에 따라 다릅니다.

다음 코드 예제는 Video.js 플레이어에 스트리밍 세션 URL을 제공하는 방법입니다.

// VideoJS elements <video id="videojs" class="player video-js vjs-default-skin" controls autoplay></video> <link rel="stylesheet" href="https://vjs.zencdn.net/6.6.3/video-js.css"> <script src="https://vjs.zencdn.net/6.6.3/video.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.14.1/videojs-contrib-hls.js"></script> ... else if (playerName === 'VideoJS') { var playerElement = $('#videojs'); playerElement.show(); var player = videojs('videojs'); console.log('Created VideoJS Player'); player.src({ src: response.HLSStreamingSessionURL, type: 'application/x-mpegURL' }); console.log('Set player source'); player.play(); console.log('Starting playback');

다음 코드 예제는 Google Shaka 플레이어에 스트리밍 세션 URL을 제공하는 방법입니다.

// 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> ... else if (playerName === 'Shaka Player') { var playerElement = $('#shaka'); playerElement.show(); var player = new shaka.Player(playerElement[0]); console.log('Created Shaka Player'); player.load(response.HLSStreamingSessionURL).then(function() { console.log('Starting playback'); }); console.log('Set player source');

다음 코드 예제는 hls.js 플레이어에 스트리밍 세션 URL을 제공하는 방법을 보여 줍니다.

// HLS.js elements <video id="hlsjs" class="player" controls autoplay></video> <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> ... var playerName = $('#player').val(); if (playerName == 'HLS.js') { var playerElement = $('#hlsjs'); playerElement.show(); var player = new Hls(); console.log('Created HLS.js Player'); player.loadSource(response.HLSStreamingSessionURL); player.attachMedia(playerElement[0]); console.log('Set player source'); player.on(Hls.Events.MANIFEST_PARSED, function() { video.play(); console.log('Starting playback'); }); }

HLS 문제 해결

비디오 스트림이 올바로 재생되지 않을 경우 HLS 문제 해결 단원을 참조하십시오.

HLS 재생을 위한 완료된 예제

완성된 예제 코드를 다운로드하거나 볼 수 있습니다.