小程序原生实时音视频实现

api文档：https://developers.weixin.qq.com/miniprogram/dev/api/media/live/wx.createLivePusherContext.html

开通标签使用权限：live-pusher 和 live-player 是小程序内部用于支持音视频上行能力的功能标签

• 目前支持这两个标签的类目如下表格所示（只有非个人主体才有以下类目）：

image.png

• 符合类目要求的小程序，需要在小程序管理后台的【开发】>【接口设置】中自助开通推拉流标签的使用权限：

image.png

live-player：是小程序内部用于支持音视频下行（播放）能力的功能标签。 ！！！（基础库 1.7.0 开始支持，低版本需做兼容处理.

属性定义

状态码

示例代码

  <!-- 
    class 动态选择谁的屏幕放大
    src 播放地址
    mode 模式 live-直播 RTC-实时通话
    binderrorPusher 渲染错误事件，detail = {errMsg, errCode} 
    beauty-style 设置美颜类型 smooth  光滑美颜 nature 自然美颜
    auto-pause-if-open-native 当跳转到其它微信原生页面时，是否自动暂停本页面的实时音视频播放
    bindstatechange 状态变化事件，detail = {code}
    object-fit 填充模式
    picture-in-picture-mode 设置小窗模式： push, pop，空字符串或通过数组形式设置多种模式（如： ["push", "pop"]）
  -->
  <live-player
    id="player"
    src="{{url_user}}" 
    mode="RTC" 
    autoplay 
    bindstatechange="statechangePlayer" 
    beauty-style="smooth" 
    auto-pause-if-open-native="{{false}}"
    object-fit="fillCrop"
    picture-in-picture-mode="['push', 'pop']"
    class="{{is_small == 2 ?'small-window' : 'player'}}" 
    data-class="{{is_small == 2 ?'small-window' : 'pusher'}}"
    bindtap="bindPlayerClick"/>

超低时延

的 RTC 模式支持500ms以内的超低时延链路，可以应用在视频通话和远程遥控等场景中，要使用超低时延播放，需要注意如下几点：
（1）推流端如果是微信小程序，请使用 的 RTC 模式。
（2）推流端如果是 iOS 或者 Android SDK，请使用 setVideoQuality 的 MAIN_PUBLISHER 模式。
（3）推流端如果是 Windows，请不要使用 OBS，延时太高，可以使用我们的 Windows SDK。
（4）min-cache 和 max-cache 请不要自行设置，使用默认值。
（5）播放地址请使用超低延时播放地址，也就是带了防盗链签名的rtmp://地址，如下：
普通直播URL rtmp://3891.liveplay.myqcloud.com/live/3891_test_clock_for_rtmpacc >2s
超低延时URL rtmp://3891.liveplay.myqcloud.com/live/3891_test_clock_for_rtmpacc?bizid=bizid&txTime=5FD4431C&txSerect=20e6d865f462dff61ada209d53c71cf9 < 500ms

对象方法

LivePlayerContext

LivePlayerContext 实例，可通过 wx.createLivePlayerContext 获取。
LivePlayerContext 通过 id 跟一个 live-player 组件绑定，操作对应的 live-player 组件。
wx.createLivePlayerContext('player', this)

LivePlayerContext.play()//播放

LivePlayerContext.stop()//停止

LivePlayerContext.mute()//静音

LivePlayerContext.pause()//暂停

LivePlayerContext.resume()//恢复

LivePlayerContext.requestFullScreen(Object object)//进入全屏

LivePlayerContext.exitFullScreen()//退出全屏

LivePlayerContext.exitPictureInPicture()//退出小窗，该方法可在任意页面调用

LivePlayerContext.snapshot(Object object)//截图

LivePlayerContext.requestPictureInPicture()//进入小窗

var player = wx.createLivePlayerContext('pusher');
player.requestFullScreen({
  success(){
    console.log('enter full screen mode success!')
  }
  fail(){
    console.log('enter full screen mode failed!')
  }
  complete(){
    console.log('enter full screen mode complete!')
  }
});

小窗特性说明

live-player 小窗支持以下三种触发模式（在组件上设置 picture-in-picture-mode 属性）：
1.push 模式，即从当前页跳转至下一页时出现小窗（页面栈push）
2.pop 模式，即离开当前页面时触发（页面栈pop）
3.以上两种路由行为均触发小窗

