h5直播开发

  • 时间:
  • 浏览:805
  • 来源:成都艾邦软件开发

H5直播系统是什么?

H5直播也有着一套完整的直播系统,含视频录制端、视频播放端、视频服务器端。H5直播,推流还是需要移动端或者摄像头,H5直播提供更多的依旧是观看,其实与传统直播系统是差不多的。

H5直播具有怎样的优势?

做品牌宣传的朋友都知道,H5是一个重要的表现方式。H5直播源码研发周期较短,尤其强化了web网页的表现性能。

除了微信之外,不少浏览器都可用H5观看视频,所以相对flash而言,不需要安装插件,所以传播更快。

H5相比flash而言,对CPU及内存的占用都要低一些,所以能够有效减少卡顿及发烫的现象。

想要搭建H5直播源码,WebRTC必不可少。

名称源自网页即时通信(英语:Web Real-Time Communication)的缩写,是一个支持网页浏览器进行实时语音对话或视频对话的API。

WebRTC实现了基于网页的视频会议,标准是WHATWG 协议,目的是通过浏览器提供简单的javascript就可以达到实时通讯(Real-Time Communications (RTC))能力。

H5直播源码开发中的WebRTC,主要有以下几个优点:

具有良好的通用性,几乎在任何平台都可以正常使用。

其使用的Interactive Connectivity Establishment(ICE)能让各个设备之间自动匹配当前最好的通讯方式,这是很多别的技术都不具备的。

具备全双工的能力,即双向通讯(P2P),不仅可作为单向直播使用还能完成电子视频会议的双向音视频对话。

为Google旗下,具有良好的发展前景,最重要的:开源。

直播的大致流程:

APP端调用摄像头 -》 拍摄视频 -》 实时上传视频 -》 服务器端获取视频并解码 -》 存储成一小段一小段视频 -》 服务器端进行推流 -》 H5或者app端通过一个url拉取视频流进行播放

实际的直播和用户播放的直播会有10秒左右或者更高的延迟,这一点对于后面开发比较重要,一定要注意这个点。

怎么用H5直播源码开发直播功能

直播一共有三种状态:直播前,直播中,结束。

针对每个状态我们肯定会有不同的显示,这三种状态可以是三个页面,相互切换,或者一个页面,控制页面相关隐藏和显示。 可是我们怎么知道,我们可以用websocket,通过服务端的推送websocket广播,当获取到的直播状态和当前状态不同,便进行相应切换。

但是有时候可能因为暂时的网络原因或者其他原因,websocket的广播消息,我们并没有获取到。 所以可以让websocket间隔性的广播直播状态。

总之,通过H5直播源码搭建的直播系统不仅能够在网页实现高清流畅播放,还能加入很多的交互功能。是进行网页端直播、品牌宣传的有力工具之一。

前言

前不久抽空对目前比较火的视频直播做了下研究与探索了解其整体实现流程以及探讨移动端HTML5直播可行性方案。

发现目前 WEB 上主流的视频直播方案有 HLS 和 RTMP移动 WEB 端目前以 HLS 为主HLS存在延迟性问题也可以借助 video.js 采用RTMPPC端则以 RTMP 为主实时性较好接下来将围绕这两种视频流协议来展开H5直播主题分享。

一、视频流协议HLS与RTMP

1. HTTP Live Streaming

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

  1. 编码以 H.263 格式对图像进行编码以 MP3 或者 HE-AAC 对声音进行编码最终打包到 MPEG-2 TSTransport Stream容器之中
  2. 分割把编码好的 TS 文件等长切分成后缀为 ts 的小文件并生成一个 .m3u8 的纯文本索引文件

浏览器使用的是 m3u8 文件。m3u8 跟音频列表格式 m3u 很像可以简单的认为 m3u8 就是包含多个 ts 文件的播放列表。播放器按顺序逐个播放全部放完再请求一下 m3u8 文件获得包含最新 ts 文件的播放列表继续播周而复始。整个直播过程就是依靠一个不断更新的 m3u8 和一堆小的 ts 文件组成m3u8 必须动态更新ts 可以走 CDN。一个典型的 m3u8 文件格式如下

