微信小程序编写一个音视频会议系统附完整代码

教你如何使用微信小程序打造一个音视频会议系统

微信小程序越来越强大，从刚开始的页面渲染到游戏开发到视频语音直播，正在一步一步替代原生app的一些应用，今天我们来教大家用微信小程序开发一个最多同时300人开会的音视频会议聊天系统。效果如下：

第一步，音视频聊天目前只针对企业用户，并且做了类目限制，如下

上面这些类目可以开通音视频会议功能，这些类目大部分需要特殊资质的证明，只有最后一个类别it科技 硬件设备不需要特殊资质

小程序服务类别在小程序后台的设置里面修改

修改完成后我们进入小程序后台的开发-开发管理-接口设置 菜单中，我们把这下面三个开关打开

好了，现在我们来写小程序代码和后端php接口吧

wxml

<block wx:for="{{openIdList}}" wx:key="*this">
  <voip-room
    openid="{{item}}"
    mode="{{selfOpenId === item ? 'camera' : 'video'}}" style="height:300rpx;width:200rpx;">
  </voip-room>
</block>
<view bindtap="joinmeet">加入视频会议</view>

Page({
  data: {
    openIdList: [],
    selfOpenId: "",

  },
  onLoad: function () {
    var that = this;
    wx.login({
      complete: (res) => {
        if (res.code) {
          wx.request({
            method: "GET",
            data: {
              code: res.code
            },
            url: "http://xxxxx.com/", //后端接口地址
            success: (re) => {
              var data = re.data
              that.setData({
                data: data,
                selfOpenId: data.openid
              })
            }
          })
        }
      },
    })
  },
   onUnload:function(){
    wx.exitVoIPChat();//退出视频聊天
  },
  joinmeet() {
    var that = this
    wx.getSetting({
      success: function (r) {
        console.log(r)
        if (r.authSetting['scope.record'] === true) {
          // 是否有录音权限 
          var data = that.data.data
          wx.joinVoIPChat({
            signature: data.sign,
            nonceStr: data.nonceStr,
            timeStamp: parseInt(data.timeStamp),
            groupId: data.groupId,
            roomType: 'video',
            complete: (re) => {

              console.log(re)
              if (re.errMsg == 'joinVoIPChat:ok') {
                var openIdList = re.openIdList
                console.log(openIdList)
                // 加入成功  返回openIdList  当前房间里所有在线的  用户openid在这里插入代码片
                that.setData({
                  openIdList: openIdList
                })
                return
              }
            }
          })
        } else {
          //  之前用户拒绝授权语音  无法直接弹出  需使用  wx.openSetting 方法打开设置  引导用户主动打开  
          if (r.authSetting['scope.record'] === false) {
            wx.openSetting({
              // 相关逻辑
            })
          } else {
            //这一层 可直接弹出获取录音授权
            wx.authorize({
              scope: 'scope.record',
              complete: (r) => {
                console.log(r)
              }
            })
          }
        }
      }
    })
  },
  
});

<?php
$appid = "wrwerwrwsdfs";
$appsecret = "sdfsfdsfsdfewfsdsdf";

$code = $_GET['code'];
$url = 'https://api.weixin.qq.com/sns/jscode2session?appid='.$appid.'&secret='.$appsecret.'&js_code='.$code.'&grant_type=authorization_code';
$result = http_curl($url);
$_resdata = json_decode($result, 1);

$data[] = $appid;
$data[] = $groupId = 'grop_ooo00_tests'; //测试房间  这个groupId  需要生成唯一的  使用这个id 签名的人员进入都会进入一个实时语音房间
$data[] = $nonceStr = "12345678";
$data[] = $timeStamp = time();

sort($data, 5); //这里是个坑  php sort 的默认参数不会把数字进行字典排序  相关参数请自行查看php文档
$st = implode('', $data); //拼接成一个字符串

$hash = hash_hmac('sha256', $st, $_resdata['session_key']); //通过 sha256 加密

echo json_encode(['openid' => $_resdata['openid'], 'sign' => $hash, 'nonceStr' => $nonceStr, 'timeStamp' => $timeStamp, 'groupId' => $groupId]); //返回小程序加入实时语音的相关参数给前端

function http_curl($url) {
    $curlobj = curl_init();
    curl_setopt($curlobj, CURLOPT_URL, $url);
    curl_setopt($curlobj, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($curlobj, CURLOPT_SSL_VERIFYPEER, FALSE);
    curl_setopt($curlobj, CURLOPT_SSL_VERIFYHOST, FALSE);
    $output = curl_exec($curlobj);
    curl_close($curlobj);
    return $output;
}