本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。
# 带有 WebRTC 开发工具包的 Amazon Kinesis Video Streams 适用于网络应用程序 JavaScript
你可以在网络应用程序中找到带有 WebRTC SDK JavaScript 的 Kinesis Video Streams 及其相应的示例。[GitHub](https://github.com/awslabs/amazon-kinesis-video-streams-webrtc-sdk-js)
**Topics**
+ [安装 SDK](#install-sdk-js)
+ [WebRTC 软件开发工具 JavaScript 包文档](#docs-sdk-js)
+ [使用示例应用程序](#build-sdk-js)
+ [编辑示例应用程序](#run-sdk-js)
## 安装 SDK
是否以及如何安装带有 WebRTC SDK 的 Kinesis Video Streams 取决于代码是在模块 JavaScript 中执行还是浏览器脚本执行`Node.js`。
------
#### [ NodeJS module ]
在 Node.js 中安装带有 WebRTC SDK JavaScript 的 Kinesis Video Streams 的首选方法是[使用 Node.js 包管理器 npm](https://www.npmjs.com/)。
该软件包托管在 [https://www.npmjs.com/package/amazon-kinesis-video-streams-w](https://www.npmjs.com/package/amazon-kinesis-video-streams-webrtc?activeTab=readme) ebrtc。
要在`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 ]
您无需安装开发工具包以在浏览器脚本中使用它。您可以在 HTML 页面中 AWS 使用脚本直接加载托管 SDK 包。
要在浏览器中使用 SDK，请在您的 HTML 页面中添加以下脚本元素：
```
```
页面中加载开发工具包之后，可从全局变量 `KVSWebRTC`（或 `window.KVSWebRTC`）使用开发工具包。
例如 `window.KVSWebRTC.SignalingClient`。
------
## WebRTC 软件开发工具 JavaScript 包文档
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 与用于构建基于 Web 的 JavaScript 查看器应用程序的 AWS SDK 集成的更多信息。
有关完整应用程序（包括主角色和查看者角色）的示例，请参阅`examples`目录。
## 使用示例应用程序
带有 WebRTC 的 Kinesis Video Streams 还托管了一个示例应用程序，您可以使用该应用程序创建新的信令信道或连接到现有频道并将其用作主频道或查看器。
带有 WebRTC 的 Kinesis Video Streams 示例应用程序位于。[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)
+ [peer-to-peer使用 WebRTC Ingestion 从示例页面直播到示例页面](#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 证书，请将会话令牌留空。
+ 要连接的信令通道的名称。
如果要连接到新的信令信道，请选择 C **reate Channel** 以使用框中提供的值创建一个信令信道。
**注意**
对于当前账户和地区，您的信令频道名称必须是唯一的。您可以使用字母、数字、下划线 (\$1) 和连字符 (-)，但不能使用空格。
+ 是发送音频、视频还是两者。
+ WebRTC 摄取和存储。展开节点并选择以下选项之一：
+ 选择 “**自动确定摄取模式**”。
+ **确保未选择 “**自动确定摄取模式”**，并将手动覆盖设置为 “关闭”。**
**注意**
**自动确定摄取模式**让应用程序调用 [DescribeMediaStorageConfiguration](https://docs.aws.amazon.com//kinesisvideostreams/latest/dg/API_DescribeMediaStorageConfiguration.html)API 来确定要在哪个模式下运行（或 Peer-to-peer WebRTC 摄取）。这个额外的 API 调用会增加少量启动时间。
如果您提前知道此信令通道在哪种模式下运行，请使用手动替代来跳过此 API 调用。
+ 移民局候选人一代。保留`STUN`/`TURN`选中状态并保持`Trickle ICE`启用状态。
1. 选择 **Start Master** 以连接到信令信道。
如果需要，允许访问您的摄像头 and/or 麦克风。
1. 在中打开 [Kinesis Video Stream](https://console.aws.amazon.com//kinesisvideo/home/) s 控制台。 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 证书，请将会话令牌留空。
+ 要连接的信令通道的名称。
如果要连接到新的信令信道，请选择 C **reate Channel** 以使用框中提供的值创建一个信令信道。
**注意**
对于当前账户和地区，您的信令频道名称必须是唯一的。您可以使用字母、数字、下划线 (\$1) 和连字符 (-)，但不能使用空格。
+ 是发送音频、视频还是两者。
+ WebRTC 摄取和存储。展开节点并选择以下选项之一：
+ 选择 “**自动确定摄取模式**”。
+ **确保未选择 “**自动确定摄取模式”**，并将手动覆盖设置为 “关闭”。**
**注意**
**自动确定摄取模式**让应用程序调用 [DescribeMediaStorageConfiguration](https://docs.aws.amazon.com//kinesisvideostreams/latest/dg/API_DescribeMediaStorageConfiguration.html)API 来确定要在哪个模式下运行（或 Peer-to-peer WebRTC 摄取）。这个额外的 API 调用会增加少量启动时间。
如果您提前知道此信令通道在哪种模式下运行，请使用手动替代来跳过此 API 调用。
+ 移民局候选人一代。保留`STUN`/`TURN`选中状态并保持`Trickle ICE`启用状态。
1. 选择 **Start Master** 以`master`角色身份连接到信令通道。
如果需要，允许访问您的摄像头 and/or 麦克风。
1. 打开另一个浏览器选项卡，然后打开 [Kinesis Video Streams with WebRTC 示例应用程序](https://awslabs.github.io/amazon-kinesis-video-streams-webrtc-sdk-js/examples/index.html)。上一次运行的所有信息都应加载完毕。
1. 向下滚动并选择 “**启动查看器**”，以`viewer`角色身份连接到信令频道。
您应该会看到`master`和之间正在交换媒体`viewer`。
### peer-to-peer使用 WebRTC Ingestion 从示例页面直播到示例页面
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 下载最新的长期支持 (LTS) 版本。 org/en/download](https://nodejs.org/en/download)。
**编辑示例应用程序**
1. 下载带有 WebRTC SDK 的 Kinesis Video Streams。 JavaScript
在终端中键入以下内容：
```
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`目录中的文件来编辑网页。