H5 火了这么久涵盖了各个方面的技术。对于视频录制可以使用强大的 webRTCWeb Real-Time Communication是一个支持网页浏览器进行实时语音对话或视频对话的技术缺点是只在 PC 的 chrome 上支持较好移动端支持不太理想。对于视频播放可以使用 HLS(HTTP Live Streaming)协议播放直播流 ios 和 android 都天然支持这种协议配置简单直接使用 video 标签即可。webRTC 兼容性video 标签播放 hls 协议视频video controls autoplay source srchttp://10.66.69.77:8080/hls/mystream.m3u8 typeapplication/vnd.apple.mpegurl / p classwarningYour browser does not support HTML5 video./p /video2. 到底什么是 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.tsts 文件HLS 的请求流程是1 http 请求 m3u8 的 url。2 服务端返回一个 m3u8 的播放列表这个播放列表是实时更新的一般一次给出5段数据的 url。3 客户端解析 m3u8 的播放列表再按序请求每一段的 url获取 ts 数据流。简单流程3. HLS 直播延时我们知道 hls 协议是将直播流分成一段一段的小段视频去下载播放的所以假设列表里面的包含5个 ts 文件每个 TS 文件包含5秒的视频内容那么整体的延迟就是25秒。因为当你看到这些视频时主播已经将视频录制好上传上去了所以时这样产生的延迟。当然可以缩短列表的长度和单个 ts 文件的大小来降低延迟极致来说可以缩减列表长度为1并且 ts 的时长为1s但是这样会造成请求次数增加增大服务器压力当网速慢时回造成更多的缓冲所以苹果官方推荐的ts时长时10s所以这样就会大改有30s的延迟。参考资料Frequently Asked Questions4. 视频直播的整个流程是什么当视频直播可大致分为1 视频录制端一般是电脑上的音视频输入设备或者手机端的摄像头或者麦克风目前以移动端的手机视频为主。2 视频播放端可以是电脑上的播放器手机端的 native 播放器还有就是 h5 的 video 标签等目前还是已手机端的 native 播放器为主。3 视频服务器端一般是一台 nginx 服务器用来接受视频录制端提供的视频源同时提供给视频播放端流服务。简单流程5. 怎样进行音视频采集当首先明确几个概念视频编码所谓视频编码就是指通过特定的压缩技术将某个视频格式的文件转换成另一种视频格式文件的方式我们使用的 iphone 录制的视频必须要经过编码上传解码才能真正的在用户端的播放器里播放。编解码标准视频流传输中最为重要的编解码标准有国际电联的H.261、H.263、H.264其中 HLS 协议支持 H.264 格式的编码。音频编码同视频编码类似将原始的音频流按照一定的标准进行编码上传解码同时在播放器里播放当然音频也有许多编码标准例如 PCM 编码WMA 编码AAC 编码等等这里我们 HLS 协议支持的音频编码方式是AAC编码。下面将利用 ios 上的摄像头进行音视频的数据采集主要分为以下几个步骤1 音视频的采集ios 中利用 AVCaptureSession和AVCaptureDevice 可以采集到原始的音视频数据流。2 对视频进行 H264 编码对音频进行 AAC 编码在 ios 中分别有已经封装好的编码库来实现对音视频的编码。3 对编码后的音、视频数据进行组装封包4 建立 RTMP 连接并上推到服务端。ps由于编码库大多使用 c 语言编写需要自己使用时编译对于 ios可以使用已经编译好的编码库。x264编码GitHub - kewlbear/x264-ios: Script to build x264 for iOS apps · GitHubfaac编码GitHub - fflydev/faac-ios-build: 编译好的iOS libfaac 静态库和编译脚本 · GitHubffmpeg编码GitHub - kewlbear/FFmpeg-iOS-build-script: Shell scripts to build FFmpeg for iOS and tvOS · GitHub关于如果想给视频增加一些特殊效果例如增加滤镜等一般在编码前给使用滤镜库但是这样也会造成一些耗时导致上传视频数据有一定延时。简单流程6. 前面提到的 ffmpeg 是什么和之前的 x264 一样ffmpeg 其实也是一套编码库类似的还有 XvidXvid 是基于 MPEG4 协议的编解码器x264是基于 H.264 协议的编码器 ffmpeg 集合了各种音频视频编解码协议通过设置参数可以完成基于 MPEG4,H.264 等协议的编解码demo 这里使用的是 x264 编码库。7. 什么是 RTMPReal Time Messaging Protocol简称 RTMP是 Macromedia 开发的一套视频直播协议现在属于 Adobe。和 HLS 一样都可以应用于视频直播区别是 RTMP 基于 flash 无法在 ios 的浏览器里播放但是实时性比 HLS 要好。所以一般使用这种协议来上传视频流也就是视频流推送到服务器。这里列举一下 hls 和 rtmp 对比8. 推流简所谓推流就是将我们已经编码好的音视频数据发往视频流服务器中一般常用的是使用 rtmp 推流可以使用第三方库 librtmp-iOS 进行推流librtmp 封装了一些核心的 api 供使用者调用如果觉得麻烦可以使用现成的 ios 视频推流sdk也是基于 rtmp 的GitHub - runner365/LiveVideoCoreSDK · GitHub9. 推流服务器搭建简简单的推流服务器搭建由于我们上传的视频流都是基于 rtmp 协议的所以服务器也必须要支持 rtmp 才行大概需要以下几个步骤1 安装一台 nginx 服务器。2 安装 nginx 的 rtmp 扩展目前使用比较多的是https://github.com/arut/nginx-rtmp-module3 配置 nginx 的 conf 文件rtmp { server { listen 1935; #监听的端口 chunk_size 4000; application hls { #rtmp推流请求路径 live on; hls on; hls_path /usr/local/var/www/hls; hls_fragment 5s; } } }4 重启 nginx将 rtmp 的推流地址写为 rtmp://ip:1935/hls/mystream其中 hls_path 表示生成的 .m3u8 和 ts 文件所存放的地址hls_fragment 表示切片时长mysteam 表示一个实例即将来要生成的文件名可以先自己随便设置一个。更多配置可以参考https://github.com/arut/nginx-rtmp-module/wiki/根据以上步骤基本上已经实现了一个支持 rtmp 的视频服务器了。10. 在 html5 页面进行播放直播视频简单来说直接使用 video 标签即可播放 hls 协议的直播视频video autoplay webkit-playsinline source srchttp://10.66.69.77:8080/hls/mystream.m3u8 typeapplication/vnd.apple.mpegurl / p classwarningYour browser does not support HTML5 video./p /video需要注意的是给 video 标签增加 webkit-playsinline 属性这个属性是为了让 video 视频在 ios 的 uiwebview 里面可以不全屏播放默认 ios 会全屏播放视频需要给 uiwebview 设置 allowsInlineMediaPlaybackYES。 业界比较成熟的 videojs可以根据不同平台选择不同的策略例如 ios 使用 video 标签pc 使用 flash 等。11. 坑点总结