微信小程序基于 ArRTC SDK 实现音视频通话的基本流程

497 阅读2分钟

前提条件

在使用 anyrtc Web SDK 之前,你需要:

项目配置合法域名

前往小程序管理后台 ,找到「开发」 - 「开发设置」 - 「服务器域名」,点击修改,按照下方的域名进行设置并提交保存,注意事项请参考这里

// request合法域名
https://wtgw.agrtc.cn
// socket合法域名
wss://wtnode.agrtc.cn

注意:

  • 上线必须设置,否则请求会被微信拦截
  • 项目测试阶段可以在「项目设置」中勾选 不校验合法域名、web-view(业务域名)、TLS版本以及 HTTPS 证书

初始化客户端对象

"appid是在控制台创建的项目里面的appid,不是小程序appid,请注意区分!

 // 初始化
 var ArRTC = require('../../utils/ArRTCMiniapp@latest');
 var client = new ArRTC.client();
 client.init(appId, () => {

 }, () => {

 });

加入频道

token: string, channel: string, uid: number 以上就是join对应的三个参数

 client.join(undefined, "123456", Math.ceil(Math.random()*Math.pow(10, 6)), (uid) => {

 }, () => {

 });

发布本地音视频流

本方法需要结合 live-pusher 组件一起使用,详情请参考微信官方文档

 client.publish("all", (url) => {
     // 拿到推流地址,传入 live-pusher 组件进行推流
 }, () => {

 });

监听远程用户发布媒体流

 client.on('stream-added', function (evt) { 
     const { uid } = evt;
     // Your code.
 });

订阅远端音视频流

订阅成功将拉流地址传入 live-player 组件进行拉流,组件mode需要设置为 rtc。 详情请参考微信官方文档

 client.subscribe("远端用户的ID", (url) => {
     // 订阅成功将拉流地址传入 live-player 组件进行拉流
 }, () => {

 });

demo体验

扫描下方小程序码亲自体验,了解更多细节请移步 github, 感谢阅读本篇文章;