微信小程序视频通话开发（二）

音视频介绍及开发前准备请看上一篇

完成上一篇的配置过后我们就可以进行代码操作了

废话不多说我们直接上代码！！！！

一、VoIP 通话插件

在「小程序管理后台」添加插件后，使用者还需要要在小程序的 app.json 中声明本插件。可以在主包引入，也可以在分包引入。

// 主包引入
{
  "plugins": {
    "wmpf-voip": {
      "version": "latest", // latest 表示自动使用最新版本。也可使用具体版本，如 2.3.8
      "provider": "wxf830863afde621eb"
    }
  }
}

// 分包引入
{
  "subpackages": [
    {
      "root": "xxxx",
      "pages": [],
      "plugins": {
        "wmpf-voip": {
          "version": "latest", // latest 表示自动使用最新版本。也可使用具体版本，如 2.3.8
          "provider": "wxf830863afde621eb"
        }
      }
    }
  ]
}

 完成声明后，可以在小程序中来确认是否引入成功

const wmpfVoip = requirePlugin('wmpf-voip').default
console.log(wmpfVoip) // 有结果即表示引入插件成功

二、用户授权设备

1. 请求授权

   用户授权前，需要从开发者的后台通过获取设备票据 接口拿到设备票据 snTicket。

   拿到 snTicket 后，需要在小程序内调用 wx.requestDeviceVoIP 请用户进行授权

          wx.requestDeviceVoIP({
            sn, // 向用户发起通话的设备 sn（需要与设备注册时一致）
            snTicket: res.data.snticket, // 获取的 snTicket
            modelId: "*****", // 「设备接入」从微信公众平台获取的 model_id
            deviceName: "视频通话", // 设备名称，用于授权时显示给用户
            success(res) {
              if (res.errMsg == "requestDeviceVoIP:ok") {
                wx.showToast({
                  title: "设备授权成功",
                });
                that.getDeviceVoIPList();
              }
            },
            fail(err) {
              wx.showModal({
                title: "授权失败",
                content: "errCode:" + err.errCode + ";　errMsg:" + err.errMsg,
                complete: (res) => {
                  if (res.cancel) {
                  }

                  if (res.confirm) {
                  }
                },
              });
            },
          });

注意：

• 如果用户拒绝授权或在设置页中取消授权，再次调用 requestDeviceVoIP 不会出现授权弹框。开发者应引导用户在设置页中手动开启。
• 授权框中「设备名字」= 「deviceName」 + 「modelId 对应设备型号」。如「devcieName」为「iot」，modelId 对应设备型号是「校园电话」，最终名字为「iot 校园电话」

当授权完成后，并且设备端开发完成后，就可以进行呼叫手机微信了

三、设备呼叫手机微信

发起通话前，一般需要用户选择拨打给的用户和通话的类型（音频/视频）。

根据业务场景不同，发起通话前的流程（如选择联系人和房间类型）可以在小程序的另一个页面中或者安卓应用中进行。

小程序页面进入通话页面

发起通话时，设备端需要在之前的页面中调用插件的 initByCaller 接口，然后跳转到插件的发起通话页面。

    wmpfVoip
      .initByCaller({
        caller: {
          id: that.data.telsn, // 设备 SN
          // 不支持传 name，显示的是授权时「deviceName」+「modelId 对应设备型号」
        },
        listener: {
          id: that.data.telopenid, // 接听方 用户 openId
          name: that.data.telname, // 接听方名字，仅显示用
        },
        roomType: roomType, // 房间类型。voice: 音频房间；video: 音视频房间
        businessType: 1, // 1 为设备拨打手机微信;2 为手机微信拨打设备
        voipToken: that.data.caller_ticket, // 使用设备认证 SDK 注册的设备传入 deviceToken，使用 WMPF RegisterMiniProgramDevice 接口注册的设备无需传入（插件 2.3.0 支持）
        miniprogramState: "formal", // 指定接听方使用的小程序版本。formal/正式版（默认）；trial/体验版；developer/开发版
      })
      .then(({ groupId, isSuccess }) => {
        if (isSuccess) {
          wx.setStorageSync("callerData", {
            name: that.data.telname,
            roomType: roomType,
          });
          // 跳转到插件的通话页面
          const callPagePlugin =
            "plugin-private://wxf830863afde621eb/pages/call-page-plugin/call-page-plugin";
          // 如果小程序启动直接进入插件页面，则不要调用 wx.redirectTo
          wx.redirectTo({
            url: `${callPagePlugin}?isCaller=1&roomType=${roomType}&groupId=${groupId}`,
          });
        } else {
          wx.showToast({
            title: "拨打失败",
            icon: "error",
          });
        }
      })
      .catch((e) => {
        console.error("发起通话失败", e); // 参数错误的情况会通过异常抛出
      });

四、 手机微信端接听通话

用户在手机端可以收到「响铃+振动」的强提醒通知，点击接听按钮后，会启动小程序并直接进入「VOIP 通话」插件页面接听通话。

完成通话后，微信客户端内会显示本次通话的信息与「关闭」按钮，用户点击「关闭」按钮后再跳转开发者调用setVoipEndPagePath设置的页面。开发者未设置时则直接关闭小程序。