使用live-pusher和live-player标签，微信小程序如何实现视频通话接听前的功能？

Question

微信小程序做视频通话功能，接听前的页面和逻辑怎么写？

微信小程序利用live-pusher和live-player标签实现视频通话功能，live-pusher和live-player这两个标签的使用基本能弄懂，但对接听前的页面还有逻辑完全不懂
接听前弹出的画面需要搭配VoIP通话插件一起使用吗？如果有通话怎么监听到并弹出待接听画面呢?

Answer 1

在微信小程序中实现视频通话功能，并在接听前显示待接听页面：

1. 申请开通VoIP通话插件

登录微信小程序管理后台，进入“开发” -> “开发管理” -> “接口设置”，找到并申请开通“VoIP通话插件”权限。

2. 设置接听状态

在小程序启动时，使用 wx.setEnable1v1Chat 接口将用户的接听状态设置为 true。这个设置在小程序每次冷启动后需要重新设置。

// app.js
App({
  onLaunch() {
    wx.setEnable1v1Chat({
      enable: true
    });
  }
});

3. 监听通话邀请

使用 wx.onVoIPChatMembersChanged 监听房间成员变化，当有新的通话邀请时，触发待接听页面的显示。

// index.js
Page({
  onLoad() {
    wx.onVoIPChatMembersChanged((res) => {
      if (res.members.length > 1) {
        wx.navigateTo({
          url: '/pages/waiting/waiting'
        });
      }
    });
  }
});

4. 显示待接听页面

在监听到通话邀请后，使用 wx.navigateTo 或 wx.redirectTo 跳转到待接听页面。待接听页面可以显示来电者信息，并提供接听和拒绝按钮。

// waiting.js
Page({
  data: {
    callerInfo: {}
  },
  onLoad(options) {
    // 获取来电者信息
    this.setData({
      callerInfo: options.callerInfo
    });
  },
  acceptCall() {
    wx.join1v1Chat({
      caller: this.data.callerInfo,
      listener: { /* 当前用户信息 */ }
    });
  },
  rejectCall() {
    wx.exitVoIPChat();
  }
});

5. 接听通话

在待接听页面中，用户点击接听按钮后，调用 wx.join1v1Chat 接口加入通话。

6. 使用live-pusher和live-player标签

在通话页面中，使用 live-pusher 和 live-player 标签来实现视频通话功能。live-pusher 用于推流，live-player 用于播放对方的视频流。

<!-- call.js -->
<view class="container">
  <live-pusher id="pusher" mode="RTC" autopush="true" bindstatechange="statechange" />
  <live-player id="player" mode="RTC" autoplay="true" bindstatechange="statechange" />
</view>

// call.js
Page({
  data: {
    pusherContext: null,
    playerContext: null
  },
  onReady() {
    this.setData({
      pusherContext: wx.createLivePusherContext(),
      playerContext: wx.createLivePlayerContext()
    });
  },
  statechange(e) {
    console.log('live-pusher code:', e.detail.code);
  }
});

7. 处理通话结束

监听通话结束事件，并在通话结束后进行相应处理。

// app.js
App({
  onLaunch() {
    wx.setEnable1v1Chat({
      enable: true
    });
    wx.onVoIPChatInterrupted(() => {
      wx.showToast({
        title: '通话已结束',
        icon: 'none'
      });
    });
  }
});