1、申请开通功能接口
目前暂只针对国内主体如下类目的小程序开放,需要先通过类目审核,再在小程序管理后台,「开发」-「开发管理」-「接口设置」中自助开通该接口权限。
支持的服务类目:
在这里插入图片描述
在微信公众股平台开通服务:
在这里插入图片描述

2、购买服务
这个音视频通话的功能微信官方是要付费的,有一个基础款(0元,1000次/月),这个按次收费的作为调研的试用版,上线按需购买,购买地址 微信服务市场
在这里插入图片描述
购买成功之后,授权指定的小程序就可以了。
3、功能分析
音视频对话的功能有多种,双人的和多人的,在我们的项目中,主要实现双人通话功能,实现双人通话的基础要有两个唯一的标识,这种标识微信提供了一个openid作为小程序里面的唯一标识,有这两个标识就可以实现音视频对话的对接。
要在实际应用中可以拿到对方的openid,可以实现的思路就是加好友,用户登录了之后会有一个固定的id,把这个id和openid绑定,加上好友的双方就可以拿到对方的openid,作为基础功能调研,我在小程序界面做了一个openid的获取和对方openid的输入,得到这两个openid就可以播视频电话了。
在这里插入图片描述
4、功能实现
前端在没有登录的时候是不能开启视频通话的,做一个按钮登录获取发起方的openid,使用wx.login获得openid;
代码如下:

wx.login({
        success(res) {
          console.log(res)
          if (res.code) {
            console.log(res, 'res')
            let url = `https://api.weixin.qq.com/sns/jscode2session?appid=${that.data.appId}&secret=${that.data.secret}&js_code=${res.code}&grant_type=authorization_code`
            console.log(url)
            wx.request({
              url: url,
              success: (res) => {
                console.log(res);
                that.setData({
                  openId: res.data.openid
                })
                console.log('openId', res.data.openid);
              }
            })
          }
        }
      })

通过 wx.login 接口获得临时登录凭证 code 后传到开发者服务器调用此接口完成登录流程。
请求地址
https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
在这里插入图片描述
注意:微信官方是禁止代码里面有明文的appid和secret出现的,我这儿做的是体验版,就写在代码里面了,上线版本应该从后端获取或者以其他方式获取。
获取到openid后复制发给另一个用户,当有两个openid(一个是自己的【呼叫方】,另一个是被呼叫方的【接听方】)的时候,就可以开启视频通话了。
wx.join1v1Chat的listener(接收方)和caller(呼叫方)的openid是全小写,不要用驼峰命名。

5、真机调试
视频通话在开发工具上调用会报20001的错,当两个用户都登录了小程序之后,手机上开启视频成功。
注意:接收方和呼叫方都必须授权麦克风和摄像头;
被呼叫方应该登录小程序,并且小程序处于运行中;

在这里插入图片描述
最后贴上完整代码:
wxml:

<view class="video-page">
<!-- 
  t-divider和t-input是引入tdesign框架的 在json里面导入就可以
      "usingComponents": {
      "t-divider": "tdesign-miniprogram/divider/divider",
      "t-input": "tdesign-miniprogram/input/input"
    }
 -->
  <t-divider dashed content="请输入对方的openId" align="left" />
  <t-input placeholder="openId"  model:value="{{otherOpenId}}"/>
  <view class="video-div" wx:if="{{openId == null}}" catch:tap="getLogin">立即登录</view>
  <view class="video-div" wx:else catch:tap="openVideo"> 开启通话 </view>
  <t-divider dashed content="我自己的openId" wx:if="{{openId != null}}" align="left" />
  <view class="video-div my-openId" wx:if="{{openId != null}}">
    <text>{{openId}}</text>
    <button mini catch:tap="copyText">复制</button>
  </view>
</view>

js:

Component({
  data: {
    appId: '********', // 填自己小程序的appid
    secret: '*******', // 小程序秘钥
    otherOpenId: null, // 接听方openid
    openId: null, // 这里保存自己的openId
  },
  methods: {
    copyText(e) {
      let key = this.data.openId;
      wx.setClipboardData({ //设置系统剪贴板的内容
        data: key,
        success(res) {
          console.log(res, key);
          wx.getClipboardData({ // 获取系统剪贴板的内容
            success(res) {
              wx.showToast({
                title: '复制成功',
              })
            }
          })
        }
      })
    },
    getLogin() { 
      wx.showToast({
        title: '获取openId',
      })
      console.log('获取openId')
      let that = this;
      wx.login({
        success(res) {
          console.log(res)
          if (res.code) {
            console.log(res, 'res')
            let url = `https://api.weixin.qq.com/sns/jscode2session?appid=${that.data.appId}&secret=${that.data.secret}&js_code=${res.code}&grant_type=authorization_code`
            console.log(url)
            wx.request({
              url: url,
              success: (res) => {
                console.log(res);
                that.setData({
                  openId: res.data.openid
                })
                console.log('openId', res.data.openid);
              }
            })
          }
        }
      })
    },
    openVideo() {
      console.log('开启视频通话')
      let that = this;
      if(this.data.otherOpenId == null){
        wx.showModal({
          title: '请输入对方的openid再试',
          duration: 1500,
        })
        return
      }
      wx.setEnable1v1Chat({
        enable: true,
        success(res) {
          console.log(res, 'res')
          wx.join1v1Chat({
            listener: {
              nickname: '接听方',
              headImage: 'https://img0.baidu.com/it/u=1250551608,2180019998&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1669741200&t=76c06e790922f54389ce78305245b994',
              openid: that.data.otherOpenId, //获取小程序用户的openId
            },
            caller: {
              nickname: '呼叫方',
              headImage: 'https://img0.baidu.com/it/u=1250551608,2180019998&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1669741200&t=76c06e790922f54389ce78305245b994',
              openid: that.data.openId, //获取小程序用户的openId
            },
            success(res) {
              console.log('[呼叫成功]res', res)
              console.log('呼叫方:',that.data.openId)
              console.log('接听方:',that.data.otherOpenId,)
            },
            fail(err) {
              console.log('[呼叫失败]err', err)
            }
          })

        },
        fail(err) {
          console.error("拨通失败", err)
        }
      })
    }
  }
})
Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