快速集成(Web)

最后更新时间:2021-08-17 09:52:51

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

    支持的平台

    WebRTC 技术由 Google 最先提出,目前主要在桌面版 Chrome 浏览器、桌面版 Edge 浏览器、桌面版 Firefox 浏览器、桌面版 Safari 浏览器以及移动版的 Safari 浏览器上有较为完整的支持,其他平台(例如 Android 平台的浏览器)支持情况均比较差。

    • 如果您的应用场景主要为教育场景,那么教师端推荐使用稳定性更好的 Electron 解决方案,支持大小双路画面,更灵活的屏幕分享方案以及更强大的弱网络恢复能力。
    操作系统 浏览器类型浏览器最低
    版本要求
    接收(播放)发送(上麦)屏幕分享SDK 版本要求
    Mac OS 桌面版 Safari 浏览器 11+ 支持 支持 支持(需要 Safari13+ 版本) -
    桌面版 Chrome 浏览器 56+ 支持 支持 支持(需要 Chrome72+ 版本) -
    桌面版 Firefox 浏览器 56+ 支持 支持 支持(需要 Firefox66+ 版本) v4.7.0+
    桌面版 Edge 浏览器 80+ 支持 支持 支持 v4.7.0+
    Windows 桌面版 Chrome 浏览器 56+ 支持 支持 支持(需要 Chrome72+ 版本) -
    桌面版 QQ 浏览器(极速内核) 10.4+ 支持 支持 不支持 -
    桌面版 Firefox 浏览器 56+ 支持 支持 支持(需要 Firefox66+ 版本) v4.7.0+
    桌面版 Edge 浏览器 80+ 支持 支持 支持 v4.7.0+
    iOS 11.1.2+ 移动版 Safari 浏览器 11+ 支持 支持 不支持 -
    iOS 12.1.4+ 微信内嵌网页 - 支持 不支持 不支持 -
    iOS 14.3+ 微信内嵌网页 6.5+(微信版本) 支持 支持 不支持 -
    Android 移动版 QQ 浏览器 - 不支持 不支持 不支持 -
    移动版 UC 浏览器 - 不支持 不支持 不支持 -
    微信内嵌网页(TBS 内核) - 支持 支持 不支持 -
    微信内嵌网页(XWEB 内核) - 支持 支持 不支持 -
    注意:

    • 您可以在浏览器中打开 WebRTC 能力测试 页面进行检测是否完整支持 WebRTC。例如公众号等浏览器环境。
    • 由于 H.264 版权限制,华为系统的 Chrome 浏览器和以 Chrome WebView 为内核的浏览器均不支持 TRTC 桌面浏览器 SDK 的正常运行。

    防火墙限制

    TRTC 桌面浏览器 SDK 依赖以下端口和域名进行数据传输,请将其加入防火墙白名单。

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

    集成 TRTC 桌面浏览器 SDK

    NPM 集成

    您需要在项目中使用 npm 安装 SDK 包。

    npm install trtc-js-sdk --save
    

    在项目脚本里引入模块。

    import TRTC from 'trtc-js-sdk';
    

    Script 集成

    您只需要在您的 Web 页面中添加如下代码即可:

    <script src="trtc.js"></script>
    

    相关资源

    SDK 下载地址:单击下载

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

    功能 Sample Code 指引
    基础音视频通话 指引链接
    互动直播 指引链接
    切换摄像头和麦克风 指引链接
    设置本地视频属性 指引链接
    动态关闭打开本地音频或视频 指引链接
    屏幕分享 指引链接
    音量大小检测 指引链接
    自定义采集与自定义播放渲染 指引链接
    房间内上行用户个数限制 指引链接
    背景音乐和音效实现方案 指引链接