適用於 Web 應用程式的 Kinesis Video Streams 與 WebRTC 技術開發套件 JavaScript - Kinesis Video Streams
將 SDK 安裝在 JavaScriptWeb 開發套件說明文件 JavaScript 使用 WebRTC 測試頁面編輯 WebRTC 測試頁面

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

適用於 Web 應用程式的 Kinesis Video Streams 與 WebRTC 技術開發套件 JavaScript

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

使用 WebRTC 技術開發套件安裝 Kinesis Video Streams JavaScript

您是否以及如何使用 WebRTC SDK 安裝 Kinesis Video Streams， JavaScript 取決於程式碼是在Node.js模組還是瀏覽器指令碼中執行。

NodeJS module

若要在 Node.js 中使用 WebRTC 技術開發套件安裝 Kinesis Video Streams 的慣 JavaScript 用方式是使用 npm，Node.js 套件管理員。

該軟件包託管在 https://www.npmjs.com/package/ 網amazon-kinesis-video-streams站。

要在Node.js項目中安裝此 SDK，請使用終端導航到與項目相同的目錄package.json：

輸入下列內容：

npm install amazon-kinesis-video-streams-webrtc

您可以像典型的 Node.js 模塊一樣導入 SDK 類：

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

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

Kinesis Video Streams 與 WebRTC JavaScript 技術開發套件說明文件

SDK 方法的文檔位於 GitHub 自述文檔下。

在 [使用情況] 區段中，還有其他資訊可用於將此 SDK 與 AWS SDK 整合， JavaScript 以建置 Web 型檢視器應用程式。

請參閱目examples錄以取得完整應用程式的範例，包括主要角色和檢視者角色。

使用 WebRTC 測試頁面的 Kinesis Video Streams

使用 WebRTC 的 Kinesis Video Streams 也會託管一個測試頁面，您可以用來建立新的訊號通道或連線至現有頻道，並將其當作主頻道或檢視器使用。

網路 Kinesis Video Streams 測試頁面位於 https://awslabs.github.io/ amazon-kinesis-video-streams-/examples/index.html。webrtc-sdk-js

測試頁面的程式碼位於目examples錄中。

從測試頁面流式傳輸到 AWS Management Console

  1. 開啟「使用 WebRTC 技術測試的 Kinesis Video Streams」頁面並完成以下操作：

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

    • IAM 使用者或角色的 AWS 存取金鑰和秘密金鑰。如果您使用長期 AWS 認證，請將工作階段權杖保留空白。

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

      如果要連接到新的信令通道，請選擇「建立通道」以使用方塊中提供的值建立信號通道。

      注意

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

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

    • ICE 候選人一代。離開STUN/TURN選擇並保持Trickle ICE啟用狀態。

  2. 選擇「啟動主訊號」以連線至訊號通道。

    允許訪問您的攝像頭和/或麥克風，如果需要。

  3. 在中開啟 Kinesis Video Streams 主控台。 AWS Management Console

    確定已選取正確的區域。

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

    選取上方信號通道的名稱。如有需要，請使用搜尋列。

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

  6. 選擇視頻播放器上的播放按鈕。這加入 WebRTC 技術會話作為一個. viewer

    在示範頁面上傳送的媒體應該會顯示在中 AWS Management Console。

從測試頁面流式傳輸到測試頁面

  1. 開啟包含 WebRTC 技術的 Kinesis Video Streams 訊串流測試頁面，並完成下列資訊：

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

    • IAM 使用者或角色的 AWS 存取金鑰和秘密金鑰。如果您使用長期 AWS 認證，請將工作階段權杖保留空白。

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

      如果要連接到新的信令通道，請選擇「建立通道」以使用方塊中提供的值建立信號通道。

      注意

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

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

    • ICE 候選人一代。離開STUN/TURN選擇並保持Trickle ICE啟用狀態。

  2. 選擇啟動主機以連接到信令通道作為master角色。

    允許訪問您的攝像頭和/或麥克風，如果需要。

  3. 開啟另一個瀏覽器索引標籤，然後開啟具有 WebRTC 技術的 Kinesis Video Streams 測試頁面。所有來自先前運行的信息應該加載。

  4. 向下捲動並選擇 [啟動檢視器]，以連線至作為viewer角色的信號通道。

    您應該看到與之間交換的媒master體viewer。

編輯使用 WebRTC 測試頁面的 Kinesis Video Streams

要編輯 SDK 和測試頁面以進行開發，請按照以下說明進行操作。

必要條件

NodeJS 版本 16 +

注意

我們建議您從 https://nodejs.org/en/download 下載最新的長期支持（LTS）版本。

編輯測試頁面

  1. 使用 WebRTC 技術開發套件下載 Kinesis Video Streams。 JavaScript

    在終端中鍵入以下內容：

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

  2. 瀏覽至包含包裝 .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頁。