基于“腾讯云移动直播”的微信小程序直播技术开发与实现

2020年1月初，腾讯公司高级副总裁张小龙说，微信的发布内容应该各式各样，如文字、图片、视频等，不仅是是现在的图文。张小龙的讲话之后，微信直播应用的开发成为技术热点。但是，微信推出的看点直播限制太多，不能满足大量小众客户的需求，开发自己独有的小程序直播成为很多商家的需求。本文将围绕微信小程序借助“腾讯云移动直播”平台，开发嵌入在微信小程序中的直播应用的技术方案进行简单阐述，希望能对技术开发者提供启发和帮助。

开发之前需要了解各种限制条件，并准备实现的工具。借助“腾讯云移动直播”开发微信直播小程序，需要了解腾讯云直播拉流推流的限制条件。下图为借助腾讯云在微信小程序中实现直播行业的限制，也就是拥有哪些许可在可以在微信小程序中插入直播应用。

腾讯云与微信小程序公众平台对开发者许可做了严格的限制

满足行业要求，通过一系列审核之后，在微信小程序公众号后台开发设置中，打开“实时播放音视频流”，“实时录制音视频流”选项。就可以就行开发了。

微信小程序直播是通过小程序内组件和标签来实现的。在观众端前端使用 <live-pusher> 和 <live-player>就行推流和拉流。/<live-player>/<live-pusher>

基于腾讯云移动直播的微信小程序直播架构设计

上面，我们已经按照要求，准备了基本的开发条件。下面我们进行的技术架构设计。系统的技术架构包括系统的角色和系统的用例视图、设计视图、实现视图、进程视图、分布视图等各个层面描述的视图，为了简要期间，我们只列出基本的要点，不全面展示各个视图和要点。

系统的角色主要包括：观众、主播、腾讯云直播平台、直播管理平台几个发面。其中，腾讯云处于拉流和推流的中转站。

基于腾讯云移动直播的架构方案

主播通过手机、摄像头将数据采集，经过一定的算法，打包成一定格式的文件，通过RTMP协议推送到服务器，服务器进行两个方面的技术操作。一方面是，通过直播转码推送到直播源站，通过CDN分发到观众端，观众端通过拉流解压缩流媒体数据包进行观看；另一方面，主播在播放中，可以同时和观众互动，以及视频同步的录制。直播推流拉流就是这样的大概过程，在设计好基本的框架之后，我们就可以着手进行开发了。

拉流端、推流端、转码平台的设计与实现

因为我们开发是微信小程序直播，所以观众端，是在微信小程序中实现的。也就是拉流是通过小程序进行的。我们先看一一个DEMO。

腾信云移动直播提供的DEMO，我们可以在此基础上开发

腾讯云和微信公众平台提供了小程序端开发的demo，我们可以充分利用开放的demo进行设计和开发。我们知道，小程序之类的轻应用是基于nodejs框架开发的，微信小程序建构了自己的开发框架，并提供了开发的接口，我们可以按照微信公众平台提供的开发接口进行定义开发。

<code><view>  //定义一个video box  相当于HTML5中的DIV
    <live-player>        wx:for="{{player}}"
        id="player_{{index}}"
        mode="RTC"
        object-fit="fillCrop"
        class="lazy" data-original="{{item.playUrl}}" 
        autoplay='true'
        bindstatechange="onPlay">
   /<live-player>
 /<view>/<code>

因为要引入组件，所以按照微信小程序的开发，需要在配置文件中进行说明，详细的开发包，可以参照腾讯云官方提供的demo，本文只做示例性的说明。例如，在分包内引入直播组件“live-player-plugin” 代码包，项目根目录的 app.json 引用，示例代码如下：

<code>{   "subpackages": [   
  {   "root": "packageA",      
   "pages": [       
     "pages/home/home"       ],      
     "plugins": {        
     "live-player-plugin": {  
       "version": "1.0.0", // 填写该直播组件最新版本号 
   …………………………// 代码不完整，删除细节，开发时参考正式的demo
] }/<code>

观众端需要开发的代码文档目录

• 获取直播状态接口

直播状态说明：

• 101直播中：表示主播正常开播

• 102未开始：主播还未开播

• 103已结束：关闭的直播，或系统强制结束的直播

• 104禁播：表示因违规被禁播

• 105暂停中：表示在MP后台操作暂停了直播

• 106异常：表示主播离开、切后台、断网等情况

• 107已过期：表示直播间一直未开播

调用方法：若要调用“获取直播状态”接口getLiveStatus，需在小程序页面顶部引用【直播组件】live-player-plugin，示例代码如下：

<code>let livePlayer = requirePlugin('live-player-plugin') // 引入获取直播状态接口 
// 首次获取立马返回直播状态，往后间隔1分钟或更慢的频率去轮询获取直播状态 
const roomId = xxx // 房间id livePlayer.getLiveStatus({ room_id: roomId }) .then(res => {   // 101: 直播中, 102: 未开始, 103: 已结束, 104: 禁播, 105: 暂停中, 106: 异常, 107：已过期 
   const liveStatus = res.liveStatus }) .catch(err => {   console.log(err) })/<code>

• 推流端开发
• 推流可以采用PC端，安卓、iOS等不同的方法。下面以小程序作为推流示例。

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

<code><live-pusher>/<code>

<code>Page({
  statechange(e) {
    console.log('live-pusher code:', e.detail.code)
  }
})/<code>

• 平台端直播间管理，登录、注册、回放等功能的实现

直播服务平台的搭建

我们已经将一个有基本推拉流、聊天互动的小直播运行起来了。但是因为没有后台，无法实现账号注册登录、回放列表等功能。所以，我们需要架设一个平台，将上述功能实现。

这个平台的是管理平台，平台用户主要是主播和系统运营管理方，平台要实现域名添加、域名管理、流管理、模板管理、统计分析、日志管理、导播管理等功能。主播具有注册直播间管理直播间的功能，平台具有用户注册管理和直播间管理的功能。这是系统级别的要求。

开发这个管理平台需要系统级别的架构，可以自己进行开发，也可以利用云平台现有的功能进行集成。

经过以上步骤，小程序直播基本实现了。不过，如果要实现高级的功能，就要使用高级的功能接口了。比如连麦互动、AI 变脸和挂件、自定义采集和渲染、SDK 指标监控、禁播和流管理等。

编译测试

经过一系列的开发，我们就要进行编译测试小程序了。实际上开发和编译测试是同步进行的，为了更加清晰的逻辑说明，我们将开发和编译测试分不同的侧面进行阐述。编译测试的步骤如下：

1. 打开微信开发者工具，选择【小程序】菜单栏，然后单击新建图标，选择【导入项目】或者打开已经存在的项目。

2. 输入小程序 AppID。

3. 系统生成二维码，通过手机微信扫码二维码登录小程序开发者工具平台即可进入。

4.需要注意的是小程序 <live-player> 和 <live-pusher> 标签需要在手机微信上才能使用，微信开发者工具上无法使用。/<live-pusher>/<live-player>

发布上线

至此，经过多次编译测试以后，就可以在后台提交上线了。利用腾讯云直播，开发自己的微信小程序直播应用基本逻辑就是这样的。

閱讀更多 石家莊陀螺科技 的文章

關鍵字: 直播 腾讯 微信