快速跑通 Demo

本文主要介绍如何快速跑通腾讯云 TRTC Web demo。

前提条件

您已 注册腾讯云 账号，并完成 实名认证。

操作步骤

步骤1：创建新的应用

1. 登录实时音视频控制台，选择 开发辅助 > 快速跑通Demo。
2. 单击 新建应用 输入应用名称，例如 TestTRTC；若您已创建应用可单击 选择已有应用。
3. 根据实际业务需求添加或编辑标签，单击 创建。

注意：

• 应用名称只能包含数字、中英文字符和下划线，长度不能超过15个字符。
• 标签用于标识和组织您在腾讯云的各种资源。例如：企业可能有多个业务部门，每个部门有1个或多个 TRTC 应用，这时，企业可以通过给 TRTC 应用添加标签来标记部门信息。标签并非必选项，您可根据实际业务需求添加或编辑。

步骤2：下载 SDK 和 Demo 源码

1. 下载 Web 端 SDK 及配套的 Demo 源码。
2. 下载完成后，单击 “已下载，下一步”。

步骤3：获取 SDKAppId 和 密钥（SecretKey)

1. 进入修改配置页，获取 SDKAppID 和密钥。
2. 复制粘贴 SDKAppId 和 密钥（SecretKey）完成后，单击 已复制粘贴，下一步 即创建成功。

步骤4：运行 Demo

TRTC Web 目前提供以下几种基础 Demo，您可以选择您熟悉的项目框架进行运行体验：

1. base-js 为 TRTC Web 基础 Demo吗，集成了 TRTC Web SDK 的基础音视频通话、设备选择等功能，使用 jQuery 开发，可直接在浏览器中运行。快速体验可访问 base-js 在线体验地址。
2. quick-demo-js 为 TRTC Web 快速运行 Demo (原生 Js 版本)，集成了 TRTC Web SDK 的基础音视频通话、设备选择等功能，使用原生 Js 开发，可直接在浏览器中运行。快速体验可访问 quick-demo-js 在线体验地址。
3. quick-demo-vue2-js 为 TRTC Web 快速运行 Demo (Vue2 版本)，集成了 TRTC Web SDK 的基础音视频通话、设备选择等功能，使用 Vue2 + JavaScript 开发，需要您安装 Node 环境，按下方说明运行体验。快速体验可访问 quick-demo-vue2-js 在线体验地址。
4. quick-demo-vue3-ts 为 TRTC Web 快速运行 Demo (Vue3 版本)，集成了 TRTC Web SDK 的基础音视频通话、设备选择等功能，使用 Vue3 + TypeScript 开发，需要您安装 Node 环境，按下方说明运行体验。快速体验可访问 quick-demo-vue3-ts 在线体验地址。

注意：

• 本地体验 Demo 可以直接在本地搭建静态服务（本地计算机需要接入互联网），通过 http://localhost:端口 访问，打开两个页面即可进行通话。
• 部署到公网体验，需要通过 https://域名/xxx 访问，原因可参考文档页面访问协议限制说明。
• 目前桌面端 Chrome 浏览器支持 TRTC Web SDK 的相关特性比较完整，因此建议使用 Chrome 浏览器进行体验，参考文档浏览器兼容信息。

Demo 1：base-js

1. 在下载的源码中找到并打开 TRTC_Web/base-js/js/debug/GenerateTestUserSig.js 文件。

2. 设置 GenerateTestUserSig.js 文件中的相关参数：

   • SDKAPPID：默认为0，请设置为实际的 SDKAppID。
   • SECRETKEY：默认为空字符串，请设置为实际的密钥信息。
   

3. 运行 Demo

   使用 Chrome 浏览器打开 Demo 根目录下的 index.html 文件即可运行 Demo。 Demo 运行界面如图所示：

   

4. 功能体验

   • 单击 加入房间 加入音视频通话房间并且发布本地音视频流。 您可以打开多个页面，每个页面都单击 加入房间，正常情况下可以看到多个画面并模拟实时音视频通话。
   • 单击摄像头图标可以选择摄像头设备。
   • 单击麦克风图标可以选择麦克风设备。

   注意：

   WebRTC 需要使用摄像头和麦克风采集音视频，在体验过程中您可能会收到来自 Chrome 浏览器的相关提示，单击 允许。

   

