微信小程序直播推流

go lang

已于 2022-09-29 06:22:15 修改

阅读量3.8k

点赞数

分类专栏：微信小程序开发实战文章标签：微信小程序

于 2022-09-25 22:49:28 首次发布

本文链接：https://blog.csdn.net/gz_hm/article/details/127044773

版权

微信小程序开发实战专栏收录该内容

24 篇文章 45 订阅

订阅专栏

主播端使用live-pusher进行推流，live-pusher组件对手机摄像头和麦克风的数据进行采集和编码，并通过 url 参数指定的rtmp 推流地址上传到流媒体服务器。在使用live-pusher组件之前先看看live-pusher组件的属性以及方法。

属性定义:

Url
用于设置音视频上行的推流 URL，以rtmp://协议前缀打头。小程序内部使用的RTMP协议是支持UDP加速的版本，在同样网络条件下，UDP版本的RTMP 会比开源版本的有更好的上行速度和抗抖动能力。
mode
SD、HD 和 FHD 主要用于直播类场景，例如赛事直播、在线教育、远程培训等等。SD、HD 和 FHD 分别对应三种默认的清晰度。该模式下，小程序会更加注重清晰度和观看的流畅性，不会过分强调低延迟，也不会为了延迟牺牲画质和流畅性。
RTC 则主要用于双向视频通话或多人视频通话场景，例如金融开会、在线客服、车险定损、培训会议等。该模式下，小程序会更加注重降低点到点的时延，也会优先保证声音的质量，在必要的时候会对画面清晰度和画面的流畅性进行一定的缩水。
orientation和aspect
用于设置横屏（horizontal）模式还是竖屏（vertical）模式，默认是竖屏模式，即 home 键朝下。这时，小程序推出的画面的宽高比是3：4或者9：16这两种竖屏宽高比的画面，也就是宽 < 高。如果改成横屏模式，小程序推出的画面宽高比即变为4：3或者16：9这种横屏宽高比的画面，也就是宽 > 高。
具体的宽高比是有 aspect 决定的，默认是9：16，也可以支持3：4。这是在 orientation 的属性值为 vertical 的情况下。如果 orientation 的属性值为 horizontal，那么3：4的效果等价于4：3，9：16的效果等价于16：9。
min-bitrate 和 max-bitrate
这里首先要科普一个概念：视频码率，指视频编码器每秒钟输出的视频数据的多少。在视频分辨率确定的情况下，视频码率越高，即每秒钟输出的数据越多，相应的画质也就越好。所以 min-bitrate 和 max-bitrate 这两个属性，分别用于决定输出画面的最低清晰度和最高清晰度。这两个数值并非越大越好，因为用户的网络上行不是无限好的。但也不是越小越好，因为实际应用场景中，清晰与否是用户衡量产品体验的一个重要指标。
小程序内部会自动处理好分辨率和码率的关系，例如2Mbps的码率，小程序会选择720p的分辨率进行匹配，而300kbps的码率下，小程序则会选择较低的分辨率来提高编码效率。所以您只需要关注 min-bitrate 和 max-bitrate 这一对参数就可以掌控画质了。
waiting-image 和 waiting-image-hash
出于用户隐私的考虑，在微信切到后台以后，小程序希望停止摄像头的画面采集。但是对于另一端的用户而言，画面会变成黑屏或者冻屏（停留在最后一帧），这种体验是非常差的。为了解决这个问题，我们引入了 waiting-image 属性，您可以设置一张有 “稍候” 含义的图片（waiting-image 是该图片的 URL，waiting-image-hash 则是该图片对应的 md5 校验值）。当微信切到后台以后，小程序会使用该图片作为摄像头画面的替代，以极低的流量占用维持视频流3分钟时间。

对象操作

