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

Posted java1234_小锋

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序 live-pusher 实时音视频录制 组件相关的知识,希望对你有一定的参考价值。

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

实时音视频录制(v2.9.1 起支持同层渲染)。需要用户授权 scope.camerascope.record

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

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

相关api:wx.createLivePusherContext

属性类型默认值必填说明最低版本
urlstring推流地址。目前仅支持 rtmp 格式1.7.0
modestringRTCSD(标清), HD(高清), FHD(超清), RTC(实时通话)1.7.0
autopushbooleanfalse自动推流1.7.0
mutedbooleanfalse是否静音。即将废弃,可用 enable-mic 替代1.7.0
enable-camerabooleantrue开启摄像头1.7.0
auto-focusbooleantrue自动聚集1.7.0
orientationstringvertical画面方向1.7.0
beautynumber0美颜,取值范围 0-9 ,0 表示关闭1.7.0
whitenessnumber0美白,取值范围 0-9 ,0 表示关闭1.7.0
aspectstring9:16宽高比,可选值有 3:4, 9:161.7.0
min-bitratenumber200最小码率1.7.0
max-bitratenumber1000最大码率1.7.0
audio-qualitystringhigh高音质(48KHz)或低音质(16KHz),值为high, low1.7.0
waiting-imagestring进入后台时推流的等待画面1.7.0
waiting-image-hashstring等待画面资源的MD5值1.7.0
zoombooleanfalse调整焦距2.1.0
device-positionstringfront前置或后置,值为front, back2.3.0
background-mutebooleanfalse进入后台时是否静音(已废弃,默认退后台静音)1.7.0
mirrorbooleanfalse设置推流画面是否镜像,产生的效果在 live-player 反应到2.7.0
remote-mirrorbooleanfalse同 mirror 属性,后续 mirror 将废弃2.10.0
local-mirrorstringauto控制本地预览画面是否镜像2.10.0
audio-reverb-typenumber0音频混响类型2.10.0
enable-micbooleantrue开启或关闭麦克风2.10.0
enable-agcbooleanfalse是否开启音频自动增益2.10.0
enable-ansbooleanfalse是否开启音频噪声抑制2.10.0
audio-volume-typestringauto音量类型2.10.0
video-widthnumber360上推的视频流的分辨率宽度2.10.0
video-heightnumber640上推的视频流的分辨率高度2.10.0
beauty-stylestringsmooth设置美颜类型2.12.0
filterstringstandard设置色彩滤镜2.12.0
bindstatechangeeventhandle状态变化事件,detail = {code}1.7.0
bindnetstatuseventhandle网络状态通知,detail = {info}1.9.0
binderroreventhandle渲染错误事件,detail = {errMsg, errCode}1.7.4
bindbgmstarteventhandle背景音开始播放时触发2.4.0
bindbgmprogresseventhandle背景音进度变化时触发,detail = {progress, duration}2.4.0
bindbgmcompleteeventhandle背景音播放完成时触发2.4.0
bindaudiovolumenotifyeventhandle返回麦克风采集的音量大小2.12.0

orientation 的合法值

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

local-mirror 的合法值

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

audio-reverb-type 的合法值

说明最低版本
0关闭
1KTV
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. tiplive-pusher 默认宽度为100%、无默认高度,请通过wxss设置宽高。
  3. tipwaiting-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录屏被其他应用打断了
-1311Android Mic打开成功,但是录不到音频数据
-1312录屏动态切横竖屏失败
1101网络状况不佳:上行带宽太小,上传数据受阻
1102网络断连, 已启动自动重连
1103硬编码启动失败,采用软编码
1104视频编码失败
1105新美颜软编码启动失败,采用老的软编码
1106新美颜软编码启动失败,采用老的软编码
3001RTMP -DNS解析失败
3002RTMP服务器连接失败
3003RTMP服务器握手失败
3004RTMP服务器主动断开,请检查推流地址的合法性或防盗链有效期
3005RTMP 读/写失败

网络状态数据(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')
      }
    })
  }
})

运行效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RAboRQzC-1623154316580)(image-20210608160955768.png)]

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

以上是关于微信小程序 live-pusher 实时音视频录制 组件的主要内容,如果未能解决你的问题,请参考以下文章

技术分享| 音视频与微信小程序互通实践

关于直播卖货小程序源码推流功能的实现

#yyds干货盘点#愚公系列2022年11月 微信小程序-实时音视频录制

微信原生组件|基于小程序实现音视频通话

Freeswitch和微信小程序对接

uni-app技术分享| uni-app转小程序_实时音视频