Demo 2：quick-demo-js

1. 在下载的源码中找到并使用浏览器打开 TRTC_Web/quick-demo-js/index.html 文件。

   注意：

   TRTC Web SDK 支持的浏览器请参考：TRTC Web SDK 支持的平台;

   TRTC Web SDK 域名及端口白名单配置请参考：TRTC Web SDK 域名及端口白名单配置;

2. 在浏览器打开的页面中填写 步骤三 获取的 SDKAppId 和 SecretKey。

   

3. 功能体验

   • 点击【进入房间】按钮进入房间
   • 点击【发布流】按钮发布本地流
   • 点击【取消发布流】按钮取消发布本地流
   • 点击【离开房间】按钮离开房间
   • 点击【开始共享屏幕】按钮布屏幕分享流
   • 点击【停止共享屏幕】按钮取消发布屏幕分享流

4. 加入房间后您可以通过分享邀请链接与被邀请人一起体验 TRTC Web 语音及视频互通功能。

Demo 3：quick-demo-vue2-js

1. 在下载的源码中找到并进入到 TRTC_Web/quick-demo-vue2-js/ 目录下。

   cd quick-demo-vue2-js
   

2. 本地运行 Demo，在终端执行以下命令，将会自动安装依赖并运行 demo

   npm start
   

   默认浏览器会自动打开 http://localhost:8080/ 地址。

   注意：

   • 端口号以本地运行 Demo 之后的实际端口号为准，默认为 8080；
   • TRTC Web SDK 支持的浏览器请参考：TRTC Web SDK 支持的平台;
   • TRTC Web SDK 域名协议限制请参考：TRTC Web SDK 域名协议限制;
   • TRTC Web SDK 域名及端口白名单配置请参考：TRTC Web SDK 域名及端口白名单配置;

3. 在浏览器打开的页面中填写 步骤三 获取的 SDKAppId 和 SecretKey。

   

4. 功能体验

   • 点击【进入房间】按钮进入房间
   • 点击【发布流】按钮发布本地流
   • 点击【取消发布流】按钮取消发布本地流
   • 点击【离开房间】按钮离开房间
   • 点击【开始共享屏幕】按钮布屏幕分享流
   • 点击【停止共享屏幕】按钮取消发布屏幕分享流

5. 加入房间后您可以通过分享邀请链接与被邀请人一起体验 TRTC Web 语音及视频互通功能。

Demo 3：quick-demo-vue3-ts

1. 在下载的源码中找到并进入到 TRTC_Web/quick-demo-vue3-ts/ 目录下。

2. 本地运行 Demo

   npm start
   

   默认浏览器会自动打开 http://localhost:8080/ 地址。

   注意：

   • 端口号以本地运行 Demo 之后的实际端口号为准，默认为 8080；
   • TRTC Web SDK 支持的浏览器请参考：TRTC Web SDK 支持的平台;
   • TRTC Web SDK 域名协议限制请参考：TRTC Web SDK 域名协议限制;
   • TRTC Web SDK 域名及端口白名单配置请参考：TRTC Web SDK 域名及端口白名单配置;

3. 在浏览器打开的页面中填写 步骤三 获取的 SDKAppId 和 SecretKey。

   

4. 功能体验

   • 点击【进入房间】按钮进入房间
   • 点击【发布流】按钮发布本地流
   • 点击【取消发布流】按钮取消发布本地流
   • 点击【离开房间】按钮离开房间
   • 点击【开始共享屏幕】按钮布屏幕分享流
   • 点击【停止共享屏幕】按钮取消发布屏幕分享流

5. 加入房间后您可以通过分享邀请链接与被邀请人一起体验 TRTC Web 语音及视频互通功能。

注意：

• 本文使用的生成 UserSig 的方案是在客户端中配置 SECRETKEY，该方法中 SECRETKEY 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量，因此该方法仅适合本地跑通 Demo 和功能调试。
• 正确的 UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向 App 的接口，在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig。