HTML 5 视频直播一站式扫盲

2016-07-05 08:39:00

本文来自于腾讯bugly开发者社区，非经作者同意，请勿转载，原文地址：http://bugly.qq.com/bbs/forum.php?mod=viewthread&tid=1277

视频直播这么火，再不学就 out 了。

为了紧跟潮流，本文将向大家介绍一下视频直播中的基本流程和主要的技术点，包括但不限于前端技术。

1. H5 到底能不能做视频直播？

当然可以，H5 火了这么久，涵盖了各个方面的技术。

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

对于视频播放，可以使用 HLS(HTTP Live Streaming)协议播放直播流，ios 和 android 都天然支持这种协议，配置简单，直接使用 video 标签即可。

webRTC 兼容性：

超级产品经理
Your browser does not support HTML5 video.

### 2. 到底什么是 HLS 协议？简单讲就是把整个流分成一个个小的，基于 HTTP 的文件来下载，每次只下载一些，前面提到了用于 H5 播放直播视频时引入的一个 .m3u8 的文件，这个文件就是基于 HLS 协议，存放视频流元数据的文件。每一个 .m3u8 文件，分别对应若干个 ts 文件，这些 ts 文件才是真正存放视频的数据，m3u8 文件只是存放了一些 ts 文件的配置信息和相关路径，当视频播放时，.m3u8 是动态改变的，video 标签会解析这个文件，并找到对应的 ts 文件来播放，所以一般为了加快速度，.m3u8 放在 web 服务器上，ts 文件放在 cdn 上。.m3u8 文件，其实就是以 UTF-8 编码的 m3u 文件，这个文件本身不能播放，只是存放了播放信息的文本文件：

EXTM3U m3u文件头

EXT-X-MEDIA-SEQUENCE 第一个TS分片的序列号

EXT-X-TARGETDURATION 每个分片TS的最大的时长

EXT-X-ALLOW-CACHE 是否允许cache

EXT-X-ENDLIST m3u8文件结束符

EXTINF 指定每个媒体段(ts)的持续时间（秒），仅对其后面的URI有效

mystream-12.ts

**ts 文件：**![超级产品经理](https://v1cdn.imspm.com/imspm.com超级产品经理2016070608mhcun54ai3b.jpg)      Your browser does not support HTML5 video.

需要注意的是，给 video 标签增加 webkit-playsinline 属性，这个属性是为了让 video 视频在 ios 的 uiwebview 里面可以不全屏播放，默认 ios 会全屏播放视频，需要给 uiwebview 设置 allowsInlineMediaPlayback＝YES。业界比较成熟的 videojs，可以根据不同平台选择不同的策略，例如 ios 使用 video 标签，pc 使用 flash 等。

11. 坑点总结

简根据以上步骤，笔者写了一个 demo，从实现 ios 视频录制，采集，上传，nginx 服务器下发直播流，h5 页面播放直播视频者一整套流程，总结出以下几点比较坑的地方：

在使用 AVCaptureSession 进行采集视频时，需要实现 AVCaptureVideoDataOutputSampleBufferDelegate 协议，同时在 - (void)captureOutput:(AVCaptureOutput )captureOutput didOutputSampleBuffer:(CMSampleBufferRef)sampleBuffer fromConnection:(AVCaptureConnection )connection 捕获到视频流，要注意的是 didOutputSampleBuffer 这个方法不是 didDropSampleBuffer 方法，后者只会触发一次，当时开始写的是 didDropSampleBuffer 方法，差了半天才发现方法调用错了。
在使用 rtmp 推流时，rmtp 地址要以 rtmp:// 开头，ip 地址要写实际 ip 地址，不要写成 localhost，同时要加上端口号，因为手机端上传时是无法识别 localhos t的。

这里后续会补充上一些坑点，有的需要贴代码，这里先列这么多。