wx.createLivePusherContext：
通过wx.createLivePusherContext() 可以live-pusher标签和 javascript 对象关联起来，之后即可操作该对象。
start：
开始推流，如果live-pusher的 autopush 属性设置为 false（默认值），那么就可以使用 start 来手动开始推流。
stop：
停止推流。
pause：
暂停推流。
resume：
恢复推流，请与 pause 操作配对使用。
switchCamera：
切换前后摄像头。
snapshot：
推流截图，截图大小跟组件的大小一致。截图成功图片的临时路径为 ret.tempImagePath。

内部事件

通过live-pusher标签的 bindstatechange 属性可以绑定一个事件处理函数，该函数可以监听推流模块的内部事件和异常通知。

常规事件
1001 PUSH_EVT_CONNECT_SUCC 已经成功连接到云端服务器
1002 PUSH_EVT_PUSH_BEGIN 与服务器握手完毕，一切正常，准备开始上行推流
1003 PUSH_EVT_OPEN_CAMERA_SUCC 已成功启动摄像头，摄像头被占用或者被限制权限的情况下无法打开
严重错误
-1301 PUSH_ERR_OPEN_CAMERA_FAIL 打开摄像头失败
-1302 PUSH_ERR_OPEN_MIC_FAIL 打开麦克风失败
-1303 PUSH_ERR_VIDEO_ENCODE_FAIL 视频编码失败
-1304 PUSH_ERR_AUDIO_ENCODE_FAIL 音频编码失败
-1305 PUSH_ERR_UNSUPPORTED_RESOLUTION 不支持的视频分辨率
-1306 PUSH_ERR_UNSUPPORTED_SAMPLERATE 不支持的音频采样率
-1307 PUSH_ERR_NET_DISCONNECT 网络断连，且经三次重连无效，可以放弃，更多重试请自行重启推流
警告事件
1101 PUSH_WARNING_NET_BUSY 上行网速不够用，建议提示用户改善当前的网络环境
1102 PUSH_WARNING_RECONNECT 网络断连，已启动重连流程（重试失败超过三次会放弃）
1103 PUSH_WARNING_HW_ACCELERATION_FAIL 硬编码启动失败，自动切换到软编码
1107 PUSH_WARNING_SWITCH_SWENC 由于机器性能问题，自动切换到硬件编码
3001 PUSH_WARNING_DNS_FAIL DNS 解析失败，启动重试流程
3002 PUSH_WARNING_SEVER_CONN_FAIL 服务器连接失败，启动重试流程
3003 PUSH_WARNING_SHAKE_FAIL 服务器握手失败，启动重试流程
3004 PUSH_WARNING_SERVER_DISCONNECT 服务器主动断开连接，启动重试流程
3005 PUSH_WARNING_SERVER_DISCONNECT socket 链路异常断开，启动重试流程
5000 PUSH_WARNING_HANDUP_STOP 小程序被用户挂起

示例代码

接下来我们实现直播端的推流页面，在推流页面中我们将live-pusher的url参数设置为Nginx的推流地址，并将mode设置为“SD”。以下是推流页面的相关代码：
live_push.wxml

<view>
  <view>
    <live-pusher id="pusher" url="rtmp://......" mode="SD" autopush bindstatechange="stateChange" />
    <view class="btn-area">
      <button bindtap="bindStart" type="primary">播放推流</button>
      <button bindtap="bindPause" type="primary">暂停推流</button>
      <button bindtap="bindStop"  type="primary">停止推流</button>
      <button bindtap="bindResume" type="primary">恢复推流</button>
      <button bindtap="bindSwitch" type="primary">切换摄像头</button>
    </view>
  </view>
</view>

live_push.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 => {},
      fail: res => {}
    })
  },
  bindPause() {
    this.ctx.pause({
      success: res => {},
      fail: res => {}
    })
  },
  bindStop() {
    this.ctx.stop({
      success: res => {},
      fail: res => {}
    })
  },
  bindResume() {
    this.ctx.resume({
      success: res => {},
      fail: res => {}
    })
  },
  bindSwitch() {
    this.ctx.switchCamera({
      success: res => {},
      fail: res => {}
    })
  }
})