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

# MPEG-DASH를 사용한 비디오 재생
<a name="dash-playback"></a>

MPEG-DASH를 사용하여 Kinesis 비디오 스트림을 보려면 먼저 [GetDASHStreamingSessionURL](https://docs.aws.amazon.com/kinesisvideostreams/latest/dg/API_reader_GetDASHStreamingSessionURL.html)을 사용하여 스트리밍 세션을 생성합니다. 이 작업은 MPEG-DASH 세션에 액세스하기 위한 URL(세션 토큰을 포함)을 반환합니다. 그런 다음 미디어 플레이어 또는 독립 실행형 애플리케이션에서 URL을 사용하여 스트림을 표시할 수 있습니다.

Amazon Kinesis 비디오 스트림에는 MPEG-DASH를 통해 비디오를 제공하기 위한 다음과 같은 요구 사항이 있습니다.
+ 스트리밍 비디오 재생 트랙 요구 사항은 섹션을 참조하세요[GetDASHStreamingSessionURL 요구 사항](video-playback-requirements.md#requirements-getdash).
+ 데이터 보존이 0보다 커야 합니다.
+ 각 조각의 비디오 추적에는 H.264용 AVC(Advanced Video Coding) 형식 및 H.265용 HEVC 형식의 코덱 프라이빗 데이터가 포함되어야 합니다. 자세한 내용은 [MPEG-4 사양 ISO/IEC 14496-15](https://www.iso.org/standard/55980.html)를 참조하십시오. 스트림 데이터를 지정된 형식에 맞게 조정하는 방법에 대한 자세한 내용은 [NAL 적응 플래그](https://docs.aws.amazon.com/kinesisvideostreams/latest/dg/producer-reference-nal.html)를 참조하십시오.
+ 각 조각의 오디오 조각에는 AAC 형식([AAC 사양 ISO/IEC 13818-7](https://www.iso.org/standard/43345.html)) 또는 [MS Wave 형식](https://www-mmsp.ece.mcgill.ca/Documents/AudioFormats/WAVE/WAVE.html)의 코덱 프라이빗 데이터가 포함되어야 합니다.

## 예제: HTML 및 JavaScript로 MPEG-DASH 사용
<a name="dash-examp1e"></a>

다음 예제에서는 Kinesis 비디오 스트림에 대한 MPEG-DASH 스트리밍 세션을 검색하고 웹 페이지에서 재생하는 방법을 보여줍니다. 예제에서는 다음 플레이어에서 비디오를 재생하는 방법을 보여줍니다.
+ [Google Shaka Player](https://github.com/google/shaka-player)
+ [dash.js](https://github.com/Dash-Industry-Forum/dash.js/wiki)

**Topics**
+ [MPEG-DASH 재생을 위한 Kinesis Video Streams 클라이언트 설정](#dash-example-setup)
+ [MPEG-DASH 재생을 위한 Kinesis Video Streams 아카이브된 콘텐츠 엔드포인트 검색](#dash-example-endpoint)
+ [MPEG-DASH 스트리밍 세션 URL 검색](#dash-example-session)
+ [MPEG-DASH 재생으로 스트리밍 비디오 표시](#dash-example-display)
+ [완료된 예제](#dash-example-complete)

### MPEG-DASH 재생을 위한 Kinesis Video Streams 클라이언트 설정
<a name="dash-example-setup"></a>

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

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

### MPEG-DASH 재생을 위한 Kinesis Video Streams 아카이브된 콘텐츠 엔드포인트 검색
<a name="dash-example-endpoint"></a>

클라이언트가 시작된 후 다음과 같이 MPEG-DASH 스트리밍 세션 URL을 검색할 수 있도록 Kinesis Video Streams 아카이브된 콘텐츠 엔드포인트를 검색합니다.

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

### MPEG-DASH 스트리밍 세션 URL 검색
<a name="dash-example-session"></a>

아카이브된 콘텐츠 엔드포인트가 있으면 다음과 같이 [GetDASHStreamingSessionURL](https://docs.aws.amazon.com/kinesisvideostreams/latest/dg/API_reader_GetDASHStreamingSessionURL.html) API를 호출하여 MPEG-DASH 스트리밍 세션 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);
```

### MPEG-DASH 재생으로 스트리밍 비디오 표시
<a name="dash-example-display"></a>

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

다음 코드 예제는 [Google Shaka](https://github.com/google/shaka-player) 플레이어에 스트리밍 세션 URL을 제공하는 방법입니다.

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

다음 코드 예제는 [dash.js](https://github.com/Dash-Industry-Forum/dash.js/wiki) 플레이어에 스트리밍 세션 URL을 제공하는 방법을 보여 줍니다.

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

### 완료된 예제
<a name="dash-example-complete"></a>

GitHub에서 [완성된 예제 코드를 다운로드하거나 볼 수](https://github.com/aws-samples/amazon-kinesis-video-streams-hls-viewer/blob/master/index.html) 있습니다.