使用 HLS 進行視頻播放 - Amazon Kinesis Video Streams
使用擷 AWS CLI 取 HLS 串流工作階段 URL範例：在 HTML 和中使用 HLS JavaScript疑難排解 HLS 問題

本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

使用 HLS 進行視頻播放

HTTP 即時串流 (HLS) 是業界標準的 HTTP 式媒體串流通訊協定。您可以使用 HLS 檢視 Kinesis 視訊串流，以進行即時播放或檢視封存的視訊。

您可以使用 HLS 進行即時播放。延遲通常介於 3-5 秒之間，但視使用案例、播放程式和網路條件而定，延遲時間可能在 1—10 秒之間。您可使用第三方播放器 (例如 Video.js 或 Google Shaka Player) 以透過提供 HLS 串流工作階段 URL、編寫程式或手動來顯示影片串流。您也可以通過在蘋果 Safari 或 Microsoft 邊緣瀏覽器的位置欄中輸入 HLS 流會話網址來播放視頻。

若要使用 HLS 檢視 Kinesis 視訊串流，請先使用 Get StreamingSession Hls URL 建立串流工作階段。這個動作會傳回一個 URL (包含工作階段字符) 以存取 HLS 工作階段。然後您可以使用媒體播放器的 URL 或獨立應用程式來顯示串流。

重要

並非所有傳送至 Kinesis Video Streams 的媒體都能透過 HLS 播放。如需特GetHLSStreamingSessionURL定上傳需求，請參閱。

使用擷 AWS CLI 取 HLS 串流工作階段 URL

請遵循以下程序來為 Kinesis 視訊串流產生 HLS 串流工作階段 URL。 AWS CLI

如需安裝指示，請參閱使AWS Command Line Interface 用者指南。安裝後，配置使 AWS CLI用憑據和區域。

或者，打開已 AWS CLI 安裝和配置的 AWS CloudShell 終端。如需詳細資訊，請參閱AWS CloudShell 使用者指南。

為您的 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"
}

  2. 向該傳回的端點發出 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 紀元時間以秒為單位的格式。如需時間戳記格式的詳細資訊，請參閱 AWS Command Line Interface 使用指南中的「時間戳記」一節。

    如需轉換工具，請參閱 UnixTime.org。

    • 1708471800 等於二零二四年二月二十日下午 3:30 格林尼治標準時間

    在此範例中，我們不指定結束時間戳記，這表示工作階段將繼續包含新擷取的媒體，直到工作階段過期為止。

    在LIVE_REPLAY播放模式和指定 HLS 片段選擇器的情況下調用 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 紀元時間以秒為單位的格式。如需時間戳記格式的詳細資訊，請參閱 AWS Command Line Interface 使用指南中的「時間戳記」一節。

    如需轉換工具，請參閱 UnixTime.org。

    • 1708471800 等於二零二四年二月二十日下午 3:30 格林尼治標準時間

    • 1708471860 等於二零二四年二月二十日下午 3:31 下午格林尼治標準時間

    在ON_DEMAND播放模式和指定 HLS 片段選擇器的情況下調用 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}"
    注意

    如文檔中所述，時間戳記必須在彼此HLSTimestampRange之間的 24 小時內。

    您會收到如下所示的回應：

    {
    "HLSStreamingSessionURL": "https://b-1234abcd.kinesisvideo.aws-region.amazonaws.com/hls/v1/getHLSMasterPlaylist.m3u8?SessionToken=CiAz...DkRE6M~"
}
    重要

    不要在未經授權的實體可以訪問它的地方共享或存儲此令牌。令牌提供對流內容的訪問。使用與 AWS 憑據一起使用的相同措施來保護令牌。

    您可以使用此 URL 和任何 HLS 播放器來查看 HLS 流。

    例如，使用 VLC 媒體播放器。

    您也可以通過在蘋果 Safari 或 Microsoft 邊緣瀏覽器的位置欄中輸入 HLS 流會話 URL 來播放 HLS 流。

範例：在 HTML 和中使用 HLS JavaScript

下列範例顯示如何使用適用於 JavaScript v2 的 AWS SDK 擷取 Kinesis 視訊串流的 HLS 串流工作階段，並在網頁中播放。本範例說明如何在下列播放器播放影片：

在中檢視完整的範例程式碼和託管網頁 GitHub。

匯入適用於瀏覽器 JavaScript 的 AWS SDK

在網頁中，包括以下腳本標記，以將 JavaScript v2 的 AWS SDK 導入到項目中。

<script src="https://cdnjs.cloudflare.com/ajax/libs/aws-sdk/2.490.0/aws-sdk.min.js"></script>

如需詳細資訊，請參閱 AWS SDK 以取得 JavaScript說明文件。

設定 Kinesis Video Streams 用戶端

若要使用 HLS 存取串流視訊，請先建立並設定 Kinesis Video Streams 用戶端。如需其他驗證方法，請參閱在 Web 瀏覽器中設定認證。

const clientConfig = {
    accessKeyId: 'YourAccessKey',
    secretAccessKey: 'YourSecretKey',
    region: 'us-west-2'
};
const kinesisVideoClient = new AWS.KinesisVideo(clientConfig);

該應用程式會在 HTML 頁面的輸入方塊擷取必要的值。

擷取 HLS 播放的端點

使用 Kinesis Video Streams 用戶端呼叫 GetDataEndpoint 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 以擷取 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 及其 CSS 類別匯入我們的瀏覽器指令碼：

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

創建一個 video HTML 元素來顯示視頻：

<video id="videojs" class="player video-js vjs-default-skin" controls autoplay></video>

設置 HLS 網址作為 HTML 視頻元素源：

const playerElement = document.getElementById('videojs');
const player = videojs(playerElement);
player.src({
    src: hlsUrl,
    type: 'application/x-mpegURL'
});
player.play();
Shaka

請執行以下操作以將 Google Saka 播放器導入到我們的瀏覽器腳本中：

<script src="https://cdnjs.cloudflare.com/ajax/libs/shaka-player/2.4.1/shaka-player.compiled.js"></script>

創建一個 video HTML 元素來顯示視頻：

<video id="shaka" class="player" controls autoplay></video>

創建一個沙卡播放器指定視頻元素，並調用 load 方法：

const playerElement = document.getElementById('shaka');
const player = new shaka.Player(playerElement);
player.load(hlsUrl);
hls.js

執行以下操作以將 hls.js 導入我們的瀏覽器腳本中：

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

創建一個 video HTML 元素來顯示視頻：

<video id="hlsjs" class="player" controls autoplay></video>

創建一個 hls.js 播放器，給它 HLS 網址，並告訴它播放：

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 問題

本節說明搭配 Kinesis 視訊串流使用 HTTP 即時串流 (HLS) 時可能會遇到的問題。

擷取 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 秒。但是，這樣做意味著如果有任何延遲產生片段，播放器會重新緩衝，因為播放器將沒有緩衝區來吸收延遲。

  • 播放器「catch」 — 如果緩衝區填滿，視頻播放器通常不會自動 catch 到視頻緩衝區前面的播放，例如延遲片段導致積壓的片段播放。自訂播放器可以透過刪除影格或提高播放速度 (例如提高至 1.1 倍速) 趕上緩衝之前來避免這點。此操作會造成播放不穩定，或在播放器追上進度時加快播放速度，而若緩衝大小保持過短時，重新緩衝可能更為頻繁。