twilio-video.js
[!警告]
我们不再允许新客户加入Twilio Video。自2026年12月5日起,Twilio Video将结束生命周期(EOL),并停止为所有客户提供服务。客户可以选择转换到任何视频提供商,但我们建议客户迁移到Zoom Video SDK,我们已准备了迁移指南。关于此EOL的更多信息可在我们的帮助中心此处查看。
twilio-video.js允许您在Web应用中添加实时语音和视频功能。
我们需要您的反馈! 请随时为改进建议或功能请求开启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的应用
开发者工具
贡献
欢迎修复bug!如果你不熟悉GitHub的拉取请求/贡献流程, 这是一个很好的教程。
许可
参见LICENSE.md。