twilio-video.js

[!警告]
我们不再允许新客户加入Twilio Video。自2026年12月5日起，Twilio Video将结束生命周期（EOL），并停止为所有客户提供服务。客户可以选择转换到任何视频提供商，但我们建议客户迁移到Zoom Video SDK，我们已准备了迁移指南。关于此EOL的更多信息可在我们的帮助中心此处查看。

twilio-video.js允许您在Web应用中添加实时语音和视频功能。

• API文档
• 最佳实践指南
• 常见问题
• 快速入门和示例
• 基于React的多方视频应用

我们需要您的反馈！ 请随时为改进建议或功能请求开启GitHub问题。如果您需要技术支持，请联系help@twilio.com。

更新日志

查看CHANGELOG.md了解我们的发布详情。

浏览器支持

	Chrome	Edge (Chromium)	Firefox	Safari	WebView
Android	✓	-	✓	-	-
iOS	✓	-	*	✓	✓
Linux	✓	-	✓	-	-
macOS	✓	✓ **	✓	✓	-
Windows	✓	✓ **	✓	-	-

** twilio-video.js支持基于Chromium的Edge浏览器。

安装

NPM

npm install twilio-video --save

使用此方法，您可以像这样require twilio-video.js：

const Video = require('twilio-video');

现在可以使用此方法导入TypeScript定义。

import * as Video from 'twilio-video';

function participantDisconnected(participant: Video.RemoteParticipant) {
  console.log('参与者"%s"已断开连接', participant.identity);
  document.getElementById(participant.sid).remove();
}

或者，您可以只导入所需的定义，如下所示：

import { RemoteParticiant } from 'twilio-video';

function participantDisconnected(participant: RemoteParticipant) {
  console.log('参与者"%s"已断开连接', participant.identity);
  document.getElementById(participant.sid).remove();
}

CDN

twilio-video.js的发布版本托管在CDN上，您可以使用<script>标签直接在Web应用中包含这些版本。

<script src="//sdk.twilio.com/js/video/releases/2.28.1/twilio-video.min.js"></script>

使用此方法，twilio-video.js将设置一个浏览器全局变量：

const Video = Twilio.Video;

用法

以下是连接到房间的简单示例。更多信息，请参阅API文档。

const Video = require('twilio-video');

Video.connect('$TOKEN', { name: 'room-name' }).then(room => {
  console.log('已连接到房间"%s"', room.name);

  room.participants.forEach(participantConnected);
  room.on('participantConnected', participantConnected);

  room.on('participantDisconnected', participantDisconnected);
  room.once('disconnected', error => room.participants.forEach(participantDisconnected));
});

function participantConnected(participant) {
  console.log('参与者"%s"已连接', participant.identity);

  const div = document.createElement('div');
  div.id = participant.sid;
  div.innerText = participant.identity;

  participant.on('trackSubscribed', track => trackSubscribed(div, track));
  participant.on('trackUnsubscribed', trackUnsubscribed);
participant.tracks.forEach(publication => {
  if (publication.isSubscribed) {
    trackSubscribed(div, publication.track);
  }
});

document.body.appendChild(div);
}

function participantDisconnected(participant) {
  console.log('参与者"%s"已断开连接', participant.identity);
  document.getElementById(participant.sid).remove();
}

function trackSubscribed(div, track) {
  div.appendChild(track.attach());
}

function trackUnsubscribed(track) {
  track.detach().forEach(element => element.remove());
}

内容安全策略 (CSP)

想要以兼容twilio-video.js的方式启用CSP吗？使用以下策略指令：

connect-src wss://global.vss.twilio.com wss://sdkgw.us1.twilio.com
media-src mediastream:

如果你从sdk.twilio.com加载twilio-video.js， 你还应该包含以下script-src指令：

script-src https://sdk.twilio.com

如果你为本地音频启用了Krisp噪音消除， 并且你使用了以下default-src self指令，你还应该添加unsafe-eval指令：

default-src self unsafe-eval

请记住，如果你使用其他服务，可能需要将这些策略指令与你自己的指令合并。

构建

fork并克隆仓库。然后，使用以下命令安装依赖：

npm install

然后运行build脚本：

npm run build

构建和文档将放置在dist/目录中。

测试

运行单元测试：

npm run test:unit

运行集成测试：

ACCOUNT_SID=<你的账户sid> \
API_KEY_SID=<你的API密钥sid> \
API_KEY_SECRET=<你的API密钥secret> \
BROWSER=<你想使用的浏览器> \
npm run test:integration

你可以添加这些可选变量来控制集成测试的执行：

• Topology：决定要测试哪种类型的房间。
• Debug：获取更好的源代码映射，并且浏览器在测试运行后不会关闭，这允许你轻松地逐步调试代码。
• Test Files：允许你将测试限制在一个文件中。

TOPOLOGY=<peer-to-peer|group>
DEBUG=1
TEST_FILES=<文件路径>

提示

• 使用预提交钩子：我们有一些有用的预提交钩子，可以帮助在提交前识别常见错误。通过执行以下命令使用它们：

ln -s ../../pre-commit.sh .git/hooks/pre-commit

相关

使用twilio-video.js的应用

• Twilio Video React应用
• Twilio Video Javascript快速入门
• Twilio Video诊断应用

开发者工具

• Twilio Video处理器
• Twilio Video房间监视器
• Twilio RTC诊断SDK

贡献

欢迎修复bug！如果你不熟悉GitHub的拉取请求/贡献流程， 这是一个很好的教程。

许可

参见LICENSE.md。