#EXTM3U#EXT-X-STREAM-INF:PROGRAM-ID1, BANDWIDTH200000gear1/prog_index.m3u8#EXT-X-STREAM-INF:PROGRAM-ID1, BANDWIDTH311111gear2/prog_index.m3u8#EXT-X-STREAM-INF:PROGRAM-ID1, BANDWIDTH484444gear3/prog_index.m3u8#EXT-X-STREAM-INF:PROGRAM-ID1, BANDWIDTH737777gear4/prog_index.m3u8

可以看到 HLS 协议本质还是一个个的 HTTP 请求 / 响应所以适应性很好不会受到防火墙影响。但它也有一个致命的弱点延迟现象非常明显。如果每个 ts 按照 5 秒来切分一个 m3u8 放 6 个 ts 索引那么至少就会带来 30 秒的延迟。如果减少每个 ts 的长度减少 m3u8 中的索引数延时确实会减少但会带来更频繁的缓冲对服务端的请求压力也会成倍增加。所以只能根据实际情况找到一个折中的点。

对于支持 HLS 的浏览器来说直接这样写就能播放了

video src”./bipbopall.m3u8″ height”300″ width”400″  preload”auto” autoplay”autoplay” loop”loop” webkit-playsinline”true”/video

注意HLS 在 PC 端仅支持safari浏览器类似chrome浏览器使用HTML5 video
标签无法播放 m3u8 格式可直接采用网上一些比较成熟的方案如sewise-player、MediaElement、videojs-contrib-hls、jwplayer。

2. Real Time Messaging Protocol

Real Time Messaging Protocol简称 RTMP是 Macromedia 开发的一套视频直播协议现在属于 Adobe。这套方案需要搭建专门的 RTMP 流媒体服务如 Adobe Media Server并且在浏览器中只能使用 Flash 实现播放器。它的实时性非常好延迟很小但无法支持移动端 WEB 播放是它的硬伤。
虽然无法在iOS的H5页面播放但是对于iOS原生应用是可以自己写解码去解析的, RTMP 延迟低、实时性较好。
浏览器端HTML5 video
标签无法播放 RTMP 协议的视频可以通过 video.js 来实现。

link href“/5.8.8/video-js.css” rel“stylesheet”video id“example_video_1″ class“video-js vjs-default-skin” controls preload“auto” width“640” height“264” loop“loop” webkit-playsinlinesource src“rtmp://10.14.221.17:1935/rtmplive/home” type‘rtmp/flv’/videoscript src“/5.8.8/video.js”/scriptscriptvideojs.options.flash.swf  ‘video.swf’;videojs(‘example_video_1′).ready(function() {this.play();});/script

3. 视频流协议HLS与RTMP对比

二、直播形式

目前直播展示形式通常以YY直播、映客直播这种页面居多可以看到其结构可以分成三层
① 背景视频层
② 关注、评论模块
③ 点赞动画

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

了解完直播形式之后接下来整体了解直播流程。
三、直播整体流程
直播整体流程大致可分为

  • 视频采集端可以是电脑上的音视频输入设备、或手机端的摄像头、或麦克风目前以移动端手机视频为主。
  • 直播流视频服务端一台Nginx服务器采集视频录制端传输的视频流(H264/ACC编码)由服务器端进行解析编码推送RTMP/HLS格式视频流至视频播放端。
  • 视频播放端可以是电脑上的播放器QuickTime Player、VLC手机端的native播放器还有就是 H5 的video标签等目前还是以手机端的native播放器为主。

web前端学习交流群328058344 禁止闲聊非喜勿进

四、H5 录制视频

对于H5视频录制可以使用强大的 webRTC Web Real-Time Communication是一个支持网页浏览器进行实时语音对话或视频对话的技术缺点是只在 PC 的 Chrome 上支持较好移动端支持不太理想。

  1. 使用 webRTC 录制视频基本流程
    ① 调用 window.navigator.webkitGetUserMedia()
    获取用户的PC摄像头视频数据。
    ② 将获取到视频流数据转换成 window.webkitRTCPeerConnection
    (一种视频流数据格式)。
    ③ 利用 WebScoket
    将视频流数据传输到服务端。

