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

Posted 2021-06-26 java1234_小锋

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

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

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

一级类目/主体类型	二级类目	小程序内容场景
社交	直播	涉及娱乐性质，如明星直播、生活趣事直播、宠物直播等。选择该类目后首次提交代码审核，需经当地互联网主管机关审核确认，预计审核时长7天左右
教育	在线视频课程	网课、在线培训、讲座等教育类直播
医疗	互联网医院，公立医疗机构，私立医疗机构	问诊、大型健康讲座等直播
金融	银行、信托、公募基金、私募基金、证券/期货、证券、期货投资咨询、保险、征信业务、新三板信息服务平台、股票信息服务平台（港股/美股）、消费金融	金融产品视频客服理赔、金融产品推广直播等
汽车	汽车预售服务	汽车预售、推广直播
政府主体帐号	/	政府相关工作推广直播、领导讲话直播等
工具	视频客服	不涉及以上几类内容的一对一视频客服服务，如企业售后一对一视频服务等
IT科技	多方通信；音视频设备	为多方提供电话会议/视频会议等服务；智能家居场景下控制摄像头

相关api：wx.createLivePusherContext

属性	类型	默认值	必填	说明	最低版本
url	string		否	推流地址。目前仅支持 rtmp 格式	1.7.0
mode	string	RTC	否	SD（标清）, HD（高清）, FHD（超清）, RTC（实时通话）	1.7.0
autopush	boolean	false	否	自动推流	1.7.0
muted	boolean	false	否	是否静音。即将废弃，可用 enable-mic 替代	1.7.0
enable-camera	boolean	true	否	开启摄像头	1.7.0
auto-focus	boolean	true	否	自动聚集	1.7.0
orientation	string	vertical	否	画面方向	1.7.0
beauty	number	0	否	美颜，取值范围 0-9 ，0 表示关闭	1.7.0
whiteness	number	0	否	美白，取值范围 0-9 ，0 表示关闭	1.7.0
aspect	string	9:16	否	宽高比，可选值有 3:4, 9:16	1.7.0
min-bitrate	number	200	否	最小码率	1.7.0
max-bitrate	number	1000	否	最大码率	1.7.0
audio-quality	string	high	否	高音质(48KHz)或低音质(16KHz)，值为high, low	1.7.0
waiting-image	string		否	进入后台时推流的等待画面	1.7.0
waiting-image-hash	string		否	等待画面资源的MD5值	1.7.0
zoom	boolean	false	否	调整焦距	2.1.0
device-position	string	front	否	前置或后置，值为front, back	2.3.0
background-mute	boolean	false	否	进入后台时是否静音（已废弃，默认退后台静音）	1.7.0
mirror	boolean	false	否	设置推流画面是否镜像，产生的效果在 live-player 反应到	2.7.0
remote-mirror	boolean	false	否	同 mirror 属性，后续 mirror 将废弃	2.10.0
local-mirror	string	auto	否	控制本地预览画面是否镜像	2.10.0
audio-reverb-type	number	0	否	音频混响类型	2.10.0
enable-mic	boolean	true	否	开启或关闭麦克风	2.10.0
enable-agc	boolean	false	否	是否开启音频自动增益	2.10.0
enable-ans	boolean	false	否	是否开启音频噪声抑制	2.10.0
audio-volume-type	string	auto	否	音量类型	2.10.0
video-width	number	360	否	上推的视频流的分辨率宽度	2.10.0
video-height	number	640	否	上推的视频流的分辨率高度	2.10.0
beauty-style	string	smooth	否	设置美颜类型	2.12.0
filter	string	standard	否	设置色彩滤镜	2.12.0
bindstatechange	eventhandle		否	状态变化事件，detail = {code}	1.7.0
bindnetstatus	eventhandle		否	网络状态通知，detail = {info}	1.9.0
binderror	eventhandle		否	渲染错误事件，detail = {errMsg, errCode}	1.7.4
bindbgmstart	eventhandle		否	背景音开始播放时触发	2.4.0
bindbgmprogress	eventhandle		否	背景音进度变化时触发，detail = {progress, duration}	2.4.0
bindbgmcomplete	eventhandle		否	背景音播放完成时触发	2.4.0
bindaudiovolumenotify	eventhandle		否	返回麦克风采集的音量大小	2.12.0

orientation 的合法值

值	说明	最低版本
vertical	竖直
horizontal	水平

local-mirror 的合法值

值	说明	最低版本
auto	前置摄像头镜像，后置摄像头不镜像
enable	前后置摄像头均镜像
disable	前后置摄像头均不镜像

audio-reverb-type 的合法值

值	说明	最低版本
0	关闭
1	KTV
2	小房间
3	大会堂
4	低沉
5	洪亮
6	金属声
7	磁性

audio-volume-type 的合法值

值	说明	最低版本
auto	自动
media	媒体音量
voicecall	通话音量

beauty-style 的合法值

值	说明	最低版本
smooth	光滑美颜
nature	自然美颜

filter 的合法值

值	说明	最低版本
standard	标准
pink	粉嫩
nostalgia	怀旧
blues	蓝调
romantic	浪漫
cool	清凉
fresher	清新
solor	日系
aestheticism	唯美
whitening	美白
cerisered	樱红

Bug & Tip

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

错误码（errCode）

代码	说明
10001	用户禁止使用摄像头
10002	用户禁止使用录音
10003	背景音资源（BGM）加载失败
10004	等待画面资源（waiting-image）加载失败

状态码（code）

代码	说明
1001	已经连接推流服务器
1002	已经与服务器握手完毕,开始推流
1003	打开摄像头成功
1004	录屏启动成功
1005	推流动态调整分辨率
1006	推流动态调整码率
1007	首帧画面采集完成
1008	编码器启动
-1301	打开摄像头失败
-1302	打开麦克风失败
-1303	视频编码失败
-1304	音频编码失败
-1305	不支持的视频分辨率
-1306	不支持的音频采样率
-1307	网络断连，且经多次重连抢救无效，更多重试请自行重启推流
-1308	开始录屏失败，可能是被用户拒绝
-1309	录屏失败，不支持的android系统版本，需要5.0以上的系统
-1310	录屏被其他应用打断了
-1311	Android Mic打开成功，但是录不到音频数据
-1312	录屏动态切横竖屏失败
1101	网络状况不佳：上行带宽太小，上传数据受阻
1102	网络断连, 已启动自动重连
1103	硬编码启动失败,采用软编码
1104	视频编码失败
1105	新美颜软编码启动失败，采用老的软编码
1106	新美颜软编码启动失败，采用老的软编码
3001	RTMP -DNS解析失败
3002	RTMP服务器连接失败
3003	RTMP服务器握手失败
3004	RTMP服务器主动断开，请检查推流地址的合法性或防盗链有效期
3005	RTMP 读/写失败

网络状态数据（info）

键名	说明
videoBitrate	当前视频编/码器输出的比特率，单位 kbps
audioBitrate	当前音频编/码器输出的比特率，单位 kbps
videoFPS	当前视频帧率
videoGOP	当前视频 GOP,也就是每两个关键帧(I帧)间隔时长，单位 s
netSpeed	当前的发送/接收速度
netJitter	网络抖动情况，抖动越大，网络越不稳定
netQualityLevel	网络质量：0：未定义 1：最好 2：好 3：一般 4：差 5：很差 6：不可用
videoWidth	视频画面的宽度
videoHeight	视频画面的高度
videoCache	主播端堆积的视频帧数
audioCache	主播端堆积的音频帧数

示例代码

在开发者工具中预览效果

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】关注这个放荡不羁的程序员，关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。