此外，小窗还支持以下特性：

• 小窗容器尺寸会根据原组件尺寸自动判断
• 点击小窗，用户会被导航回小窗对应的播放器页面
• 小窗出现后，用户可点击小窗右上角的关闭按钮或调用 context.exitPictureInPicture() 接口关闭小窗
• 当播放器进入小窗模式后，播放器所在页面处于 hide 状态(触发 onHide 生命周期)，该页面不会被销毁。当小窗被关闭时，播放器所在页面会被 unload (触发 onUnload 生命周期)。

分割线

live-pusher 实时音视频录制（v2.9.1 起支持同层渲染）。需要用户授权 scope.camera、scope.record。

live-pusher支持的类目同live-player一样

属性定义

状态码

示例代码

  <live-pusher 
    id="pusher"
    url="{{url_doctor}}" 
    mode="RTC" 
    autopush 
    bindstatechange="statechangePusher" 
    beauty-style="smooth"
    binderror="binderrorPusher"
    class="{{is_small == 1 ?'small-window' : 'pusher'}}"
    data-class="{{is_small == 1 ?'small-window' : 'pusher'}}"
    bindtap="bindPusherClick" />

对象方法

LivePusherContext

LivePusherContext 实例，可通过 wx.createLivePusherContext 获取。

LivePusherContext.start() //开始推流，同时开启摄像头预览

LivePusherContext.stop() //停止推流，同时停止摄像头预览

LivePusherContext.pause() //暂停推流

LivePusherContext.resume() //恢复推流

LivePusherContext.switchCamera() //切换前后摄像头

LivePusherContext.snapshot(Object object) //快照

LivePusherContext.toggleTorch() //切换手电筒

LivePusherContext.playBGM(Object object) //播放背景音

LivePusherContext.stopBGM() //停止背景音

LivePusherContext.pauseBGM() //暂停背景音

LivePusherContext.resumeBGM() //恢复背景音

LivePusherContext.setBGMVolume(Object object) //设置背景音音量

LivePusherContext.setMICVolume(Object object) //设置麦克风音量

LivePusherContext.startPreview() //开启摄像头预览

LivePusherContext.stopPreview() //关闭摄像头预览

LivePusherContext.sendMessage(Object object) //发送SEI消息

Bug & Tip

1. tip：开发者工具上暂不支持。
2. tip：live-pusher 默认宽度为100%、无默认高度，请通过wxss设置宽高。
3. tip：waiting-image 属性在 2.3.0 起完整支持网络路径、临时文件和包内路径。
4. tip：请注意原生组件使用限制。
5. tip: 相关介绍和原理可参考此文章

附上完整示例

！！！要注意两端推流播放 比如是a端和b端

<!-- wxml-->
<view class="chat">
  <!-- 
    binderrorPusher 渲染错误事件，detail = {errMsg, errCode} 
    bindstatechange 状态变化事件，detail = {code}
    beauty-style 设置美颜类型 smooth  光滑美颜 nature 自然美颜
    beauty  0    美颜，取值范围 0-9 ，0 表示关闭
    device-position front   前置或后置，值为front, back
  -->
  <live-pusher 
    id="pusher"
    class="{{is_small == 1 ?'small-window' : 'pusher'}}" 
    url="{{push_stream}}" 
    mode="RTC" 
    autopush 
    bindstatechange="statechangePusher" 
    beauty-style="smooth"
    binderror="binderrorPusher"
    data-class="{{is_small == 1 ?'small-window' : 'pusher'}}"
    bindtap="bindPusherClick"
    device-position="{{device_position}}" />
  <!-- 
    class 动态选择谁的屏幕放大
    src 播放地址
    mode 模式 live-直播 RTC-实时通话
    binderrorPusher 渲染错误事件，detail = {errMsg, errCode} 
    beauty-style 设置美颜类型 smooth  光滑美颜 nature 自然美颜
    auto-pause-if-open-native 当跳转到其它微信原生页面时，是否自动暂停本页面的实时音视频播放
    bindstatechange 状态变化事件，detail = {code}
    object-fit 填充模式
    picture-in-picture-mode 设置小窗模式： push, pop，空字符串或通过数组形式设置多种模式（如： ["push", "pop"]）
  -->
  <live-player
    id="player"
    src="{{pull_stream}}" 
    mode="RTC" 
    autoplay 
    bindstatechange="statechangePlayer" 
    beauty-style="smooth" 
    auto-pause-if-open-native="{{false}}"
    object-fit="fillCrop"
    picture-in-picture-mode="['push', 'pop']"
    class="{{is_small == 2 ?'small-window' : 'player'}}" 
    data-class="{{is_small == 2 ?'small-window' : 'pusher'}}"
    bindtap="bindPlayerClick"/>
  <view class="fixed">
    <view class="" style="height: auto;">
      <image src="/images/gd.png" bindtap="hangUp"></image>
      <image src="/images/qh.png" bindtap="cutCamera"></image>
    </view>
  </view>
