JavaScript 適用於 Web 應用程式的 Amazon Kinesis Video Streams 搭配網RTCSDK路 - Kinesis Video Streams
安裝 SDK網頁RTC JavaScript SDK文件使用 Web 範RTC例應用程式編輯範例應用程式

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

JavaScript 適用於 Web 應用程式的 Amazon Kinesis Video Streams 搭配網RTCSDK路

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

安裝 SDK

Kinesis Video Streams 是否以及如何RTCSDK在網路上安裝， JavaScript 取決於程式碼是在Node.js模組還是瀏覽器指令碼中執行。

NodeJS module

RTCSDK在 JavaScript Node.js 中使用網路安裝 Kinesis Video Streams 的建議方式是使用 npm，Node.js 套件管理員。

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

要SDK在您的Node.js項目中安裝它，請使用終端導航到與項目相同的目錄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

您不必安裝即可在瀏覽器腳本中使用它。SDK您可以直接從以下位置載入託管SDK套件 AWS 在您的HTML頁面中使用腳本。

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

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

在頁面中SDK載入之後，SDK即可從全域變數 KVSWebRTC (或window.KVSWebRTC) 取得。

例如：window.KVSWebRTC.SignalingClient。

網頁RTC JavaScript SDK文件

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

在「使用情況」區段中，還有其他資訊可用於整合此資SDK訊以及 AWS SDK用於構 JavaScript 建基於 Web 的查看器應用程序。

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

使用範例應用程式

Kinesis Video Streams 搭配 Web RTC 也會託管範例應用程式，您可以使用該應用程式建立新的訊號通道，或連線至現有頻道，並將其當作主頻道或檢視者使用。

Kinesis Video Streams 與網頁RTC範例應用程式位於中GitHub。

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

peer-to-peer 從範例應用程式串流至 AWS Management Console

  1. 開啟 Kinesis Video Streams 與 Web RTC 範例應用程式，並完成以下操作：

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

    • 所以此 AWS IAM使用者或角色的存取金鑰和秘密金鑰。如果您長期使用，請將會話令牌保留空白 AWS 認證。

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

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

      注意

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

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

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

      • 選取 [自動決定擷取模式]。

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

        注意

        自動判斷擷取模式可讓應用程式呼叫DescribeMediaStorageConfigurationAPI以決定要在哪個模式 (P eer-to-peer 或 Web RTC 擷取) 中執行。這個額外的API調用增加了一小部分的啟動時間。

        如果您事先知道此信令通道正在運行的模式，請使用手動覆蓋跳過此API呼叫。

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

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

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

  3. 開啟「Kinesis Video Streams」主控台， AWS Management Console.

    請確定已選取正確的區域。

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

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

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

  6. 選擇視頻播放器上的播放按鈕。這會將 Web 工RTC作階段加入為viewer.

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

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

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

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

    • 所以此 AWS IAM使用者或角色的存取金鑰和秘密金鑰。如果您長期使用，請將會話令牌保留空白 AWS 認證。

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

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

      注意

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

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

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

      • 選取 [自動決定擷取模式]。

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

        注意

        自動判斷擷取模式可讓應用程式呼叫DescribeMediaStorageConfigurationAPI以決定要在哪個模式 (P eer-to-peer 或 Web RTC 擷取) 中執行。這個額外的API調用增加了一小部分的啟動時間。

        如果您事先知道此信令通道正在運行的模式，請使用手動覆蓋跳過此API呼叫。

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

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

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

  3. 開啟另一個瀏覽器索引標籤，然後開啟 Kinesis Video Streams 與 Web RTC 範例應用程式。所有來自先前運行的信息應該加載。

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

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

從範例頁面將 Web RTC 擷取串流 peer-to-peer 至範例頁面

  1. 按照從瀏覽器擷取媒體以連接主參與者，並確保其已連接到存儲會話。

  2. 按照將檢視器新增至擷取工作階段以新增檢視器參與者。

    檢視器參與者將連線至儲存工作階段，並從中接收媒體。他們可以將可選音頻發送回存儲會話。

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

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

編輯範例應用程式

若要針對開發目的編輯SDK和範例應用程式，請遵循以下指示。

必要條件

NodeJS 版本 16 +

注意

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

編輯範例應用程式

  1. RTCSDK在 JavaScript中下載帶有網絡的 Kinesis Video Streams。

    在終端中鍵入以下內容：

    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目錄中的檔案來對網頁進行編輯。