技术控

    今日:3| 主题:49347
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] H5直播起航

[复制链接]
ぁ詠遠∝僾妳 发表于 2016-10-10 09:53:15
314 5

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
前不久抽空对目前比较火的视频直播,做了下研究与探索,了解其整体实现流程,以及探讨移动端HTML5直播可行性方案。
   发现目前 WEB 上主流的视频直播方案有 HLS 和 RTMP,移动 WEB 端目前以 HLS 为主(HLS存在延迟性问题,也可以借助 video.js 采用RTMP),PC端则以 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 的服务器需要做两件事:
  
       
  • 编码:以 H.263 格式对图像进行编码,以 MP3 或者 HE-AAC 对声音进行编码,最终打包到 MPEG-2 TS(Transport Stream)容器之中;   
  • 分割:把编码好的 TS 文件等长切分成后缀为 ts 的小文件,并生成一个 .m3u8 的纯文本索引文件;  
  浏览器使用的是 m3u8 文件。m3u8 跟音频列表格式 m3u 很像,可以简单的认为 m3u8 就是包含多个 ts 文件的播放列表。播放器按顺序逐个播放,全部放完再请求一下 m3u8 文件,获得包含最新 ts 文件的播放列表继续播,周而复始。整个直播过程就是依靠一个不断更新的 m3u8 和一堆小的 ts 文件组成,m3u8 必须动态更新,ts 可以走 CDN。一个典型的 m3u8 文件格式如下:
     #EXTM3U
   #EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=200000
   gear1/prog_index.m3u8
   #EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=311111
   gear2/prog_index.m3u8
   #EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=484444
   gear3/prog_index.m3u8
   #EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=737777
   gear4/prog_index.m3u8
    可以看到 HLS 协议本质还是一个个的 HTTP 请求 / 响应,所以适应性很好,不会受到防火墙影响。但它也有一个致命的弱点:延迟现象非常明显。如果每个 ts 按照 5 秒来切分,一个 m3u8 放 6 个 ts 索引,那么至少就会带来 30 秒的延迟。如果减少每个 ts 的长度,减少 m3u8 中的索引数,延时确实会减少,但会带来更频繁的缓冲,对服务端的请求压力也会成倍增加。所以只能根据实际情况找到一个折中的点。
  对于支持 HLS 的浏览器来说,直接这样写就能播放了:
  [code]
[/code]   注意 :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 来实现。
  [code]







[/code]  3. 视频流协议HLS与RTMP对比

                   协议     原理     延时     优点     使用场景                   HLS     短链接Http     集合一段时间数据生成ts切片文件更新m3u8文件     10s - 30s     跨平台     移动端为主             RTMP     长链接Tcp     每个时刻的数据收到后立即发送     2s     延时低、实时性好     PC+直播+实时性要求高+互动性强           二、直播形式

   
H5直播起航-1 (QuickTime,Android,浏览器,服务器,性问题)

  目前直播展示形式,通常以YY直播、映客直播这种页面居多,可以看到其结构可以分成三层:① 背景视频层 ② 关注、评论模块 ③ 点赞动画
  而现行H5类似直播页面,实现技术难点不大,其可以通过实现方式分为:① 底部视频背景使用video视频标签实现播放 ② 关注、评论模块利用 WebScoket 来实时发送和接收新的消息通过DOM 和 CSS3 实现 ③ 点赞利用 CSS3 动画
  了解完直播形式之后,接下来整体了解直播流程。
  三、直播整体流程

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


H5直播起航-2 (QuickTime,Android,浏览器,服务器,性问题)

  四、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)来实现,效果会好一些。
12下一页
友荐云推荐




上一篇:电商那些年,我摸爬打滚出的高并发架构实战精髓
下一篇:mvc-android
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

wodeai11 发表于 2016-10-11 18:06:53
无论是不是沙发都得回复下
回复 支持 反对

使用道具 举报

董利 发表于 2016-10-23 00:44:34
介是神马?!!
回复 支持 反对

使用道具 举报

陈发兴 发表于 2016-10-24 05:29:05
女孩从处女到女人只要一次并成功,男孩从处男变男人需要反复的磨练.
回复 支持 反对

使用道具 举报

侯海深 发表于 2016-10-24 05:30:15
我是露珠的小伙伴,我来帮露珠顶一个帖,露珠早点得到解答哟
回复 支持 反对

使用道具 举报

125673017 发表于 2016-10-25 23:26:49
为毛老子总也抢不到沙发?!!
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表