</view>

//js
const app = getApp()
Page({
  data: {
    player: '',
    pusher: '',
    is_small: 2, // 1-pusher 2-player
    pull_stream: 'https://domain/pull_stream',
    push_stream: 'https://domain/push_stream'
  },
  onLoad() {
    this.setData({
      player: wx.createLivePlayerContext('player', this),
      pusher: wx.createLivePusherContext(),
    })
  },
  onReady() {},
  onShow() {},
  //状态变化事件
  statechangePusher(e) {
    const code = e.detail.code
    this.colse(code, 'Pusher')
  },
  //状态变化事件
  statechangePlayer(e) {
    const code = e.detail.code
    // 2004 视频播放开始
    if (code == '2004') {
      // this.data.pusher.pauseBGM()
    }
    this.colse(code, 'Player')
  },
  //挂断的操作
  colse(code, type) {
    console.log(type)
    // 2006 视频播放结束
    // -2301网络断连，且经多次重连抢救无效，更多重试请自行重启播放 
    // -1310 录屏被其他应用打断了
    // 3001 RTMP -DNS解析失败
    // 3002 RTMP服务器连接失败
    // 3003 RTMP服务器握手失败
    // 3005 RTMP 读/写失败，之后会发起网络重试
    let code_list = ['2006', '-2301', '-1310', '3001', '3002', '3003', '3005']
    if (code_list.includes(code)) {
      if (type == 'Pusher') {
        //挂断
        this.hangUp()
      } else {
        //挂断视频、不推流、关闭页面
        //请求后台接口
        this.hangUp()
      }
    }
  },
  //渲染错误事件
  binderrorPusher(errMsg, errCode) {
    // 10001 用户禁止使用摄像头
    // 10002 用户禁止使用录音
    if (errCode == '10001' || errCode == '10002') {
      api.showToast(errMsg)
    }
  },
  //切换大小屏
  bindPusherClick(e) {
    const _class = e.currentTarget.dataset.class
    if (_class == 'small-window' && this.data.is_small == 1) { // 说明pusher是小屏幕
      this.setData({
        is_small: 2
      })
    }
  },
  //切换大小屏
  bindPlayerClick(e) {
    const _class = e.currentTarget.dataset.class
    if (_class == 'small-window' && this.data.is_small == 2) { // 说明player是小屏幕
      this.setData({
        is_small: 1
      })
    }
  },
  //挂断 
  hangUp() {
    console.log('挂断');
    // 停止推流，同时停止摄像头预览
    this.data.pusher.stop({
      success() {
        //挂断视频、不推流、关闭页面
        //dosomething
      },
      fail() {}
    })
  },
  //切换摄像头
  cutCamera() {
    this.data.pusher.switchCamera({
      success() {
        console.log('切换摄像头 success!')
      },
    })
  },
})

//css
.chat{
  position: relative;
  height: 100vh;
  width: 100%;
}
.player,.pusher{
  width: 100% ;height: 100%
}
.small-window{
  position: absolute;
  top: 0px;
  right: 0px;
  width: 150px;
  height: 200px;
  z-index: 100;
}
.fixed{
  position: fixed;
  bottom: 50px;
  left: 50px;
  right: 50px;
  z-index: 101;
  text-align: center;
}
.fixed image{
  width: 50px;
  height: 50px;
  margin: 0px 40px;
}