適用於 Web 應用程式的 JavaScript 中的 Amazon Kinesis Video Streams with WebRTC SDK WebRTC - Kinesis Video Streams
安裝軟體開發套件WebRTC JavaScript SDK 文件使用 WebRTC 範例應用程式編輯範例應用程式

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

適用於 Web 應用程式的 JavaScript 中的 Amazon Kinesis Video Streams with WebRTC SDK WebRTC

您可以在適用於 Web 應用程式的 JavaScript 中找到 Kinesis Video Streams with WebRTC SDK，以及其在 GitHub 中的對應範例。 JavaScript

安裝軟體開發套件

是否在 JavaScript 中使用 WebRTC 開發套件安裝 Kinesis Video Streams 及其安裝方式取決於程式碼是否在Node.js模組或瀏覽器指令碼中執行。

NodeJS module

在 Node.js 的 JavaScript 中使用 WebRTC 開發套件安裝 Kinesis Video Streams 的首選方法是使用 Node.js 套件管理員 npm。

套件託管於 https：//https://www.npmjs.com/package/amazon-kinesis-video-streams-webrtc。

若要在Node.js專案中安裝此開發套件，請使用終端機導覽至與您專案的 相同的目錄package.json：

輸入下列內容：

npm install amazon-kinesis-video-streams-webrtc

您可以匯入 SDK 類別，例如一般 Node.js 模組：

// JavaScript
const SignalingClient = require('amazon-kinesis-video-streams-webrtc').SignalingClient;
// TypeScript
import { SignalingClient } from 'amazon-kinesis-video-streams-webrtc';
Browser

您無需另行安裝，也能在瀏覽器指令碼中使用軟體開發套件。您可以使用 HTML 頁面中的 AWS 指令碼，直接從 載入託管 SDK 套件。

若要在瀏覽器中使用 SDK，請將下列指令碼元素新增至 HTML 頁面：

<script src="https://unpkg.com/amazon-kinesis-video-streams-webrtc/dist/kvs-webrtc.min.js"></script>

當您將軟體開發套件載入至頁面後，便可從全域變數 KVSWebRTC (或 window.KVSWebRTC) 取得該軟體開發套件。

例如 window.KVSWebRTC.SignalingClient。

WebRTC JavaScript SDK 文件

SDK 方法的文件位於 GitHub 讀我檔案下。

在用量區段中，還有其他資訊可整合此 SDK 與適用於 JavaScript 的 AWS SDK，以建置 Web 型檢視器應用程式。

如需完整應用程式的範例，包括主要和檢視器角色，請參閱 examples目錄。

使用範例應用程式

Kinesis Video Streams with WebRTC 也會託管範例應用程式，您可以使用該應用程式來建立新的訊號頻道，或連接至現有的頻道，並將其用作主頻道或檢視器。

Kinesis Video Streams with WebRTC 範例應用程式位於 GitHub。

範例應用程式的程式碼位於 examples目錄中。

