微信小程序实时音视频功能简析(live-pusher与live-player)

本文主要是介绍微信小程序实时音视频功能简析(live-pusher与live-player)，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

2017年下半年，微信6.5.21版本支持在线音视频功能。开发者可以通过两个音视频组件 和 实现实时地在线直播、视频通话、语音通话等功能。

上述功能需要用到两个小程序媒体组件中的两个： live-pusher 与 live-player 。下文简单介绍两这个组件的基础知识。仅可以带你入门，如果是高手请绕行。

注册小程序

注册小程序请单击 微信公众平台 ，完成注册后，在小程序管理页面的【开发】>【基本配置】中记录下小程序 AppID 供后面使用。

注意： 必须以非个人主体类型进行注册，否则无法开通 和 这两个标签。

开通标签使用权限

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

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

• 目前支持这两个标签的类目如下表格所示（只有非个人主体才有以下类目）：

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Vni239TU-1586502758626)(/Users/mxj/百度云同步盘/学习笔记/前端全栈/微信小程序/img/image-20200409073506475.png)]

说明：如果以上设置都正确，但小程序依然不能正常工作，可能是微信内部的缓存没更新，请删除小程序并重启微信后，再进行尝试。

live-player是小程序内部用于支持音视频下行（播放）能力的功能标签。

版本支持

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

可以通过 wx.getSystemInfo 可以获取当前基础库版本信息。

属性定义

示例代码

<view id='video-box'>  
    <live-player
        wx:for="{{player}}"
        id="player_{{index}}"
        mode="RTC"
        object-fit="fillCrop"
        src="{{item.playUrl}}" 
        autoplay='true'
        bindstatechange="onPlay">
   </live-player>
 </view> 

超低时延

的 RTC 模式支持500ms以内的超低时延链路，可以应用在视频通话和远程遥控等场景中，要使用超低时延播放，需要注意如下几点：
（1）推流端如果是微信小程序，请使用 的 RTC 模式。
（2）推流端如果是 iOS 或者 Android SDK，请使用 setVideoQuality 的 MAIN_PUBLISHER 模式。
（3）推流端如果是 Windows，请不要使用 OBS，延时太高，可以使用我们的 Windows SDK。
（4） 的 min-cache 和 max-cache 请不要自行设置，使用默认值。
（5）播放地址请使用超低延时播放地址，也就是带了防盗链签名的rtmp://地址，如下：

属性详解

src
用于音视频下行的播放 URL，支持 RTMP 协议（URL 以rtmp://打头）和 FLV 协议（URL 以http://打头且以.flv结尾）

说明：

标签是不支持 HLS（m3u8）协议的，因为 已经支持 HLS（m3u8）播放协议了。但直播观看不推荐使用 HLS（m3u8）协议，延迟要比 RTMP 和 FLV 协议高一个数量级。

mode
live 模式主要用于直播类场景，例如赛事直播、在线教育、远程培训等等。该模式下，小程序内部的模块会优先保证观看体验的流畅，通过调整 min-cache 和 max-cache 属性，您可以调节观众（播放）端所感受到的时间延迟的大小，文档下面会详细介绍这两个参数。

RTC 则主要用于双向视频通话或多人视频通话场景，例如金融开会、在线客服、车险定损、培训会议等等。在此模式下，对 min-cache 和 max-cache 的设置不会起作用，因为小程序内部会自动将延迟控制在一个很低的水平（500ms左右）。

min-cache 和 max-cache

这两个参数分别用于指定观看端的最小缓冲时间和最大缓冲时间。所谓缓冲时间，是指播放器为了缓解网络波动对观看流畅度的影响而引入的一个“蓄水池”，当来自网络的数据包出现卡顿甚至停滞的时候，“蓄水池”里的紧急用水可以让播放器还能坚持一小段时间，只要在这个短暂的时间内网速恢复正常，播放器就可以源源不断地渲染出流畅而平滑的视频画面。

“蓄水池”里的水越多，抗网络波动的能力就越强，但代价就是观众端的延迟就越大，所以要在不同的场景下，使用不同的配置来达到体验上的平衡：

• 码率比较低（1Mbps左右，画面以人物为主）的直播流，min-cache = 1，max-cache = 3 较合适。
• 码率比较高（2Mbps - 3Mbps的高清游戏画面为主）的直播流，min-cache = 3，max-cache = 5 较合适。

