- 动态与公告
- 新手指引
- 产品简介
- 购买指南
- Demo 体验
- SDK 下载
- 含 UI 集成方案
- 无 UI 集成方案
- 高级功能
- 代码示例
- 客户端 API
- 服务端 API
- 控制台指南
- 常见问题
- 旧版文档
- 服务协议
- TRTC 政策
- 词汇表
- 动态与公告
- 新手指引
- 产品简介
- 购买指南
- Demo 体验
- SDK 下载
- 含 UI 集成方案
- 无 UI 集成方案
- 高级功能
- 代码示例
- 客户端 API
- 服务端 API
- 控制台指南
- 常见问题
- 旧版文档
- 服务协议
- TRTC 政策
- 词汇表
本文主要介绍如何快速运行腾讯云 TRTC Web SDK Demo。
前提条件
操作步骤
步骤1：创建新的应用
步骤2：获取 SDKAppID 和 SecretKey
在应用创建成功后，您可以在基础信息中获取到您的 SDKAppId 和 SecretKey，体验 Demo 需要用到这两个信息。
步骤3：运行 Demo
1. 运行在线 Demo
TRTC Web 目前提供以下几种基础 Demo，您可以选择您熟悉的项目框架进行运行体验：
1.1 quick-demo-js 是使用 Javascript 开发的 Demo。 源码：github。
1.2 quick-demo-vue2-js 是使用 Vue2 + Javascript 开发的 Demo。源码：github。
1.3 quick-demo-vue3-ts 是使用 Vue3 + Typescript 开发的 Demo。源码：github。
2. 运行本地 Demo
2.2 按下述指引运行本地 Demo。
1. 在下载的源码中找到并使用浏览器打开
TRTC_Web/v5/quick-demo-js/index.html 文件。2. 在浏览器打开的页面中填写 步骤2 获取的 SDKAppId 和 SecretKey
3. 功能体验
点击【Enter Room】按钮进入房间
点击【Start Local Audio/Video】按钮，可采集麦克风或摄像头
点击【Stop Local Audio/Video】按钮，可终止采集麦克风或摄像头
点击【Start Share Screen】按钮开始屏幕分享
点击【Stop Share Screen】按钮取消屏幕分享
4. 加入房间后您可以通过分享邀请链接与被邀请人一起体验 TRTC Web 语音及视频互通功能。
1. 在下载的源码中找到并进入到
TRTC_Web/v5/quick-demo-vue2-js/ 目录下。cd quick-demo-vue2-js
2. 本地运行 Demo，在终端执行以下命令，将会自动安装依赖并运行 demo。
npm start
3. 默认浏览器会自动打开
http://localhost:8080/ 地址。4. 在浏览器打开的页面中填写 步骤2 获取的 SDKAppId 和 SecretKey
5. 功能体验
点击【进入房间】按钮进入房间
点击【采集麦克风/摄像头】按钮，可采集麦克风或摄像头
点击【终止采集麦克风/摄像头】按钮，可终止采集麦克风或摄像头
点击【开始共享屏幕】按钮开始屏幕分享
点击【停止共享屏幕】按钮取消屏幕分享
6. 加入房间后您可以通过分享邀请链接与被邀请人一起体验 TRTC Web 语音及视频互通功能。
1. 在下载的源码中找到并进入到
TRTC_Web/v5/quick-demo-vue3-ts/ 目录下。2. 本地运行 Demo，在终端执行以下命令，将会自动安装依赖并运行 demo。
npm start
3. 默认浏览器会自动打开
http://localhost:3000/ 地址。4. 在浏览器打开的页面中填写 步骤2 获取的 SDKAppId 和 SecretKey。
5. 功能体验
输入 userId 和 roomId
点击【Enter Room】按钮进入房间
点击【Start Local Audio/Video】按钮，可采集麦克风或摄像头
点击【Stop Local Audio/Video】按钮，可终止采集麦克风或摄像头
点击【Start Share Screen】按钮开始屏幕分享
点击【Stop Share Screen】按钮取消屏幕分享
6. 加入房间后您可以通过分享邀请链接与被邀请人一起体验 TRTC Web 语音及视频互通功能。
注意：
若要将 Demo 部署到公网体验，需要通过 HTTPS 协议，即 https://域名/xxx 访问，原因可参考文档页面访问协议限制说明。
本文使用的生成 UserSig 的方案是在客户端中配置 SecretKey，该方法中 SecretKey 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量，因此该方法仅适合本地跑通 Demo 和功能调试。
正确的 UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向 App 的接口，在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig。
常见问题
支持的平台
URL 域名协议限制
由于浏览器安全策略的限制，使用 WebRTC 能力对页面的访问协议有严格的要求，请参照以下表格进行开发和部署应用。
应用场景 | 协议 | 接收（播放） | 发送（上麦） | 屏幕分享 | 备注 |
生产环境 | HTTPS 协议 | 支持 | 支持 | 支持 | 推荐 |
生产环境 | HTTP 协议 | 支持 | 不支持 | 不支持 | - |
本地开发环境 | http://localhost | 支持 | 支持 | 支持 | 推荐 |
本地开发环境 | http://127.0.0.1 | 支持 | 支持 | 支持 | - |
本地开发环境 | http://[本机IP] | 支持 | 不支持 | 不支持 | - |
本地开发环境 | file:/// | 支持 | 支持 | 支持 | - |
防火墙限制
其他
是
否
本页内容是否解决了您的问题？