注意


虽然Google一直在推WebRTC目前已有不少成型的产品出现但是大部分移动端的浏览器还不支持 webRTC最新iOS 10.0也不支持所以真正的视频录制还是要靠客户端iOS,Android来实现,效果会好一些。


WebRTC支持度
  1. iOS原生应用调用摄像头录制视频流程
    ① 音视频的采集利用AVCaptureSession和AVCaptureDevice可以采集到原始的音视频数据流。
    ② 对视频进行H264编码对音频进行AAC编码在iOS中分别有已经封装好的编码库x264编码、faac编码、ffmpeg编码来实现对音视频的编码。
    ③ 对编码后的音、视频数据进行组装封包。
    ④ 建立RTMP连接并上推到服务端。

五、搭建NginxRtmp直播流服务

  1. 安装nginx、nginx-rtmp-module
    ① 先clone nginx项目到本地
brew tap homebrew/nginx

② 执行安装nginx-rtmp-module

brew install nginx-full –with-rtmp-module

2. nginx.conf配置文件配置RTMP、HLS

查找到nginx.conf配置文件路径/usr/local/etc/nginx/nginx.conf配置RTMP、HLS。

① 在http节点之前添加 rtmp 的配置内容

② 在http中添加 hls 的配置

3. 重启nginx服务

重启nginx服务浏览器中输入 http://localhost:8080是否出现欢迎界面确定nginx重启成功。

nginx -s reload

六、直播流转换格式、编码推流

当服务器端接收到采集视频录制端传输过来的视频流时需要对其进行解析编码推送RTMP/HLS格式视频流至视频播放端。通常使用的常见编码库方案如x264编码、faac编码、ffmpeg编码等。
鉴于 FFmpeg 工具集合了多种音频、视频格式编码我们可以优先选用FFmpeg进行转换格式、编码推流。

1.安装 FFmpeg 工具

brew install ffmpeg

2.推流MP4文件

视频文件地址/Users/gao/Desktop/video/test.mp4
推流拉流地址rtmp://localhost:1935/rtmplive/homertmp://localhost:1935/rtmplive/home

//RTMP 协议流ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -acodec aac -f flv rtmp://10.14.221.17:1935/rtmplive/home//HLS 协议流ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://10.14.221.17:1935/hls/test

注意
当我们进行推流之后可以安装VLC、ffplay支持rtmp协议的视频播放器本地拉流进行演示
3.FFmpeg推流命令
① 视频文件进行直播

ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://192.168.1.101:1935/hls/testffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://10.14.221.17:1935/hls/test

② 推流摄像头桌面麦克风录制进行直播

ffmpeg -f avfoundation -framerate 30 -i “1:0″ -f avfoundation -framerate 30 -video_size 640x480 -i “0” -c:v libx264 -preset ultrafast -filter_complex ‘overlaymain_w-overlay_w-10:main_h-overlay_h-10′ -acodec libmp3lame -ar 44100 -ac 1 -f flv rtmp://192.168.1.101:1935/hls/test

更多命令请参考
FFmpeg处理RTMP流媒体的命令大全
FFmpeg常用推流命令

七、H5 直播视频播放

移动端iOS和 Android 都天然支持HLS协议做好视频采集端、视频流推流服务之后便可以直接在H5页面配置 video 标签播放直播视频。

video controls preload“auto” autoplay“autoplay” loop“loop” webkit-playsinlinesource src“http://10.14.221.8/hls/test.m3u8″ type“application/vnd.apple.mpegurl” /p class“warning”Your browser does not support HTML5 video./p/video

八、总结

本文从视频采集上传服务器处理视频推流以及H5页面播放直播视频一整套流程,具体阐述了直播实现原理实现过程中会遇到很多性能优化问题。

① H5 HLS 限制必须是H264AAC编码。
② H5 HLS 播放卡顿问题server 端可以做好分片策略将 ts 文件放在 CDN 上前端可尽量做到 DNS 缓存等。
③ H5 直播为了达到更好的实时互动也可以采用RTMP协议通过video.js
实现播放。