本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。
# 適用於 Web 應用程式的 JavaScript 中的 Amazon Kinesis Video Streams with WebRTC SDK WebRTC
您可以在適用於 Web 應用程式的 JavaScript 中找到 Kinesis Video Streams with WebRTC SDK，以及其在 [GitHub](https://github.com/awslabs/amazon-kinesis-video-streams-webrtc-sdk-js) 中的對應範例。 JavaScript
**Topics**
+ [安裝軟體開發套件](#install-sdk-js)
+ [WebRTC JavaScript SDK 文件](#docs-sdk-js)
+ [使用範例應用程式](#build-sdk-js)
+ [編輯範例應用程式](#run-sdk-js)
## 安裝軟體開發套件
在 JavaScript 中使用 WebRTC 開發套件安裝 Kinesis Video Streams 是否及如何安裝取決於程式碼是否在`Node.js`模組或瀏覽器指令碼中執行。
------
#### [ NodeJS module ]
在適用於 Node.js 的 JavaScript 中使用 WebRTC 開發套件安裝 Kinesis Video Streams 的首選方法是使用 [Node.js 套件管理員 npm。](https://www.npmjs.com/)
套件託管於 https：//[https://www.npmjs.com/package/amazon-kinesis-video-streams-webrtc](https://www.npmjs.com/package/amazon-kinesis-video-streams-webrtc?activeTab=readme)。
若要在`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 頁面：
```
```
當您將軟體開發套件載入至頁面後，便可從全域變數 `KVSWebRTC` (或 `window.KVSWebRTC`) 取得該軟體開發套件。
例如 `window.KVSWebRTC.SignalingClient`。
------
## WebRTC JavaScript SDK 文件
SDK 方法的文件位於 GitHub 讀我[檔案](https://github.com/awslabs/amazon-kinesis-video-streams-webrtc-sdk-js?tab=readme-ov-file#documentation)下。
在[用量](https://github.com/awslabs/amazon-kinesis-video-streams-webrtc-sdk-js?tab=readme-ov-file#usage)區段中，還有其他資訊可整合此 SDK 與適用於 JavaScript 的 AWS SDK，以建置 Web 型檢視器應用程式。
如需完整應用程式的範例，包括主要和檢視器角色，請參閱 `examples`目錄。
## 使用範例應用程式
Kinesis Video Streams with WebRTC 也會託管範例應用程式，您可以使用該應用程式建立新的訊號頻道，或連接到現有的頻道，並將其用作主頻道或檢視器。
Kinesis Video Streams with WebRTC 範例應用程式位於 [GitHub](https://awslabs.github.io/amazon-kinesis-video-streams-webrtc-sdk-js/examples/index.html)。
範例應用程式的程式碼位於 `examples`目錄中。
**Topics**
+ [從範例應用程式將peer-to-peer串流至 AWS 管理主控台](#sdk-js-stream-console)
+ [從範例應用程式將peer-to-peer串流至範例應用程式](#sdk-js-stream-test)
+ [使用 WebRTC 擷取從範例頁面串流peer-to-peer範例頁面](#sdk-js-stream-ingestion)
### 從範例應用程式將peer-to-peer串流至 AWS 管理主控台
1. 開啟 [Kinesis Video Streams with WebRTC 範例應用程式](https://awslabs.github.io/amazon-kinesis-video-streams-webrtc-sdk-js/examples/index.html)，並完成下列操作：
+ AWS 區域。 例如，`us-west-2`。
+ IAM 使用者或角色的 AWS 存取金鑰和私密金鑰。如果您使用長期 AWS 登入資料，請將工作階段字符保留空白。
+ 您要連線的訊號頻道的名稱。
如果您想要連接到新的訊號頻道，請選擇**建立頻道**，以使用方塊中提供的值來建立訊號頻道。
**注意**
目前帳戶和區域的訊號頻道名稱必須是唯一的。您可以使用字母、數字、底線 (\$1) 和連字號 (-)，但不能使用空格。
+ 是否要傳送音訊、視訊或兩者。
+ WebRTC 擷取和儲存。展開節點，然後選擇下列其中一項：
+ 選取**自動判斷擷取模式**。
+ 確定未選取**自動判斷擷取模式**，並將手動覆寫設定為 **OFF**。
**注意**
**自動判斷擷取模式**可讓應用程式呼叫 [DescribeMediaStorageConfiguration](https://docs.aws.amazon.com//kinesisvideostreams/latest/dg/API_DescribeMediaStorageConfiguration.html) API，以決定要在哪個模式中執行 (Peer-to-peer或 WebRTC 擷取）。此額外的 API 呼叫會將少量新增至啟動時間。
如果您事先知道此訊號頻道執行的模式，請使用手動覆寫略過此 API 呼叫。
+ 產生 ICE 候選項目。保持`STUN`/`TURN`選取並保持`Trickle ICE`啟用狀態。
1. 選擇 **Start Master** 以連接至訊號頻道。
如有需要，允許存取您的攝影機和/或麥克風。
1. 在 中開啟 [Kinesis Video Streams 主控台](https://console.aws.amazon.com//kinesisvideo/home/) AWS 管理主控台。
確定已選取正確的區域。
1. 在左側導覽中，選取**[訊號頻道](https://console.aws.amazon.com//kinesisvideo/home#/signalingChannels/)**。
選取上述訊號頻道的名稱。如有需要，請使用搜尋列。
1. 展開**媒體播放檢視器**區段。
1. 選擇影片播放器上的**播放**按鈕。這會以 的形式加入 WebRTC 工作階段`viewer`。
在示範頁面上傳送的媒體應該會顯示在 中 AWS 管理主控台。
### 從範例應用程式將peer-to-peer串流至範例應用程式
1. 開啟 [Kinesis Video Streams with WebRTC 範例應用程式](https://awslabs.github.io/amazon-kinesis-video-streams-webrtc-sdk-js/examples/index.html)，並完成下列資訊：
+ AWS 區域。 例如，`us-west-2`。
+ IAM 使用者或角色的 AWS 存取金鑰和私密金鑰。如果您使用長期 AWS 登入資料，請將工作階段字符保留空白。
+ 您要連線的訊號頻道的名稱。
如果您想要連接到新的訊號頻道，請選擇**建立頻道**，以使用方塊中提供的值來建立訊號頻道。
**注意**
目前帳戶和區域的訊號頻道名稱必須是唯一的。您可以使用字母、數字、底線 (\$1) 和連字號 (-)，但不能使用空格。
+ 是否要傳送音訊、視訊或兩者。
+ WebRTC 擷取和儲存。展開節點，然後選擇下列其中一項：
+ 選取**自動判斷擷取模式**。
+ 確定未選取**自動判斷擷取模式**，並將手動覆寫設定為 **OFF**。
**注意**
**自動判斷擷取模式**可讓應用程式呼叫 [DescribeMediaStorageConfiguration](https://docs.aws.amazon.com//kinesisvideostreams/latest/dg/API_DescribeMediaStorageConfiguration.html) API，以決定要在哪個模式中執行 (Peer-to-peer或 WebRTC 擷取）。此額外的 API 呼叫會將少量新增至啟動時間。
如果您事先知道此訊號頻道執行的模式，請使用手動覆寫略過此 API 呼叫。
+ 產生 ICE 候選項目。保持`STUN`/`TURN`選取並保持`Trickle ICE`啟用狀態。
1. 選擇 **Start Master** 以做為`master`角色連線至訊號頻道。
如有需要，允許存取您的攝影機和/或麥克風。
1. 開啟另一個瀏覽器索引標籤，並開啟 [Kinesis Video Streams with WebRTC 範例應用程式](https://awslabs.github.io/amazon-kinesis-video-streams-webrtc-sdk-js/examples/index.html)。應載入先前執行的所有資訊。
1. 向下捲動並選擇**啟動檢視器**，以做為`viewer`角色連線至訊號頻道。
您應該會看到在 `master`和 之間交換的媒體`viewer`。
### 使用 WebRTC 擷取從範例頁面串流peer-to-peer範例頁面
1. 遵循 [從瀏覽器擷取媒體](ingest-media.md#ingest-browser) 來連接主要參與者，並確認其已連線至儲存工作階段。
1. 遵循 [將檢視器新增至擷取工作階段](ingest-media.md#ingest-add-viewers) 新增瀏覽者參與者。
檢視器參與者將連線至儲存工作階段並從中接收媒體。他們可以將選用的音訊傳回儲存工作階段。
儲存工作階段會處理混合從主要和檢視器參與者收到的媒體，並將其傳送至適當的目的地。
1. 您可以透過 [Kinesis Video Streams 播放](https://docs.aws.amazon.com//kinesisvideostreams/latest/dg/how-playback.html)來檢視和使用擷取的媒體。
## 編輯範例應用程式
若要編輯 SDK 和範例應用程式以進行開發，請遵循下列指示。
**必要條件**
NodeJS 16\$1 版
**注意**
我們建議您從 [https://nodejs.org/en/download](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
```
1. 使用 package.json 檔案導覽至 目錄。檔案位於儲存庫的根目錄中。
在終端機中輸入下列項目：
```
cd amazon-kinesis-video-streams-webrtc-sdk-js
```
1. 安裝依存項目。
在終端機中輸入下列 [npm CLI](https://docs.npmjs.com/cli/v10/commands) 命令：
```
npm install
```
1. 啟動 Web 伺服器以開始提供網頁。
在終端機中輸入下列 [npm CLI](https://docs.npmjs.com/cli/v10/commands) 命令：
```
npm run develop
```
1. 在您的瀏覽器中，請造訪 [http：//localhost：3001/](http://localhost:3001/)。
您可以編輯 `examples`目錄中的檔案來編輯網頁。