從範例應用程式將peer-to-peer串流至 AWS 管理主控台

  1. 開啟 Kinesis Video Streams with WebRTC 範例應用程式，並完成下列操作：

    • AWS 區域。 例如，us-west-2。

    • IAM 使用者或角色的 AWS 存取金鑰和私密金鑰。如果您使用長期 AWS 登入資料，請將工作階段字符保留空白。

    • 您要連線的訊號頻道的名稱。

      如果您想要連接到新的訊號頻道，請選擇建立頻道，以建立具有方塊中所提供值的訊號頻道。

      注意

      目前帳戶和區域的訊號頻道名稱必須是唯一的。您可以使用字母、數字、底線 (_) 和連字號 (-)，但不能使用空格。

    • 是否要傳送音訊、視訊或兩者。

    • WebRTC 擷取和儲存。展開節點，然後選擇下列其中一項：

      • 選取自動判斷擷取模式。

      • 確定未選取自動判斷擷取模式，並將手動覆寫設定為 OFF。

        注意

        自動判斷擷取模式可讓應用程式呼叫 DescribeMediaStorageConfiguration API，以決定要在哪個模式中執行 (Peer-to-peer或 WebRTC 擷取）。此額外的 API 呼叫會將少量新增至啟動時間。

        如果您事先知道此訊號頻道執行的模式，請使用手動覆寫略過此 API 呼叫。

    • 產生 ICE 候選項目。保持STUN/TURN選取並保持Trickle ICE啟用狀態。

  2. 選擇 Start Master 以連接至訊號頻道。

    如有需要，允許存取您的攝影機和/或麥克風。

  3. 在 中開啟 Kinesis Video Streams 主控台 AWS 管理主控台。

    確定已選取正確的區域。

  4. 在左側導覽中，選取訊號頻道。

    選取上述訊號頻道的名稱。如有需要，請使用搜尋列。

  5. 展開媒體播放檢視器區段。

  6. 選擇影片播放器上的播放按鈕。這會以 的形式加入 WebRTC 工作階段viewer。

    在示範頁面上傳送的媒體應該會顯示在 中 AWS 管理主控台。

從範例應用程式將peer-to-peer串流至範例應用程式

  1. 開啟 Kinesis Video Streams with WebRTC 範例應用程式，並完成下列資訊：

    • AWS 區域。 例如，us-west-2。

    • IAM 使用者或角色的 AWS 存取金鑰和私密金鑰。如果您使用長期 AWS 登入資料，請將工作階段字符保留空白。

    • 您要連線的訊號頻道的名稱。

      如果您想要連接到新的訊號頻道，請選擇建立頻道，以使用方塊中提供的值來建立訊號頻道。

      注意

      目前帳戶和區域的訊號頻道名稱必須是唯一的。您可以使用字母、數字、底線 (_) 和連字號 (-)，但不能使用空格。

    • 是否要傳送音訊、視訊或兩者。

    • WebRTC 擷取和儲存。展開節點，然後選擇下列其中一項：

      • 選取自動判斷擷取模式。

      • 確定未選取自動判斷擷取模式，並將手動覆寫設定為 OFF。

        注意

        自動判斷擷取模式可讓應用程式呼叫 DescribeMediaStorageConfiguration API，以決定要在哪個模式中執行 (Peer-to-peer或 WebRTC 擷取）。此額外的 API 呼叫會將少量新增至啟動時間。

        如果您事先知道此訊號頻道執行的模式，請使用手動覆寫略過此 API 呼叫。

    • 產生 ICE 候選項目。保持STUN/TURN選取並保持Trickle ICE啟用狀態。

  2. 選擇 Start Master 以做為master角色連線至訊號頻道。

    如有需要，允許存取您的攝影機和/或麥克風。

  3. 開啟另一個瀏覽器索引標籤，並開啟 Kinesis Video Streams with WebRTC 範例應用程式。應載入先前執行的所有資訊。

  4. 向下捲動並選擇啟動檢視器，以做為viewer角色連線至訊號頻道。

    您應該會看到在 master和 之間交換的媒體viewer。

使用 WebRTC 擷取，從範例頁面串流peer-to-peer範例頁面

  1. 遵循 從瀏覽器擷取媒體 來連接主要參與者，並確認其已連線至儲存工作階段。

  2. 遵循 將檢視器新增至擷取工作階段 新增瀏覽者參與者。

    檢視器參與者將連接至儲存工作階段並從中接收媒體。他們可以將選用的音訊傳回儲存工作階段。

    儲存工作階段會處理混合從主要和檢視器參與者收到的媒體，並將其傳送至適當的目的地。

  3. 您可以透過 Kinesis Video Streams 播放來檢視和使用擷取的媒體。

編輯範例應用程式

若要編輯 SDK 和範例應用程式以進行開發，請遵循下列指示。

必要條件

NodeJS 16+ 版

注意

我們建議您從 https://nodejs.org/en/download：// 下載最新的長期支援 (LTS) 版本。

編輯範例應用程式

  1. 在 JavaScript 中下載 Kinesis Video Streams with WebRTC SDK。

    在終端機中輸入下列項目：

    git clone https://github.com/awslabs/amazon-kinesis-video-streams-webrtc-sdk-js.git

  2. 使用 package.json 檔案導覽至 目錄。檔案位於儲存庫的根目錄中。

    在終端機中輸入下列項目：

    cd amazon-kinesis-video-streams-webrtc-sdk-js

  3. 安裝依存項目。

    在終端機中輸入下列 npm CLI 命令：

    npm install

  4. 啟動 Web 伺服器以開始提供網頁。

    在終端機中輸入下列 npm CLI 命令：

    npm run develop

  5. 在您的瀏覽器中，請造訪 http：//localhost：3001/。

    您可以編輯 examples目錄中的檔案來編輯網頁。