View a markdown version of this page

带有适用于 Web 应用程序的 WebRTC 软件开发工具包的 Amazon Kinesis 视频流 JavaScript - Kinesis Video Streams
安装 SDKWebRTC JavaScript SDK 文档使用 WebRTC 示例应用程序编辑示例应用程序
Amazon Web Services 文档中描述的 Amazon Web Services 服务或功能可能因区域而异。要查看适用于中国区域的差异，请参阅 中国的 Amazon Web Services 服务入门 (PDF)。

本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

带有适用于 Web 应用程序的 WebRTC 软件开发工具包的 Amazon Kinesis 视频流 JavaScript

你可以在中找到适用 JavaScript 于 Web 应用程序的 Kinesis Video Streams With WebRTC SDK 及其相应的示例。 GitHub

安装 SDK

是否以及如何安装带有 WebRTC SDK 的 Kinesis Video Streams， JavaScript 取决于代码是在Node.js模块中执行还是在浏览器脚本中执行。

NodeJS module

安装带有 WebRTC 软件开发工具包的 Kinesis Video Streams JavaScript 的首选方法 Node.js 是使用软件包管理器 npm。 Node.js

该软件包托管于https://www.npmjs.com/package/amazon-kinesis-video-streams-webrtc。

要在您的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 页面中 Amazon 使用脚本加载托管 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 以及用于构建基于 Web 的 JavaScript 查看器应用程序的 Amazon SDK 的更多信息。

有关完整应用程序的示例，包括主角色和查看者角色，请参阅examples目录。

使用示例应用程序

带有 WebRTC 的 Kinesis Video Streams 还托管一个示例应用程序，您可以使用该应用程序创建新的信令信道或连接到现有信道并将其用作主频道或查看器。

使用 WebRTC 的 Kinesis Video Streams 示例应用程序位于。 GitHub

示例应用程序的代码位于examples目录中。

从示例应用程序点对点流式传输到 Amazon Web Services 管理控制台

  1. 使用 WebRTC 打开 Kinesis 视频流示例应用程序并完成以下操作：

    • Amazon Web Services 区域。例如，us-west-2。

    • 您的 IAM 用户或角色的 Amazon 访问密钥和私有密钥。如果您使用的是长期 Amazon 证书，请将会话令牌留空。

    • 要连接的信令通道的名称。

      如果要连接到新的信令信道，请选择 C reate Channel 以使用框中提供的值创建信令信道。

      注意

      您的信令信道名称对于当前账户和地区必须是唯一的。您可以使用字母、数字、下划线 (_) 和连字符 (-)，但不能使用空格。

    • 是发送音频、视频还是两者。

    • WebRTC 摄取和存储。展开该节点并选择以下选项之一：

      • 选择 “自动确定摄取模式” 。

      • 确保 “自动确定未选择摄取模式”，并将手动替代设置为 “关闭”。

        注意

        自动确定摄取模式让应用程序调用 DescribeMediaStorageConfiguration API 来确定在哪种模式下运行（Peer-to-peer 或 WebRTC 摄取）。这个额外的 API 调用稍微增加了启动时间。

        如果您提前知道该信令信道在哪种模式下运行，请使用手动替代来跳过此 API 调用。

    • ICE 候选人生成。保留STUN/TURN选中状态并保持Trickle ICE启用状态。

  2. 选择 Start Master 以连接到信令信道。

    如果需要，允许访问您的摄像头 and/or 麦克风。

  3. 在中打开 Kinesis Video Streams 控制台。 Amazon Web Services 管理控制台

    确保选择了正确的区域。

  4. 在左侧导航栏中，选择信令信道。

    选择上方信令信道的名称。如果需要，使用搜索栏。

  5. 展开 “媒体播放查看器” 部分。

  6. 选择视频播放器上的播放按钮。这将作为一个加入 WebRTC 会话。viewer

    在演示页面上发送的媒体应显示在 Amazon Web Services 管理控制台。

从示例应用程序点对点流式传输到示例应用程序

  1. 使用 WebRTC 打开 Kinesis 视频流示例应用程序并填写以下信息：

    • Amazon Web Services 区域。例如，us-west-2。

    • 您的 IAM 用户或角色的 Amazon 访问密钥和私有密钥。如果您使用的是长期 Amazon 证书，请将会话令牌留空。

    • 要连接的信令通道的名称。

      如果要连接到新的信令信道，请选择 C reate Channel 以使用框中提供的值创建信令信道。

      注意

      您的信令信道名称对于当前账户和地区必须是唯一的。您可以使用字母、数字、下划线 (_) 和连字符 (-)，但不能使用空格。

    • 是发送音频、视频还是两者。

    • WebRTC 摄取和存储。展开该节点并选择以下选项之一：

      • 选择 “自动确定摄取模式” 。

      • 确保 “自动确定未选择摄取模式”，并将手动替代设置为 “关闭”。

        注意

        自动确定摄取模式让应用程序调用 DescribeMediaStorageConfiguration API 来确定在哪种模式下运行（Peer-to-peer 或 WebRTC 摄取）。这个额外的 API 调用稍微增加了启动时间。

        如果您提前知道该信令信道在哪种模式下运行，请使用手动替代来跳过此 API 调用。

    • ICE 候选人生成。保留STUN/TURN选中状态并保持Trickle ICE启用状态。

  2. 选择 Start Master 以master角色连接到信令信道。

    如果需要，允许访问您的摄像头 and/or 麦克风。

  3. 打开另一个浏览器选项卡，打开 Kinesis Video Streams with WebRTC 示例应用程序。上次运行的所有信息都应加载。

  4. 向下滚动并选择 “启动查看器”，以viewer角色身份连接到信令信道。

    您应该看到master和之间正在交换媒体viewer。

使用 WebRTC Ingestion 从示例页面点对点流式传输到示例页面

  1. 按照步骤连接主参与者并确保其已连接到存储会话。

  2. 关注添加观众参与者。

    观众参与者将连接到存储会话并接收来自存储会话的媒体。他们可以将可选音频发送回存储会话。

    存储会话负责混合从主参与者和查看者参与者那里收到的媒体，并将其发送到相应的目的地。

  3. 您可以通过 Kinesis Video Streams 回放来查看和消费摄取的媒体。

编辑示例应用程序

要编辑 SDK 和示例应用程序以用于开发目的，请按照以下说明进行操作。

先决条件

NodeJS 版本 16+

注意

我们建议从https://nodejs.org/en/download下载最新的长期支持 (LTS) 版本。

编辑示例应用程序

  1. 在中下载带有 WebRTC SDK 的 Kinesis 视频流。 JavaScript

    在终端中键入以下内容：

    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://localhost3001/。

    您可以通过编辑examples目录中的文件来编辑网页。