小程序直播总结

# 一、小程序直播功能目前有哪些实现方案

• 内嵌腾讯直播H5：腾讯直播已改名NOW直播，小程序接入工具文档无法找到
• 小程序原生实现：小程序对直播和websocket都进行了比较好的封装，通过live-pusher live-player组件和websocket API即可实现直播互动功能
• 接入小程序直播插件实现：小程序直播，是微信提供给小程序开发者的直播组件。

# 二、小程序原生实现直播功能流程

微信小程序从1.7开始，为开发者提供了两个新接口，<live-pusher>和<live-player>，可以在小程序上实现单向的直播功能。通过与技术的结合，比如WebRTC，开发者们还可以进一步在小程序直播的基础上实现连麦功能

首先由于微信对小程序直播功能类目有限制，限定了特定类目的小程序使用

另外需要注意的两点：

• 个人号无法申请使用直播功能；
• 社交类目开通直播功能需要相关视频许可和文网文资质许可；
• 所以小程序开通直播的业务，要根据产品的目的和场景去申请对应的类目。

在小程序管理后台，「开发」-「接口设置」中自助开通对应的权限，如下图所示：

微信小程序原生实现直播功能流程如上图所示，录制端小程序通过[live-pusher]组件对手机和麦克风的数据进行采集和编码推流到服务器，服务器端对数据进行加工处理并分发给多个客户端，播放端小程序通过[live-player]组件从云端拉流并进行实时无差异的解码和渲染，从而实现直播小程序完整互动功能

1. 推流 API 调用流程图

2. 拉流 API 调用流程图

# 三、小程序直播实现过程

微信小程序中的推拉流功能，需要用到微信提供的 live-player live-pusher 标签

# 3.1 live-player

live-player 是微信提供的支持实时音视频播放的组件，官方介绍详见组件介绍。

创建 live-player 的演示源码如下

<live-player
    autoplay
    wx:if="{{item.playUrl}}"
    id="{{item.streamID}}"
    mode="RTC"
    object-fit="fillCrop"
    min-cache="0.1"
    max-cache="0.3"
    src="{{item.playUrl}}"
    debug="{{pushConfig.showLog}}"
    bindstatechange="onPlayStateChange"
    bindnetstatus="onPlayNetStateChange"
    binderror="error">
    <cover-view class='character' style='padding: 0 5px;'>{{item.streamID}}</cover-view>
</live-player>

请注意

• live 模式主要用于直播类场景，比如赛事直播、在线教育、远程培训等等。该模式下，小程序内部的模块会优先保证观看体验的流畅，通过调整 min-cache 和 max-cache 属性，您可以调节观众(播放)端所感受到的时间延迟的大小，文档下面会详细介绍这两个参数
• RTC 则主要用于双向视频通话或多人视频通话场景，比如金融开会、在线客服、车险定损、培训会议 等等。在此模式下，对 min-cache