本文主要介绍如何快速运行腾讯云 TRTC Web SDK Demo。 ## 支持的平台 WebRTC 技术由 Google 最先提出,目前主要在桌面版 Chrome 浏览器、桌面版 Safari 浏览器以及移动版的 Safari 浏览器上有较为完整的支持,其他平台(例如 Android 平台的浏览器)支持情况均比较差。 - 在移动端推荐使用 [小程序](https://cloud.tencent.com/document/product/647/32399) 解决方案,微信和手机 QQ 小程序均已支持,都是由各平台的 Native 技术实现,音视频性能更好,且针对主流手机品牌进行了定向适配。 - 如果您的应用场景主要为教育场景,那么教师端推荐使用稳定性更好的 [Electron](https://cloud.tencent.com/document/product/647/38549) 解决方案,支持大小双路画面,更灵活的屏幕分享方案以及更强大而弱网络恢复能力。 | 操作系统 | 浏览器类型 | 浏览器最低版本要求 | 接收(播放) | 发送(上麦) | 屏幕分享 | | :------: | :------------------: | :----------------: | :----------: | :----------: | :-----------------------: | | Mac OS | 桌面版 Safari 浏览器 | 11+ | 支持 | 支持 | 不支持 | | Mac OS | 桌面版 Chrome 浏览器 | 56+ | 支持 | 支持 | 支持(需要chrome72+版本) | | Windows | 桌面版 Chrome 浏览器 | 56+ | 支持 | 支持 | 支持(需要chrome72+版本) | | Windows | 桌面版 QQ 浏览器 | 10.4 | 支持 | 支持 | 不支持 | | iOS | 移动版 Safari 浏览器 | 11.1.2 | 支持 | 支持 | 不支持 | | iOS | 微信内嵌网页 | 12.1.4 | 支持 | 不支持 | 不支持 | | Android | 移动版 QQ 浏览器 | - | 不支持 | 不支持 | 不支持 | | Android | 移动版 UC 浏览器 | - | 不支持 | 不支持 | 不支持 | | Android | 微信内嵌网页 | - | 不支持 | 不支持 | 不支持 | >! >- 您可以在浏览器中打开 [WebRTC 能力测试](https://www.qcloudtrtc.com/webrtc-samples/abilitytest/index.html) 页面进行检测是否完整支持 WebRTC。例如公众号等浏览器环境。 >- 由于 H.264 版权限制,华为系统的 Chrome 浏览器和以 Chrome WebView 为内核的浏览器均不支持 TRTC 的 Web 版 SDK 的正常运行。 ## 环境要求 - 请使用最新版本的 Chrome 浏览器。 - TRTC Web SDK 依赖以下端口进行数据传输,请将其加入防火墙白名单,配置完成后,您可以通过访问并体验 [官网 Demo](https://trtc-1252463788.file.myqcloud.com/web/demo/official-demo/index.html) 检查配置是否生效。 - TCP 端口:8687 - UDP 端口:8000;8080;8800;843;443;16285 - 域名:qcloud.rtc.qq.com ## 前提条件 您已 [注册腾讯云](https://cloud.tencent.com/document/product/378/17985) 账号,并完成 [实名认证](https://cloud.tencent.com/document/product/378/3629)。 ## 操作步骤 ### 步骤1:创建新的应用 1. 登录实时音视频控制台,选择【开发辅助】>【[快速跑通Demo](https://console.cloud.tencent.com/trtc/quickstart)】。 2. 单击【立即开始】,输入应用名称,例如`TestTRTC`,单击【创建应用】。 ### 步骤2:下载 SDK 和 Demo 源码 1. 鼠标移动至对应卡片,单击【[Github](https://github.com/tencentyun/TRTCSDK/tree/master/Web/TRTCSimpleDemo)】跳转至 Github(或单击【[ZIP](https://liteavsdk-1252463788.cos.ap-guangzhou.myqcloud.com/H5_latest.zip?_ga=1.195966252.185644906.1567570704)】),下载相关 SDK 及配套的 Demo 源码。 ![](https://main.qcloudimg.com/raw/0f35fe3bafe9fcdbd7cc73f991984d1a.png) 2. 下载完成后,返回实时音视频控制台,单击【我已下载,下一步】,可以查看 SDKAppID 和密钥信息。 ### 步骤3:配置 Demo 工程文件 1. 解压 [步骤2](#step2) 中下载的源码包。 2. 找到并打开`Web/TRTCSimpleDemo/js/debug/GenerateTestUserSig.js`文件。 3. 设置`GenerateTestUserSig.js`文件中的相关参数: