龙空技术网

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

陀螺科技 158

前言:

此刻各位老铁们对“html5live”大约比较关心,大家都想要了解一些“html5live”的相关知识。那么小编也在网上收集了一些有关“html5live””的相关文章,希望你们能喜欢,兄弟们一起来学习一下吧!

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

微信小程序准备条件

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

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

微信小程序推流拉流直播的行业限制

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

微信小程序公众号后台直播录播组件开关设置

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

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

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

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

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

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

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

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

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

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

微信小程序拉流端属性的定义

定义一个直播间

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

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

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

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

获取直播状态接口

直播状态说明:

101直播中:表示主播正常开播102未开始:主播还未开播103已结束:关闭的直播,或系统强制结束的直播104禁播:表示因违规被禁播105暂停中:表示在MP后台操作暂停了直播106异常:表示主播离开、切后台、断网等情况107已过期:表示直播间一直未开播

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

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) })

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

微信小程序推流端属性的定义

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

微信小程序推流端代码示例

<live-pusher url="; mode="RTC" autopush bindstatechange="statechange" style="width: 300px; height: 225px;" />
Page({  statechange(e) {    console.log('live-pusher code:', e.detail.code)  }})
平台端直播间管理,登录、注册、回放等功能的实现

直播服务平台的搭建

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

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

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

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

编译测试

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

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

2. 输入小程序 AppID。

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

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

微信小程序调试实例图

发布上线

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

标签: #html5live