RTC 模式下这两个参数是无效的。

background-mute
微信切到后台以后是否继续播放声音，用于避免锁屏对于当前小程序正在播放的视频内容的影响。

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

对象操作

wx.createLivePlayerContext()
通过 wx.createLivePlayerContext() 可以将 标签和 javascript 对象关联起来，之后即可操作该对象。

play
开始播放，如果 的 autoplay 属性设置为 false（默认值），那么就可以使用 play 来手动启动播放。

stop
停止播放。

pause
暂停播放，停留在最后画面。

resume
继续播放，与 pause 成对使用。

mute
设置静音。

requestFullScreen
进入全屏幕。

exitFullScreen
退出全屏幕。

代码实例

var player = wx.createLivePlayerContext('pusher');
player.requestFullScreen({
    success: function(){
            console.log('enter full screen mode success!')
        }
        fail: function(){
            console.log('enter full screen mode failed!')
        }
        complete: function(){
            console.log('enter full screen mode complete!')
        }
});

内部事件

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

关键事件

更多详细状态码请查看官方文档

说明：

播放 HTTP:// 打头的 FLV 协议地址时，如果观众遇到播放中直播流断开的情况，小程序是不会抛出 PLAY_EVT_PLAY_END 事件的，这是因为 FLV 协议中没有定义停止事件，所以只能通过监听 PLAY_ERR_NET_DISCONNECT 来替代之。

警告事件

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

代码实例

Page({
    onPlay: function(ret) {
        if(ret.detail.code == 2004) {
                console.log('视频播放开始',ret);
        }
    },

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

网络状态数据

小窗特性说明

live-player 小窗支持以下三种触发模式（在组件上设置 picture-in-picture-mode 属性）：

1. push 模式，即从当前页跳转至下一页时出现小窗（页面栈push）
2. pop 模式，即离开当页面时触发（页面栈pop）
3. 以上两种路由行为均触发小窗

此外，小窗还支持以下特性：

• 小窗容器尺寸会根据原组件尺寸自动判断
• 点击小窗，用户会被导航回小窗对应的播放器页面
• 小窗出现后，用户可点击小窗右上角的关闭按钮或调用 context.exitPictureInPicture() 接口关闭小窗

特别说明

1. 组件是由客户端创建的原生组件，它的层级是最高的，不能通过z-index控制层级。可以使用 和 覆盖在上面。

2. 请勿在 ，，， 中使用 组件。

3. live-player 默认宽度300px、高度225px，可通过wxss设置宽高。

4. 开发者工具上暂不支持。

5. css 动画对 live-pusher 组件无效。

常见问题

开发和运行环境要求

• 微信 App iOS 最低版本要求：6.5.21。
• 微信 App Android 最低版本要求：6.5.19。
• 小程序基础库最低版本要求：1.7.0。
• 由于微信开发者工具不支持原生组件（即 和 标签），需要在真机上进行运行体验。

调试时为什么要开启调试模式？

开启调试可以跳过把这些域名加入小程序白名单的工作，否则可能会遇到登录失败，通话无法连接的问题。

属性定义

示例代码

<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 的获取方法见 快速获取 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 窗口，用于展示各项音视频指标和事件，降低您调试相关功能的难度，具体使用方法我们在 FAQ 中有详细说明。

参数设置

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

对象操作

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

代码实例

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 属性可以绑定一个事件处理函数，该函数可以监听推流模块的内部事件和异常通知。

常规事件

严重错误

警告事件

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

• PUSH_WARNING_NET_BUSY
  上行网速不给力，建议提示用户改善当前的网络环境，例如让用户离家里的路由器近一点，或者切到 Wi-Fi 环境下再使用。
• PUSH_WARNING_SERVER_DISCONNECT
  请求被后台拒绝了，出现这个问题一般是由于 URL 里的 txSecret 计算错了，或者是 URL 被其他人占用了（跟播放不同，一个推流 URL 同时只能有一个用户使用）。
• PUSH_WARNING_HANDUP_STOP
  当用户单击小程序右上角的圆圈或者返回按钮时，微信会将小程序挂起，此时 会抛出5000这个事件。

代码实例

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

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

这篇关于微信小程序实时音视频功能简析(live-pusher与live-player)的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！