Tutorial: 快速跑通 Demo

快速跑通 Demo

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

前提条件

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

操作步骤

步骤1:创建新的应用

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

img

注意:

  • 应用名称只能包含数字、中英文字符和下划线,长度不能超过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 基础 Demo 集成了 TRTC Web SDK 的基础音视频通话、设备选择等功能,使用 jQuery 开发,可直接在浏览器中运行。快速体验可访问 base-js 在线体验地址
  2. quick-demo-js 为 TRTC Web 快速运行 Demo (原生 Js 版本)。TRTC Web 快速运行 Demo (原生 Js 版本) 集成了 TRTC Web SDK 的基础音视频通话、设备选择等功能,使用原生 Js 开发,可直接在浏览器中运行。快速体验可访问 quick-demo-js 在线体验地址
  3. quick-demo-vue2-js 为 TRTC Web 快速运行 Demo (Vue2 版本)。TRTC Web 快速运行 Demo (Vue2 版本) 集成了 TRTC Web SDK 的基础音视频通话、设备选择等功能,使用 Vue2 开发,需要您安装 Node 环境。快速体验可访问 quick-demo-vue2-js 在线体验地址
  4. quick-demo-vue3-ts 为 TRTC Web 快速运行 Demo (Vue3 版本)。TRTC Web 快速运行 Demo (Vue3 版本) 集成了 TRTC Web SDK 的基础音视频通话、设备选择等功能,使用 Vue3 开发,需要您安装 Node 环境。快速体验可访问 quick-demo-vue3-ts 在线体验地址

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 需要部署至服务器,通过 https://域名/xxx 访问,或者直接在本地搭建服务器,通过 localhost:端口 访问。
    • 目前桌面端 Chrome 浏览器支持 TRTC Web SDK 的相关特性比较完整,因此建议使用 Chrome 浏览器进行体验。

    Demo 运行界面如图所示:

    img

  4. 功能体验

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

    注意:

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

    img

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/ 目录下。

  2. 本地运行 Demo

    npm start
    

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

    注意:

  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/ 地址。

    注意:

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

  4. 功能体验

    • 点击【进入房间】按钮进入房间
    • 点击【发布流】按钮发布本地流
    • 点击【取消发布流】按钮取消发布本地流
    • 点击【离开房间】按钮离开房间
    • 点击【开始共享屏幕】按钮布屏幕分享流
    • 点击【停止共享屏幕】按钮取消发布屏幕分享流
  5. 加入房间后您可以通过分享邀请链接与被邀请人一起体验 TRTC Web 语音及视频互通功能。

注意:

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