本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。 # 使用 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\_REPLAY 或 ON\_DEMAND) + 片段選取器類型：用於選取片段的方法 (SERVER\_TIMESTAMP 或 PRODUCER\_TIMESTAMP) + 片段編號：開始片段編號 （如適用） + 容器格式：媒體容器的格式 (FRAGMENTED\_MP4 或 MPEG\_TS) 應用程式會從 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 倍速) 趕上緩衝之前來避免這點。此操作會造成播放不穩定，或在播放器追上進度時加快播放速度，而若緩衝大小保持過短時，重新緩衝可能更為頻繁。