如何利用Html5实现直播(上)

发布来源:云豹科技
发布人:云豹科技
2020-02-28 12:25:30

目前WEB端上主流的网络直播方案依托的视频流协议有HLS和RTMP,移动WEB端目前以HLS为主,PC端则以RTMP为主。接下来,小编将围绕着这两种视频流协议在网络直播方案中的应用,来说明如何利用Html5实现直播。

网络直播方案

一、视频流协议HLS与RTMP

HTTP Live Streaming(简称 HLS)是一个基于HTTP的视频流协议,由Apple 公司实现,Mac OS上的QuickTime、Safari以及iOS上的Safari都能很好的支持HLS,目前高版本Android也增加了对HLS的支持。一些常见的客户端如:MPlayerX、VLC 也都支持HLS协议。若要提供一个HLS的服务器,需要做两件事:

编码:以H.263格式对图像进行编码,以MP3或者HE-AAC 对声音进行编码,最终打包到MPEG-2 TS容器之中。分割:把编码好的TS文件等长切分成后缀为ts的小文件,并生成一个.m3u8的纯文本索引文件。由于后续还牵扯到很多编码环节,在这就不再展开,只做简单介绍。

Real Time Messaging Protocol(简称 RTMP)是Macromedia开发的一套视频直播协议,现在属于Adobe。这套方案需要搭建专门的RTMP流媒体服务如Adobe Media Server,并且在浏览器中只能使用Flash实现播放器。它的实时性非常好,延迟很小,但无法支持移动端WEB播放是它的硬伤。

虽然无法在iOS的H5页面播放,但是对于iOS原生应用是可以自己写解码去解析的,RTMP延迟低、实时性较好。浏览器端、HTML5 video标签无法播放 RTMP协议的视频,但可以通过video.js来实现。

二、网络直播方案主流形式

如果稍微简化下,目前的网络直播方案展示形式,其结构可以分成三层:1、背景视频层;2、关注、评论模块;3、点赞动画。

而现行Html5类似的直播页面,实现技术难点不大,其可以通过实现方式分为:1、底部视频背景使用video视频标签实现播放;2、关注、评论模块利用 WebScoket来实时发送和接收新的消息通过DOM 和CSS3实现点赞利用 CSS3动画;3、点赞利用 CSS3 动画。

网络直播方案

三、实现直播的简要流程

了解完网络直播方案的主流形式,如果将直播的流程简化下,大致分为如下步骤:

视频采集端:可以是电脑上的音视频输入设备、或手机端的摄像头、或麦克风,目前以移动端手机视频为主。

直播流视频服务端:一台Nginx服务器,采集视频录制端传输的视频流(H264/ACC编码),由服务器端进行解析编码,推送RTMP/HLS格式视频流至视频播放端。

视频播放端:可以是电脑上的播放器(QuickTime Player、VLC),手机端的native播放器,还有就是 H5 的video标签等,目前还是以手机端的native播放器为主。

由于篇幅限制,关于利用Html5录制视频、搭建Nginx+Rtmp直播流服务,直播流转换格式、编码推送等剩余的网络直播方案步骤,我们会放到下期再说,如果您对直播平台开发、直播系统开发感兴趣,欢迎咨询官方客服。

 本文章声明原创,转载请注明出自云豹科技www.yunbaokj.com

声明:
以上内容为云豹科技作者本人原创,未经作者本人同意,禁止转载,否则将追究相关法律责任
立即查看