填写文档满意度调查问卷,赢取缤纷好礼> HOT

Web

最近更新时间:2022-06-02 10:31:30

本文主要介绍如何快速地将腾讯云 TRTC Web SDK 集成到您的项目中。

准备工作

集成 TRTC Web SDK 之前需要了解的事项。

支持的平台

TRTC Web SDK 基于 WebRTC 实现,目前支持桌面端和移动端的主流浏览器,详细支持度表格请参见 支持的平台
如果您的应用场景不在支持的表格里,可以打开 TRTC Web SDK 能力检测页面 检测当前环境是否支持 WebRTC 所有能力,例如 WebView 等环境。

URL 域名协议限制

由于浏览器安全策略的限制,使用 WebRTC 能力对页面的访问协议有严格的要求,请参照以下表格进行开发和部署应用。

应用场景 协议 接收(播放) 发送(上麦) 屏幕分享 备注
生产环境 HTTPS 协议 支持 支持 支持 推荐
生产环境 HTTP 协议 支持 不支持 不支持
本地开发环境 http://localhost 支持 支持 支持 推荐
本地开发环境 http://127.0.0.1 支持 支持 支持
本地开发环境 http://[本机IP] 支持 不支持 不支持
本地开发环境 file:/// 支持 支持 支持

防火墙限制

TRTC Web SDK 依赖以下端口及域名进行数据传输,请将其加入防火墙白名单。配置完成后,您可以通过访问并体验 官网 Demo 检查配置是否生效。具体请参见 应对防火墙限制相关

  • TCP 端口:8687
  • UDP 端口:8000,8080,8800,843,443,16285
  • 域名:*.rtc.qq.comyun.tim.qq.com

开始集成

SDK 提供了 UMD、ES Module 类型的模块,以及 TypeScript Type Definition 文件,满足在不同类型项目中集成。

NPM 集成

  1. 您需要在项目中使用 npm 安装 trtc-js-sdk 包。
    npm install trtc-js-sdk --save
  2. 在项目脚本里引入模块。
    import TRTC from 'trtc-js-sdk';

Script 集成

  1. 在您的 Web 页面中添加如下代码即可:
    <script src="trtc.js"></script>
  2. 在脚本中通过 TRTC 命名空间访问 API。
    const client = TRTC.createClient({...});

资源下载

详细指引

更详细的初始化流程和 API 使用介绍请参见以下指引:

功能 Sample Code 指引
基础音视频通话 指引链接
实现互动直播连麦 指引链接
切换摄像头和麦克风 指引链接
设置本地视频属性 指引链接
动态关闭打开本地音频或视频 指引链接
屏幕分享 指引链接
音量大小检测 指引链接
自定义采集与自定义播放渲染 指引链接
房间内上行用户个数限制 指引链接
背景音乐和音效实现方案 指引链接
通话前环境与设备检测 指引链接
通话前的网络质量检测 指引链接
检测设备插拔行为 指引链接
实现推流到 CDN 指引链接
开启大小流传输 指引链接
开启美颜 指引链接
开启水印 指引链接
实现跨房连麦 指引链接
实现云端混流 指引链接
实现云端录制 指引链接
实现语音识别 指引链接
说明:

目录