微信小程序 live-pusher 实时音视频录制 组件

完整微信小程序(Java后端) 技术贴目录清单页面（必看）

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

暂只针对国内主体如下类目的小程序开放，需要先通过类目审核，再在小程序管理后台，「开发」-「接口设置」中自助开通该组件权限。

相关api：wx.createLivePusherContext

orientation 的合法值

local-mirror 的合法值

audio-reverb-type 的合法值

audio-volume-type 的合法值

beauty-style 的合法值

filter 的合法值

Bug & Tip

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

错误码（errCode）

状态码（code）

网络状态数据（info）

示例代码

在开发者工具中预览效果

index.wxml

<view class="page-body">
  <view class="page-section tc">
    <live-pusher id="pusher" url="https://domain/push_stream" mode="RTC" autopush bindstatechange="statechange" />

    <view class="btn-area">
      <button bindtap="bindStart" class="page-body-button" type="primary">播放推流</button>
      <button bindtap="bindPause" class="page-body-button" type="primary">暂停推流</button>
      <button bindtap="bindStop" class="page-body-button" type="primary">停止推流</button>
      <button bindtap="bindResume" class="page-body-button" type="primary">恢复推流</button>
      <button bindtap="bindSwitchCamera" class="page-body-button" type="primary">切换前后摄像头</button>
    </view>
  </view>
</view>

index.js

Page({
  onReady(res) {
    this.ctx = wx.createLivePusherContext('pusher')
  },
  statechange(e) {
    console.log('live-pusher code:', e.detail.code)
  },
  bindStart() {
    this.ctx.start({
      success: res => {
        console.log('start success')
      },
      fail: res => {
        console.log('start fail')
      }
    })
  },
  bindPause() {
    this.ctx.pause({
      success: res => {
        console.log('pause success')
      },
      fail: res => {
        console.log('pause fail')
      }
    })
  },
  bindStop() {
    this.ctx.stop({
      success: res => {
        console.log('stop success')
      },
      fail: res => {
        console.log('stop fail')
      }
    })
  },
  bindResume() {
    this.ctx.resume({
      success: res => {
        console.log('resume success')
      },
      fail: res => {
        console.log('resume fail')
      }
    })
  },
  bindSwitchCamera() {
    this.ctx.switchCamera({
      success: res => {
        console.log('switchCamera success')
      },
      fail: res => {
        console.log('switchCamera fail')
      }
    })
  }
})

运行效果：

微信搜一搜【java1234】关注这个放荡不羁的程序员，关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。