本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。 # Kinesis Video Streams 播放 您可以使用下列方法檢視 Kinesis 影片串流： + **GetMedia** – 您可以使用 `GetMedia` API 建置自己的應用程式來處理 Kinesis Video Streams。 `GetMedia` 是一種低延遲的即時 API。若要建立使用 的玩家`GetMedia`，您必須自行建置。如需有關如何使用 開發顯示 Kinesis 影片串流的應用程式的資訊`GetMedia`，請參閱 [使用剖析器程式庫進行串流](parser-library.md)。 + **HLS** – [HTTP 即時串流 (HLS)](https://en.wikipedia.org/wiki/HTTP_Live_Streaming) 是業界標準的 HTTP 型媒體串流通訊協定。您可以使用 HLS 來檢視 Kinesis 影片串流，無論是即時播放或檢視封存的影片。 您可以使用 HLS 進行即時播放。延遲通常介於 3 到 5 秒之間，但也可能介於 1 到 10 秒之間，視使用案例、播放器和網路條件而定。您可使用第三方播放器 (例如 [Video.js](https://github.com/videojs/video.js/) 或 [Google Shaka Player](https://github.com/google/shaka-player)) 以透過提供 HLS 串流工作階段 URL、編寫程式或手動來顯示影片串流。您也可以在 [Apple Safari](https://www.apple.com/safari/) 或 [Microsoft Edge](https://www.microsoft.com/en-us/edge) 瀏覽器**的位置**列中輸入 HLS 串流工作階段 URL 來播放影片。 + **MPEG-DASH** – [透過 HTTP 動態自適應串流 (DASH)](https://en.wikipedia.org/wiki/Dynamic_Adaptive_Streaming_over_HTTP)，也稱為 MPEG-DASH，是一種自適應位元速率串流通訊協定，可透過傳統 HTTP Web 伺服器透過網際網路交付的高品質媒體內容串流。 您可以使用 MPEG-DASH 進行即時播放。延遲通常介於 3 到 5 秒之間，但也可能介於 1 到 10 秒之間，視使用案例、播放器和網路條件而定。您可以使用第三方播放器 （例如 [dash.js](https://github.com/Dash-Industry-Forum/dash.js/wiki) 或 [Google Shaka Player](https://github.com/google/shaka-player))，以程式設計或手動方式提供 MPEG-DASH 串流工作階段 URL 來顯示視訊串流。 + **GetClip** – 您可以使用 `GetClip` API 在指定的時間範圍內，從指定的影片串流下載包含封存隨需媒體的剪輯 (MP4 檔案）。如需詳細資訊，請參閱 [GetClip](https://docs.aws.amazon.com//kinesisvideostreams/latest/dg/API_reader_GetClip.html) API 參考。 **Topics** + [影片播放軌跡需求](video-playback-requirements.md) + [使用 HLS 播放影片](hls-playback.md) + [使用 MPEG-DASH 播放影片](dash-playback.md) # 影片播放軌跡需求 Amazon Kinesis Video Streams 支援以多種格式編碼的媒體。如果您的 Kinesis 影片串流使用下列四個 APIs 之一不支援的格式，請使用 [https://docs.aws.amazon.com//kinesisvideostreams/latest/dg/API_dataplane_GetMedia.html](https://docs.aws.amazon.com//kinesisvideostreams/latest/dg/API_dataplane_GetMedia.html)或 [https://docs.aws.amazon.com//kinesisvideostreams/latest/dg/API_reader_GetMediaForFragmentList.html](https://docs.aws.amazon.com//kinesisvideostreams/latest/dg/API_reader_GetMediaForFragmentList.html)，因為它們沒有軌跡類型限制。 **Topics** + [GetClip 需求](#requirements-getclip) + [GetDASHStreamingSessionURL 要求](#requirements-getdash) + [GetHLSStreamingSessionURL 要求](#requirements-gethls) + [GetImages 需求](#requirements-getimages) ## GetClip 需求 如需這種 API 的詳細資訊，請參閱 [https://docs.aws.amazon.com//kinesisvideostreams/latest/dg/API_reader_GetClip.html](https://docs.aws.amazon.com//kinesisvideostreams/latest/dg/API_reader_GetClip.html)。 | 軌道 1 描述 | 軌道 1 轉碼器 ID | 軌道 2 描述 | 軌道 2 轉碼器 ID | | --- | --- | --- | --- | | H.264 影片 | V\$1MPEG4/ISO/AVC | N/A | N/A | | H.264 影片 | V\$1MPEG4/ISO/AVC | AAC 音訊 | A\$1AAC | | H.264 影片 | V\$1MPEG4/ISO/AVC | G.711 音訊 （僅限 A-Law) | A\$1MS/ACM | | H.265 影片 | V\$1MPEGH/ISO/HEVC | N/A | N/A | | H.265 影片 | V\$1MPEGH/ISO/HEVC | AAC 音訊 | A\$1AAC | **重要** 每個片段中包含的轉碼器私有資料 (CPD) 包含轉碼器特定的初始化資訊，例如影格率、解析度和編碼描述檔，這些是正確解碼片段所需的資訊。結果剪輯的目標片段之間不支援 CPD 變更。CPD 必須透過查詢的媒體保持一致，否則將會傳回錯誤。 **重要** 不支援追蹤變更。追蹤在整個查詢媒體中必須保持一致。如果串流中的片段從只有視訊變更為同時擁有音訊和視訊，或者 AAC 音軌變更為 A-Law 音軌，則會傳回錯誤。 ## GetDASHStreamingSessionURL 要求 如需這種 API 的詳細資訊，請參閱 [https://docs.aws.amazon.com//kinesisvideostreams/latest/dg/API_reader_GetDASHStreamingSessionURL.html](https://docs.aws.amazon.com//kinesisvideostreams/latest/dg/API_reader_GetDASHStreamingSessionURL.html)。 | 軌道 1 描述 | 軌道 1 轉碼器 ID | 軌道 2 描述 | 軌道 2 轉碼器 ID | | --- | --- | --- | --- | | H.264 影片 | V\$1MPEG4/ISO/AVC | N/A | N/A | | H.264 影片 | V\$1MPEG4/ISO/AVC | AAC 音訊 | A\$1AAC | | H.264 影片 | V\$1MPEG4/ISO/AVC | G.711 音訊 （僅限 A-Law) | A\$1MS/ACM | | H.264 影片 | V\$1MPEG4/ISO/AVC | G.711 音訊 （僅限 U-Law) | A\$1MS/ACM | | AAC 音訊 | A\$1AAC | N/A | N/A | | H.265 影片 | V\$1MPEGH/ISO/HEVC | N/A | N/A | | H.265 影片 | V\$1MPEGH/ISO/HEVC | AAC 音訊 | A\$1AAC | **重要** 每個片段中包含的轉碼器私有資料 (CPD) 包含轉碼器特定的初始化資訊，例如影格率、解析度和編碼描述檔，這些是正確解碼片段所需的資訊。串流工作階段期間不支援 CPD 變更。CPD 必須透過查詢的媒體保持一致。 **重要** 不支援追蹤變更。追蹤在整個查詢媒體中必須保持一致。如果串流中的片段從只有視訊變更為同時擁有音訊和視訊，或者 AAC 音軌變更為 A-Law 音軌，則串流將會失敗。 ## GetHLSStreamingSessionURL 要求 如需這種 API 的詳細資訊，請參閱 [https://docs.aws.amazon.com//kinesisvideostreams/latest/dg/API_reader_GetHLSStreamingSessionURL.html](https://docs.aws.amazon.com//kinesisvideostreams/latest/dg/API_reader_GetHLSStreamingSessionURL.html)。 **HLS Mp4** | 軌道 1 描述 | 軌道 1 轉碼器 ID | 軌道 2 描述 | 軌道 2 轉碼器 ID | | --- | --- | --- | --- | | H.264 影片 | V\$1MPEG4/ISO/AVC | N/A | N/A | | H.264 影片 | V\$1MPEG4/ISO/AVC | AAC 音訊 | A\$1AAC | | AAC 音訊 | A\$1AAC | N/A | N/A | | H.265 影片 | V\$1MPEGH/ISO/HEVC | N/A | N/A | | H.265 影片 | V\$1MPEGH/ISO/HEVC | AAC 音訊 | A\$1AAC | **HLS TS** | 軌道 1 描述 | 軌道 1 轉碼器 ID | 軌道 2 描述 | 軌道 2 轉碼器 ID | | --- | --- | --- | --- | | H.264 影片 | V\$1MPEG4/ISO/AVC | N/A | N/A | | H.264 影片 | V\$1MPEG4/ISO/AVC | AAC 音訊 | A\$1AAC | | AAC 音訊 | A\$1AAC | N/A | N/A | **注意** 每個片段中包含的轉碼器私有資料 (CPD) 包含轉碼器特定的初始化資訊，例如影格率、解析度和編碼描述檔，這些是正確解碼片段所需的資訊。對於 TS 和 MP4，串流工作階段期間支援 CPD 變更。因此，工作階段中的片段在 CPD 中可以有不同的資訊，而不會中斷播放。對於每個串流工作階段，僅允許 500 個 CPD 變更。 **重要** 不支援追蹤變更。追蹤在整個查詢媒體中必須保持一致。如果串流中的片段從只有視訊變更為同時擁有音訊和視訊，或者 AAC 音軌變更為 A-Law 音軌，則串流將會失敗。 ## GetImages 需求 如需這種 API 的詳細資訊，請參閱 [https://docs.aws.amazon.com//kinesisvideostreams/latest/dg/API_reader_GetImages.html](https://docs.aws.amazon.com//kinesisvideostreams/latest/dg/API_reader_GetImages.html)。 **注意** `GetImages` 媒體應該包含軌道 1 中的視訊軌。 # 使用 HLS 播放影片 [HTTP 即時串流 (HLS)](https://en.wikipedia.org/wiki/HTTP_Live_Streaming) 是業界標準的 HTTP 型媒體串流通訊協定。您可以使用 HLS 來檢視 Kinesis 影片串流，無論是即時播放或檢視封存的影片。 您可以使用 HLS 進行即時播放。延遲通常介於 3 到 5 秒之間，但也可能介於 1 到 10 秒之間，取決於使用案例、播放器和網路條件。您可使用第三方播放器 (例如 [Video.js](https://github.com/videojs/video.js/) 或 [Google Shaka Player](https://github.com/google/shaka-player)) 以透過提供 HLS 串流工作階段 URL、編寫程式或手動來顯示影片串流。您也可以在 [Apple Safari](https://www.apple.com/safari/) 或 [Microsoft Edge](https://www.microsoft.com/en-us/edge) 瀏覽器的位置列中輸入 HLS 串流工作階段 URL 來播放影片。 若要使用 HLS 檢視 Kinesis 影片串流，請先使用 [GetHLSStreamingSessionURL](https://docs.aws.amazon.com/kinesisvideostreams/latest/dg/API_reader_GetHLSStreamingSessionURL.html) 建立串流工作階段。這個動作會傳回一個 URL (包含工作階段字符) 以存取 HLS 工作階段。然後您可以使用媒體播放器的 URL 或獨立應用程式來顯示串流。 **重要** 並非所有傳送到 Kinesis Video Streams 的媒體都可以透過 HLS 播放。如需特定上傳需求[GetHLSStreamingSessionURL](API_reader_GetHLSStreamingSessionURL.md)，請參閱 。 **Topics** + [使用 AWS CLI 擷取 HLS 串流工作階段 URL](#retrieve-hls-url) + [範例：在 HTML 和 JavaScript 中使用 HLS](#how-hls-ex1) + [故障診斷 HLS 問題](#how-hls-ex1-ts) ## 使用 AWS CLI 擷取 HLS 串流工作階段 URL 下列程序示範如何使用 AWS CLI 來產生 Kinesis 影片串流的 HLS 串流工作階段 URL。 如需安裝說明，請參閱[AWS Command Line Interface 《 使用者指南》](https://docs.aws.amazon.com//cli/latest/userguide/getting-started-install.html#getting-started-install-instructions)。安裝後，使用登入資料和區域[設定 AWS CLI](https://docs.aws.amazon.com//cli/latest/userguide/getting-started-quickstart.html#getting-started-quickstart-new)。 或者，開啟 AWS CLI 已安裝並設定 的 AWS CloudShell 終端機。如需詳細資訊，請參閱 [AWS CloudShell 使用者指南](https://docs.aws.amazon.com//cloudshell/latest/userguide/welcome.html#how-to-get-started)。 **擷取 Kinesis 影片串流的 HLS URL 端點。** 1. 在終端機中輸入以下內容： ``` aws kinesisvideo get-data-endpoint \ --api-name GET_HLS_STREAMING_SESSION_URL \ --stream-name YourStreamName ``` 您會收到如下所示的回應： ``` { "DataEndpoint": "https://b-1234abcd.kinesisvideo.aws-region.amazonaws.com" } ``` 1. 向傳回的端點提出 HLS 串流工作階段 URL 請求。 ------ #### [ Live ] 針對即時播放，HLS 媒體播放清單會持續更新為可用的最新媒體。當您在媒體播放器中播放此類型的工作階段時，使用者介面通常會顯示「**即時**」通知，沒有用於選擇要顯示之播放視窗中的位置的清理器控制。 執行此命令時，請務必將媒體上傳至此串流。 ``` aws kinesis-video-archived-media get-hls-streaming-session-url \ --endpoint-url https://b-1234abcd.kinesisvideo.aws-region.amazonaws.com \ --stream-name YourStreamName \ --playback-mode LIVE ``` ------ #### [ Live replay ] 對於即時重播，播放會從指定的開始時間開始。HLS 媒體播放清單也會隨著最新的媒體可用而持續更新。工作階段將繼續包含新擷取的媒體，直到工作階段過期，或直到指定的結束時間，以先到者為準。此模式有助於在偵測到事件時開始播放，並繼續在工作階段建立時尚未擷取的即時串流媒體。 決定開始時間戳記。 在此範例中，我們使用秒格式的 **Unix Epoch 時間**。如需[時間戳記](https://docs.aws.amazon.com//cli/latest/userguide/cli-usage-parameters-types.html#parameter-type-timestamp)格式的詳細資訊，請參閱 AWS Command Line Interface 《 使用者指南》中的時間戳記一節。 如需轉換工具，請參閱 [UnixTime.org](https://unixtime.org/) + **1708471800** 等於 **2024 年 2 月 20 日下午 3：30：00 GMT-08：00** 在此範例中，我們不會指定結束時間戳記，這表示工作階段將繼續包含新擷取的媒體，直到工作階段過期為止。 使用`LIVE_REPLAY`播放模式和指定的 [HLS Fragment Selector](https://docs.aws.amazon.com//kinesisvideostreams/latest/dg/API_reader_GetHLSStreamingSessionURL.html#KinesisVideo-reader_GetHLSStreamingSessionURL-request-HLSFragmentSelector) 叫用 `GetHLSStreamingSessionURL` API。 ``` aws kinesis-video-archived-media get-hls-streaming-session-url \ --endpoint-url https://b-1234abcd.kinesisvideo.aws-region.amazonaws.com \ --stream-name YourStreamName \ --playback-mode LIVE_REPLAY \ --hls-fragment-selector \ "FragmentSelectorType=SERVER_TIMESTAMP,TimestampRange={StartTimestamp=1708471800}" ``` ------ #### [ On-demand ] 對於隨需播放，HLS 媒體播放清單包含 HLS 片段選取器指定的媒體。在媒體播放器中播放此類型的工作階段時，使用者介面通常會顯示清除器控制項，以選擇要顯示之播放視窗中的位置。 若要為串流的特定區段建立 URL，請先判斷開始和結束時間戳記。 在此範例中，我們使用秒格式的 **Unix Epoch 時間**。如需[時間戳記](https://docs.aws.amazon.com//cli/latest/userguide/cli-usage-parameters-types.html#parameter-type-timestamp)格式的詳細資訊，請參閱 AWS Command Line Interface 《 使用者指南》中的時間戳記一節。 如需轉換工具，請參閱 [UnixTime.org](https://unixtime.org/) + **1708471800** 等於 **2024 年 2 月 20 日下午 3：30：00 GMT-08：00** + **1708471860** 等於 **2024 年 2 月 20 日下午 3：31：00 GMT-08：00** 使用`ON_DEMAND`播放模式和指定的 [HLS Fragment Selector](https://docs.aws.amazon.com//kinesisvideostreams/latest/dg/API_reader_GetHLSStreamingSessionURL.html#KinesisVideo-reader_GetHLSStreamingSessionURL-request-HLSFragmentSelector) 叫用 `GetHLSStreamingSessionURL` API。 ``` aws kinesis-video-archived-media get-hls-streaming-session-url \ --endpoint-url https://b-1234abcd.kinesisvideo.aws-region.amazonaws.com \ --stream-name YourStreamName \ --playback-mode ON_DEMAND \ --hls-fragment-selector \ "FragmentSelectorType=SERVER_TIMESTAMP,TimestampRange={StartTimestamp=1708471800,EndTimestamp=1708471860}" ``` **注意** 時間戳記必須在彼此的 24 小時內，如 [HLSTimestampRange](API_reader_HLSTimestampRange.md) 文件所述。 ------ 您會收到如下所示的回應： ``` { "HLSStreamingSessionURL": "https://b-1234abcd.kinesisvideo.aws-region.amazonaws.com/hls/v1/getHLSMasterPlaylist.m3u8?SessionToken=CiAz...DkRE6M~" } ``` **重要** 不要在未經授權的實體可以存取它的地方共用或存放此字符。權杖可讓您存取串流的內容。使用與 AWS 登入資料相同的量值來保護字符。 您可以使用此 URL 和任何 HLS 播放器來檢視 HLS 串流。 例如，使用 VLC 媒體播放器。 您也可以在 Apple Safari 或 Microsoft Edge 瀏覽器的位置列中輸入 HLS 串流工作階段 URL，以播放 HLS 串流。 ## 範例：在 HTML 和 JavaScript 中使用 HLS 下列範例示範如何使用適用於 JavaScript 的 AWS SDK v2 擷取 Kinesis 影片串流的 HLS 串流工作階段，並在網頁中播放。本範例說明如何在下列播放器播放影片： + [Video.js](https://github.com/videojs/video.js/) + [Google Shaka Player](https://github.com/google/shaka-player) + [hls.js](https://github.com/video-dev/hls.js/) 在 GitHub 中檢視[完整的範例程式碼](https://github.com/aws-samples/amazon-kinesis-video-streams-media-viewer)和[託管網頁](https://aws-samples.github.io/amazon-kinesis-video-streams-media-viewer/)。此靜態網頁可簡化測試和實驗來自 Amazon Kinesis 影片串流的 HLS 和 MPEG-DASH 輸出。範例頁面提供下列參數的輸入欄位： + AWS 區域：Kinesis 影片串流所在的區域 + 串流名稱：Kinesis 影片串流的名稱 + 播放模式：HLS 播放模式 (LIVE、LIVE\$1REPLAY 或 ON\$1DEMAND) + 片段選取器類型：用於選取片段的方法 (SERVER\$1TIMESTAMP 或 PRODUCER\$1TIMESTAMP) + 片段編號：開始片段編號 （如適用） + 容器格式：媒體容器的格式 (FRAGMENTED\$1MP4 或 MPEG\$1TS) 應用程式會從 HTML 頁面上的輸入方塊中擷取這些值，並使用它們來建構頁面上顯示的 HLS 串流工作階段請求。 **Topics** + [匯入適用於瀏覽器 AWS 的 JavaScript 開發套件](#how-hls-ex1-import) + [設定 Kinesis Video Streams 用戶端](#how-hls-ex1-setup) + [擷取 HLS 播放的端點](#how-hls-ex1-endpoint) + [設定 Kinesis Video Streams 封存媒體用戶端](#how-hls-ex1-session) + [擷取 HLS 串流工作階段 URL](#how-hls-ex1-retrieve-url) + [在網頁上顯示 HLS 串流](#how-hls-ex1-display) ### 匯入適用於瀏覽器 AWS 的 JavaScript 開發套件 在 網頁中，包含下列指令碼標籤，將適用於 JavaScript 的 AWS SDK v2 匯入專案。 ``` ``` 如需詳細資訊，請參閱適用於 [AWS JavaScript 的 SDK](https://docs.aws.amazon.com//sdk-for-javascript/v2/developer-guide/loading-the-jssdk.html) 文件。 ### 設定 Kinesis Video Streams 用戶端 若要使用 HLS 存取串流影片，請先建立和設定 Kinesis Video Streams 用戶端。如需其他身分驗證方法，請參閱在 [Web 瀏覽器中設定登入](https://docs.aws.amazon.com//sdk-for-javascript/v2/developer-guide/setting-credentials-browser.html)資料。 ``` const clientConfig = { accessKeyId: 'YourAccessKey', secretAccessKey: 'YourSecretKey', region: 'us-west-2' }; const kinesisVideoClient = new AWS.KinesisVideo(clientConfig); ``` 該應用程式會在 HTML 頁面的輸入方塊擷取必要的值。 ### 擷取 HLS 播放的端點 使用 Kinesis Video Streams 用戶端來叫用 [GetDataEndpoint](API_GetDataEndpoint.md) API 來擷取端點。 ``` const getDataEndpointOptions = { StreamName: 'YourStreamName', APIName: 'GET_HLS_STREAMING_SESSION_URL' }; const getDataEndpointResponse = await kinesisVideoClient .getDataEndpoint(getDataEndpointOptions) .promise(); const hlsDataEndpoint = getDataEndpointResponse.DataEndpoint; ``` 此程式碼會將端點存放在 `hlsDataEndpoint`變數中。 ### 設定 Kinesis Video Streams 封存媒體用戶端 在 Kinesis Video Streams 封存媒體用戶端的用戶端組態中，指定您在上一個步驟中取得的端點。 ``` const archivedMediaClientConfig = { accessKeyId: 'YourAccessKey', secretAccessKey: 'YourSecretKey', region: 'us-west-2', endpoint: hlsDataEndpoint }; const kinesisVideoArchivedMediaClient = new AWS.KinesisVideoArchivedMedia(archivedMediaClientConfig); ``` ### 擷取 HLS 串流工作階段 URL 使用 Kinesis Video Streams 封存媒體用戶端來叫用 [GetHLSStreamingSessionURL](API_reader_GetHLSStreamingSessionURL.md) API 以擷取 HLS 播放 URL。 ``` const getHLSStreamingSessionURLOptions = { StreamName: 'YourStreamName', PlaybackMode: 'LIVE' }; const getHLSStreamingSessionURLResponse = await kinesisVideoArchivedMediaClient .getHLSStreamingSessionURL(getHLSStreamingSessionURLOptions) .promise(); const hlsUrl = getHLSStreamingSessionURLResponse.HLSStreamingSessionURL; ``` ### 在網頁上顯示 HLS 串流 當您擁有 HLS 串流工作階段的 URL 時，請將其提供給影片播放器。將 URL 提供給影片播放器的方法，因影片播放器種類而異。 ------ #### [ Video.js ] 執行下列動作，將 [Video.js](https://github.com/videojs/video.js/) 及其 CSS 類別匯入至我們的瀏覽器指令碼： ``` ``` 建立 `video` HTML 元素以顯示影片： ``` ``` 將 HLS URL 設定為 HTML 影片元素來源： ``` const playerElement = document.getElementById('videojs'); const player = videojs(playerElement); player.src({ src: hlsUrl, type: 'application/x-mpegURL' }); player.play(); ``` ------ #### [ Shaka ] 執行下列動作，將 [Google Shaka 播放器](https://github.com/shaka-project/shaka-player)匯入我們的瀏覽器指令碼： ``` ``` 建立 `video` HTML 元素以顯示影片： ``` ``` 建立指定影片元素的 Shaka 播放器並呼叫載入方法： ``` const playerElement = document.getElementById('shaka'); const player = new shaka.Player(playerElement); player.load(hlsUrl); ``` ------ #### [ hls.js ] 執行下列動作，將 [hls.js](https://github.com/video-dev/hls.js/) 匯入至我們的瀏覽器指令碼： ``` ``` 建立 `video` HTML 元素以顯示影片： ``` ``` 建立 hls.js 播放器，為其提供 HLS URL，並指示其播放： ``` const playerElement = document.getElementById('hlsjs'); const player = new Hls(); player.loadSource(hlsUrl); player.attachMedia(playerElement); player.on(Hls.Events.MANIFEST_PARSED, function() { video.play(); }); ``` ------ ## 故障診斷 HLS 問題 本節說明將 HTTP 即時串流 (HLS) 與 Kinesis Video Streams 搭配使用時可能遇到的問題。 **Topics** + [擷取 HLS 串流工作階段 URL 成功，但在影片播放器播放時失敗](#troubleshooting-hls-playback) + [製作者和播放器間的延遲太高](#troubleshooting-hls-latency) ### 擷取 HLS 串流工作階段 URL 成功，但在影片播放器播放時失敗 這種情況發生於當 HLS 串流工作階段 URL 可透過 `GetHLSStreamingSessionURL` 成功擷取，但是影片播放器卻無法透過提供的 URL 成功播放時。 若要排除這種情況，請嘗試： + 判斷影片串流是否在 Kinesis Video Streams 主控台播放。請考慮主控台顯示的任何錯誤。 + 如果片段持續時間少於一秒，請將其增加到一秒。如果片段持續時間太短，服務可能會調節播放器，因為它對影片片段的請求太頻繁。 + 請確認每個 HLS 串流工作階段 URL 僅由一個播放器使用。如果超過一個播放器正在使用單一 HLS 串流工作階段 URL，服務可能會因為收到太多請求而對這些播放器進行調節。 + 確認您的播放器支援您為 HLS 串流工作階段指定的所有選項。為以下參數嘗試不同的組合值： + `ContainerFormat` + `PlaybackMode` + `FragmentSelectorType` + `DiscontinuityMode` + `MaxMediaPlaylistFragmentResults` 有些媒體播放程式 (如 HTML5 和行動播放程式) 通常只支援具有 fMP4 容器格式的 HLS。其他媒體播放器 （例如 Flash 和自訂播放器） 可能僅支援具有 MPEG TS 容器格式的 HLS。建議您試用 `ContainerFormat` 參數，以開始故障診斷。 + 確認每個片段都有一致的軌道數量。確認串流中的片段在同時擁有音訊和視訊音軌，以及只有視訊音軌之間沒有變更。同時確認編碼器設定 （解析度和影格率） 在每個軌道中的片段之間沒有變更。 ### 製作者和播放器間的延遲太高 當視訊擷取時間與影片播放器播放的時間延遲太高時，便會發生此狀況。 系統會以每個片段的方式透過 HLS 播放影片。因此，延遲不得少於片段持續時間。延遲也包含緩衝和傳輸資料所需的時間。如果您的解決方案需要少於一秒的延遲，請考慮使用 `GetMedia` API。 您可以調整以下參數來降低整體延遲，但調整這些參數也可能降低影片品質或增加重新緩衝的時間。 + **片段持續時間** – 片段持續時間是由影片編碼器產生之關鍵影格頻率所控制串流中分割之間的影片量。建議的值為一秒。擁有較短片段持續時間，代表在傳輸影片資料至服務之前所等待的片段完成時間較少。較短的片段也能讓服務處理得更快速。不過，如果片段持續時間過短，播放器因內容播畢而停止並緩衝內容的可能性也會提升。如果片段持續時間少於 500 毫秒，則製作者可能建立了太多請求以致服務開始對其進行調節。 + **位元速率**：位元速率較低的影片串流讀取、寫入和傳輸所需的時間較少。不過，較低位元速率的影片串流通常會有較差的影片品質。 + **媒體播放清單中的片段計數** – 對延遲敏感的播放器應該只載入媒體播放清單中的最新片段。大多數玩家是從最早的片段開始。透過減少播放清單中的片段數量，您可以減少先前片段和新片段之間的時間間隔。如果延遲將新片段新增至播放清單，或延遲玩家取得更新的播放清單，則播放期間可以略過片段。建議使用 3-5 個片段，並使用設定為僅從播放清單中載入最新片段的玩家。 + **播放器緩衝大小** – 大多數影片播放器具有可設定的最短緩衝持續時間，通常預設為 10 秒。如需將延遲降到最低，您可以將此值設為 0 秒。不過，這樣做表示如果有任何延遲產生片段，則玩家會重新緩衝，因為玩家將沒有吸收延遲的緩衝區。 + **播放器「追上」** – 如果緩衝區填滿，影片播放器通常不會自動擷取播放到影片緩衝區的正面，例如延遲片段導致片段的待處理項目播放時。自訂播放器可以透過刪除影格或提高播放速度 (例如提高至 1.1 倍速) 趕上緩衝之前來避免這點。此操作會造成播放不穩定，或在播放器追上進度時加快播放速度，而若緩衝大小保持過短時，重新緩衝可能更為頻繁。 # 使用 MPEG-DASH 播放影片 若要使用 MPEG-DASH 檢視 Kinesis 影片串流，請先使用 [GetDASHStreamingSessionURL](https://docs.aws.amazon.com/kinesisvideostreams/latest/dg/API_reader_GetDASHStreamingSessionURL.html) 建立串流工作階段。這個動作會傳回一個 URL (包含工作階段字符) 以存取 MPEG-DASH 工作階段。然後您可以使用媒體播放器的 URL 或獨立應用程式來顯示串流。 Amazon Kinesis 影片串流對於透過 MPEG-DASH 提供影片有下列需求： + 如需串流影片播放軌跡需求，請參閱 [GetDASHStreamingSessionURL 要求](video-playback-requirements.md#requirements-getdash)。 + 資料保留必須大於 0。 + 每個片段的影片軌道必須針對視訊媒體的 H.264 格式的進階視訊編碼 (AVC)，以及針對 H.265 格式的 HEVC 中包含轉碼器私有資料。如需詳細資訊，請參閱 [MPEG-4 specification ISO/IEC 14496-15](https://www.iso.org/standard/55980.html)。如需將串流資料轉換為特定格式的相關資訊，請參閱 [NAL Adaptation Flags](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 下列範例顯示如何擷取 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) + [擷取 Kinesis Video Streams 封存的內容端點以進行 MPEG-DASH 播放](#dash-example-endpoint) + [擷取 MPEG-DASH 串流工作階段 URL](#dash-example-session) + [使用 MPEG-DASH 播放顯示串流影片](#dash-example-display) + [已完成的範例](#dash-example-complete) ### 為 MPEG-DASH 播放設定 Kinesis Video Streams 用戶端 若要使用 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); ``` ### 擷取 Kinesis Video Streams 封存的內容端點以進行 MPEG-DASH 播放 啟動用戶端後，請擷取 Kinesis Video Streams 封存的內容端點，以便您可以擷取 MPEG-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); ``` ### 擷取 MPEG-DASH 串流工作階段 URL 當您有封存的內容端點時，請呼叫 [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 播放顯示串流影片 當您擁有 MPEG-DASH 串流工作階段的 URL 時，請將其提供給影片播放器。將 URL 提供給影片播放器的方法，因影片播放器種類而異。 以下程式碼範例說明如何提供串流工作階段 URL 到 [Google Shaka](https://github.com/google/shaka-player) 播放器： ``` // Step 4: Give the URL to the video player. //Shaka Player elements ... 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'); } ``` 以下程式碼範例說明如何提供串流工作階段 URL 到 [dash.js](https://github.com/Dash-Industry-Forum/dash.js/wiki) 播放器： ``` ... 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'); } ``` ### 已完成的範例 您可以在 GitHub [下載或檢視完整的範例程式碼](https://github.com/aws-samples/amazon-kinesis-video-streams-hls-viewer/blob/master/index.html)。