RTC 提供一个开源的实时音视频通话示例工程:RTC 产品化快速开始 Demo,本文介绍如何快速跑通 Demo。基于该项目你可以体验 RTC 的通话效果,通过阅读源码了解简单音视频通话的最佳实践。
开始前,请确保你的开发环境满足如下条件:
调试 RTC 微信小程序 Demo 过程中,需要使用小程序的 live-pusher 和 live-player 功能标签,用于支持音视频上行和下行(播放)能力,目前微信只向特定行业的认证企业账号开放这两个标签的使用。
申请临时 Token 后,你应记录下申请时的房间 ID,用户 ID 和对应生成的临时 Token,以供后续配置环境和加入房间时使用。
参考 RTC 接入指南获取 AppId。
参看 获取临时 Token 获取 Token。
你至少需要获取两个 UserId 对应的 Token,以便用于推流和拉流。
临时 Token 仅用于测试或跑通 Demo,你可以通过阅读 密钥说明 了解更多 Token 相关。
进入微信公众平台 -> 【</> 开发】 -> 【接口设置】,打开 实时播放音视频流 和 实时录制音视频流 的开关。
进入微信公众平台 -> 【</> 开发】 -> 【开发设置】,将如下域名配到服务器域名里
https://common.rtc.volcvideo.com; https://common-hl.rtc.volcvideo.com; https://log.snssdk.com;
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;
打开 ../utils/config.ts
文件,更新 Config
字段。
const config = { appId: 'YourAppId', roomId: 'YourRoomId', token: { YourUserId: 'YourToken', // "test_user1": "test_tokenxxxxxxxxx" YourUserId2: 'YourToken2', // "test_user2": "test_token2xxxxxxxxx" }, };
参考如下步骤在微信开发者工具中运行小程序示例项目。
打开微信开发者工具,选择 Project > Import Project
,导入你下载的小程序文件夹。
在弹出的界面中选择导入项目页签,然后在目录一栏中选中小程序示例项目在本地的存储路径,使用你的微信小程序的 App ID 替换 YOUR_MiniApp_AppId
,然后点击导入。
加载成功后,微信开发者工具上会出现小程序示例项目的界面。为保证体验效果,我们建议选择真机调试。点击右上角的真机调试,工具界面会出现一个真机调试的二维码。
使用移动端微信 App 扫描二维码,进入手机调试界面。填入房间 ID,然后点击【进入房间】,即可在小程序的界面看到本地的视频画面。
请确保此处填入的房间 ID,和生成临时 Token 时填入的 roomID 是一致的。
为更好地体验实时音视频互动效果,你可以邀请一位朋友使用另一台设备运行该示例项目(需确保两个设备配置示例项目时填入的 App ID 和 AppKey 一致)。当你们输入相同的房间名加入房间后,即可在同一房间中体验音视频通话。