前言:
此刻各位老铁们对“html5live”大约比较关心,大家都想要了解一些“html5live”的相关知识。那么小编也在网上收集了一些有关“html5live””的相关文章,希望你们能喜欢,兄弟们一起来学习一下吧!2020年1月初,腾讯公司高级副总裁张小龙说,微信的发布内容应该各式各样,如文字、图片、视频等,不仅是是现在的图文。张小龙的讲话之后,微信直播应用的开发成为技术热点。但是,微信推出的看点直播限制太多,不能满足大量小众客户的需求,开发自己独有的小程序直播成为很多商家的需求。本文将围绕微信小程序借助“腾讯云移动直播”平台,开发嵌入在微信小程序中的直播应用的技术方案进行简单阐述,希望能对技术开发者提供启发和帮助。
微信小程序准备条件
开发之前需要了解各种限制条件,并准备实现的工具。借助“腾讯云移动直播”开发微信直播小程序,需要了解腾讯云直播拉流推流的限制条件。下图为借助腾讯云在微信小程序中实现直播行业的限制,也就是拥有哪些许可在可以在微信小程序中插入直播应用。
满足行业要求,通过一系列审核之后,在微信小程序公众号后台开发设置中,打开“实时播放音视频流”,“实时录制音视频流”选项。就可以就行开发了。
微信小程序直播是通过小程序内组件和标签来实现的。在观众端前端使用 <live-pusher> 和 <live-player>就行推流和拉流。
基于腾讯云移动直播的微信小程序直播架构设计
上面,我们已经按照要求,准备了基本的开发条件。下面我们进行的技术架构设计。系统的技术架构包括系统的角色和系统的用例视图、设计视图、实现视图、进程视图、分布视图等各个层面描述的视图,为了简要期间,我们只列出基本的要点,不全面展示各个视图和要点。
系统的角色主要包括:观众、主播、腾讯云直播平台、直播管理平台几个发面。其中,腾讯云处于拉流和推流的中转站。
主播通过手机、摄像头将数据采集,经过一定的算法,打包成一定格式的文件,通过RTMP协议推送到服务器,服务器进行两个方面的技术操作。一方面是,通过直播转码推送到直播源站,通过CDN分发到观众端,观众端通过拉流解压缩流媒体数据包进行观看;另一方面,主播在播放中,可以同时和观众互动,以及视频同步的录制。直播推流拉流就是这样的大概过程,在设计好基本的框架之后,我们就可以着手进行开发了。
拉流端、推流端、转码平台的设计与实现
因为我们开发是微信小程序直播,所以观众端,是在微信小程序中实现的。也就是拉流是通过小程序进行的。我们先看一一个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