小程序+音视频1：live-pusher

前言：

小程序中实现直播功能。

是小程序内部用于支持音视频上行能力的功能标签

版本支持

• 微信 App iOS 最低版本要求：6.5.21。
• 微信 App Android 最低版本要求：6.5.19。
• 小程序基础库最低版本要求：1.7.0。

使用限制

出于政策和合规的考虑，微信暂时没有放开所有小程序对 和 标签的支持：

• 个人账号和企业账号的小程序暂时只开放如下表格中的类目：

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

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

属性定义

示例代码

<view id='video-box'>  
 <live-pusher
       id="pusher"
       mode="RTC"
       url="{{pusher.push_url}}" 
       autopush='true'
       bindstatechange="onPush">
 </live-pusher>  
</view>

属性详解

• url

  用于音视频上行的推流 URL，以 rtmp:// 协议前缀打头，腾讯云推流 URL 的获取方法见 文档。

  说明：

  小程序内部使用的 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分钟时间。

• debug

  调试音视频相关功能，如果没有很好的工具会是一个噩梦，所以小程序为 live-pusher 标签支持了 debug 模式，开始 debug 模式之后，原本用于渲染视频画面的窗口上，会显示一个半透明的 log 窗口，用于展示各项音视频指标和事件，降低您调试相关功能的难度，具体使用方法我们在 中有详细说明。

参数设置

这么多参数，具体要怎样设置才比较合适呢？我们给出如下建议值：

说明：

如果不是对带宽特别没有信心的应用场景，audio-quality 选项请不要选择 low，其音质和延迟感都要会比 high 模式差很多。

对象操作

var pusher = wx.createLivePusherContext('pusher');
pusher.start({
 success: function(ret){
     console.log('start push success!')
 }
 fail: function(){
     console.log('start push failed!')
 }
 complete: function(){
     console.log('start push complete!')
 }
});

内部事件

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

1. 常规事件

2. 严重错误

3. 警告事件

内部警告并非不可恢复的错误，小程序内部的音视频 SDK 会启动相应的恢复措施，警告的目的主要用于提示开发者或者最终用户，例如：

• PUSH_WARNING_NET_BUSY

  上行网速不给力，建议提示用户改善当前的网络环境，例如让用户离家里的路由器近一点，或者切到 Wi-Fi 环境下再使用。

• PUSH_WARNING_SERVER_DISCONNECT

  请求被后台拒绝了，出现这个问题一般是由于 URL 里的 txSecret 计算错了，或者是 URL 被其他人占用了（跟播放不同，一个推流 URL 同时只能有一个用户使用）。

• PUSH_WARNING_HANDUP_STOP

  当用户单击小程序右上角的圆圈或者返回按钮时，微信会将小程序挂起，此时 会抛出5000这个事件。

4. 示例代码

Page({
   onPush: function(ret) {
       if(ret.detail.code == 1002) {
         console.log('推流成功了',ret);
       }
   },

 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
 //...
 }
})

更多资料：