移动端直播的几种方案

移动端直播三种方案简介与实现

---

最近需要实现一个移动端直播和播放资源的方案，把接触和实现的部分整合一下记录下来，主要涉及HTML5。

本文中主要简单实现了三种视频直播的方法，并对视频直播方案做了一个总结。主要包含：

1. RMTP + Nginx + HLS
2. Node.js + WebSocket + canvas
3. flv.js + WebView

1.直播流程

直播主要分为三个部分，视频录制端、视频播放端、视频服务器端。 参考了AlloyTeam的博客。

1. 视频录制端：一般是电脑上的音视频输入设备或者手机端的摄像头或者麦克风，目前以移动端的手机视频为主。
2. 视频播放端：可以是电脑上的播放器，手机端的native播放器，还有就是h5的video标签等，目前还是已手机端的native播放器为主。
3. 视频服务器端：一般是一台nginx服务器，用来接受视频录制端提供的视频源，同时提供给视频播放端流服务。

2.ffmpeg

对于摄像头/音频采集装置，数据采集到上传主要包含以下步骤。
1. 音视频的采集，ios中，利用AVCaptureSession和AVCaptureDevice可以采集到原始的音视频数据流。
2. 对视频进行H264编码，对音频进行AAC编码，在ios中分别有已经封装好的编码库来实现对音视频的编码。
3. 对编码后的音、视频数据进行组装封包；
4. 建立RTMP连接并上推到服务端。

而ffmpeg是一个完整的编码库，集推流、编码与一身的强大工具,想深入了解ffmpeg的移步此处。可以完成我们本地从原始音视频数据流到编码到推送的整个步骤。

举个栗子：mp4格式转换为avi格式

ffmpeg -i input.mp4 output.avi

3.推流

所谓推流，就是将我们已经编码好的音视频数据发往视频流服务器中，使用ffmpeg进行推流。

4.HTML5 Video

HTML5中新添加了Video标签，支持IOS/Android 播放视频。而且支持多种浏览器，具体可移步这里。

方案一 RMTP + nginx + HLS协议

方案一原理介绍

1.HLS原理

HLS把视频流切分为一个个小的文件，用HTTP下载，每次只下载一个，引入.m3u8文件和ts文件。 ts存放视频内容，.m3u8动态改变，包含配置与路径。
为了加速，
加速：.m3u8放在web服务器，ts文件放在cdn上

2.直播延迟

hls协议是将直播流分成一段一段的小段视频去下载播放的，所以假设列表里面的包含5个ts文件，每个TS文件包含5秒的视频内容，那么整体的延迟就是25秒。在已经录制好推送的前提下，延迟较小。但直播延迟很高。

3.RMTP

Real Time Messaging Protocol（简称 RTMP）是 Macromedia 开发的一套视频直播协议，现在属于 Adobe。和HLS一样都可以应用于视频直播，区别是RTMP基于flash无法在ios的浏览器里播放，但是实时性比HLS要好。所以一般使用这种协议来上传视频流，也就是视频流推送到服务器。

方案一实现：

服务器部署：

本地推流:

视频文件推流：

ffmpeg -re -i /Users/Downloads/test1.mp4 -vprofile baseline -vcodec copy -acodec copy -strict -2 -f flv rtmp://192.168.2.100/hls/test

直播推流：

ffmpeg -f avfoundation -framerate 30 -video_size 640x480 -i  "0"  -vcodec libx264 -acodec libfaac -f flv  rtmp://192.168.2.100/app_name/test1

效果：

方案二 Node.js + WebSocket + canvas

原理：

方案二实现：

效果：

方案三 flv.js + HTML5

未完待续……