You need to enable JavaScript to run this app.
导航
微信小程序
最近更新时间:2024.07.09 19:36:56首次发布时间:2023.05.09 10:23:57

RTC 提供一个开源的实时音视频通话示例工程:RTC 产品化快速开始 Demo,本文介绍如何快速跑通 Demo。基于该项目你可以体验 RTC 的通话效果,通过阅读源码了解简单音视频通话的最佳实践。

前提条件

开始前,请确保你的开发环境满足如下条件:

  • 一个经过企业认证的微信小程序账号

调试 RTC 微信小程序 Demo 过程中,需要使用小程序的 live-pusherlive-player 功能标签,用于支持音视频上行和下行(播放)能力,目前微信只向特定行业的认证企业账号开放这两个标签的使用。

步骤1:获取 AppId 和临时 Token

申请临时 Token 后,你应记录下申请时的房间 ID,用户 ID 和对应生成的临时 Token,以供后续配置环境和加入房间时使用。

  1. 参考 RTC 接入指南获取 AppId。

  2. 参看 获取临时 Token 获取 Token。
    你至少需要获取两个 UserId 对应的 Token,以便用于推流和拉流。
    临时 Token 仅用于测试或跑通 Demo,你可以通过阅读 密钥说明 了解更多 Token 相关。

步骤2:开通小程序组件权限

进入微信公众平台 -> 【</> 开发】 -> 【接口设置】,打开 实时播放音视频流实时录制音视频流 的开关。
alt

步骤3:配置服务器域名

进入微信公众平台 -> 【</> 开发】 -> 【开发设置】,将如下域名配到服务器域名里
alt

  • request 合法域名:以 https 开头的域名
https://common.rtc.volcvideo.com;
https://common-hl.rtc.volcvideo.com;
https://log.snssdk.com;
  • socket 合法域名:以 wss 开头的域名
wss://ws.rtc.volcvideo.com;
wss://ws-hl.rtc.volcvideo.com;
wss://ws-ag-agsxxa.rtc.volcvideo.com;
wss://ws-ag-aghbwh.rtc.volcvideo.com;
wss://ws-ag-agsdqd.rtc.volcvideo.com;
wss://ws-ag-agjsnj.rtc.volcvideo.com;
wss://ws-ag-aggdsz.rtc.volcvideo.com;
步骤4:配置示例项目

打开 ../utils/config.ts 文件,更新 Config 字段。

const config = {
  appId: 'YourAppId',
  roomId: 'YourRoomId',
  token: {
    YourUserId: 'YourToken', // "test_user1": "test_tokenxxxxxxxxx"
    YourUserId2: 'YourToken2', // "test_user2": "test_token2xxxxxxxxx"
  },
};
步骤5:运行示例项目

参考如下步骤在微信开发者工具中运行小程序示例项目。

  1. 打开微信开发者工具,选择 Project > Import Project,导入你下载的小程序文件夹。
    alt

  2. 在弹出的界面中选择导入项目页签,然后在目录一栏中选中小程序示例项目在本地的存储路径,使用你的微信小程序的 App ID 替换 YOUR_MiniApp_AppId,然后点击导入
    alt

  3. 加载成功后,微信开发者工具上会出现小程序示例项目的界面。为保证体验效果,我们建议选择真机调试。点击右上角的真机调试,工具界面会出现一个真机调试的二维码。

  4. 使用移动端微信 App 扫描二维码,进入手机调试界面。填入房间 ID,然后点击【进入房间】,即可在小程序的界面看到本地的视频画面。

请确保此处填入的房间 ID,和生成临时 Token 时填入的 roomID 是一致的。