基础知识 - 视频直播

移动直播、视频直播、Live Video Streaming有多么火爆，搜搜这几个关键字就知道了。直播的形态也在不断发展中：美女秀场 -> 游戏直播 -> 全民直播。相应的拍摄设备也在变化，PC -> 智能设备 -> VR设备。直播技术并不是什么新技术，google一下就有很多资料可查。

这里列几篇入门参考：
[list][*][url=http://tech.lmtw.com/technews/201504/115637.html]深入浅出看流媒体前世今生[/url]
[*][url=http://www.niaogebiji.com/article-10283-1.html]关于大热的移动直播，你应该知道这些[/url]
[*][url=http://www.tmtpost.com/2400619.html]YY、六间房、9158…那些老牌直播平台为什么在移动时代掉了链子？[/url]
[*][url=http://www.leiphone.com/news/201607/Nhq9iveY5y5fQ3Gw.html]如何快速搭建一个完整的移动直播系统？[/url]
[*][url=http://www.cnblogs.com/haibindev/archive/2012/04/16/2450989.html]实现输出h264直播流的rtmp服务器[/url]
[*][url=http://www.alloyteam.com/2016/05/h5-camera-literacy/]H5视频直播扫盲[/url]
[*][url=http://dev.qq.com/topic/5811d42e7fd6ec467453bf58]从0到1打造直播 App[/url]
[*][url=http://lib.youkuaiyun.com/base/liveplay/structure]直播技术知识结构[/url][/list]

视频直播相当耗流量、对性能延迟等要求也很高，所以很少会自己开发视频直播技术，目前多采用第三方成熟的云直播平台。但应该掌握基本的视频直播技术。

[b]（1）流媒体协议[/b]
RTP：Real Time Transport Protocol 实时传输协议
RTSP：Real Time Streaming Protocol 实时流传输协议，传统的监控摄像机多用RTSP
RTMP：Real Time Messaging Protocol 实时消息传送协议，Adobe出品用于Flash Player
MMS：Microsoft Media Server 微软媒体服务器协议，Microsoft出品用于Windows Media Player

基于HTTP的流媒体技术：
HLS：Apple HTTP Live Streaming
HDS：Adobe HTTP Dynamic Streaming
MSS：Microsoft Smooth Streaming
MPEG-DASH：MPEG Dynamic Adaptive Streaming over HTTP

以及一些相对应的变种。
[img]http://dl2.iteye.com/upload/attachment/0119/6769/71892af6-9b4a-3ec2-a3c6-e123d2b92977.png[/img]

[b]（2）主流方案[/b]

移动友好的主流方案：[color=blue]RTMP推流、HLS拉流！[/color]

Apple的HLS基于HTTP的流媒体传输协议，在服务器端将媒体分隔为很短时长的小媒体文件（MPEG-TS格式），客户端不断的下载并播放这些小文件，而服务器端总是会将最新的直播数据生成新的小文件，这样客户端只要不停的按顺序播放从服务器获取到的文件实现直播。

*** WebRTC 和 WebSocket 目前兼容性都不是很好。

流程
媒体文件/媒体流/摄像头 -> ffmpeg -> rtmp -> nginx server -> HLS -> Client
[img]http://dl2.iteye.com/upload/attachment/0119/6771/d74d2450-07ee-3280-a293-bb885eaa256c.png[/img]

编解码
FFmpeg [url=https://ffmpeg.org/]https://ffmpeg.org/[/url]
HandBrake [url=https://handbrake.fr/]https://handbrake.fr/[/url]
GStreamer [url=https://gstreamer.freedesktop.org/]https://gstreamer.freedesktop.org/[/url]

[b]（3）搭建RTMP服务器（基于CentOS）[/b]

1）安装（nginx+nginx-rtmp-module）

# yum -y install gcc gcc-c++ pcre pcre-devel openssl openssl-devel

# cd /usr/local/src
# wget http://nginx.org/download/nginx-1.11.3.tar.gz
# tar -zxvf nginx-1.11.3.tar.gz

# yum install git
# git --version  
# git clone https://github.com/arut/nginx-rtmp-module.git

# cd nginx-1.11.3
# ./configure --prefix=/usr/local/nginx-1.11.3 --with-http_realip_module --with-http_ssl_module --add-module=/usr/local/src/nginx-rtmp-module
# make
# make install

# ln -s /usr/local/nginx-1.11.3 /usr/local/nginx
# cd /usr/local/nginx/sbin/
# ./nginx
# curl http://localhost/

2）配置

# vi /usr/local/nginx/conf/nginx.conf
    # RTMP configuration
    rtmp {
        server {
            # Listen on standard RTMP port
            listen 1935; 
            chunk_size 4000;

            application show {
                live on;
                # Turn on HLS
                hls on;
                hls_path /tmp/hls/;
                hls_fragment 3;
                hls_playlist_length 60;
                # Disable consuming the stream from nginx as rtmp
                deny play all;
            }
        }
    }

    http {

        server {

            location /hls {
                # Disable cache
                add_header 'Cache-Control' 'no-cache';

                # CORS setup
                add_header 'Access-Control-Allow-Origin' '*' always;
                add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
                add_header 'Access-Control-Allow-Headers' 'Range';

                # Allow CORS preflight requests
                if ($request_method = 'OPTIONS') {
                    add_header 'Access-Control-Allow-Origin' '*';
                    add_header 'Access-Control-Allow-Headers' 'Range';
                    add_header 'Access-Control-Max-Age' 1728000;
                    add_header 'Content-Type' 'text/plain charset=UTF-8';
                    add_header 'Content-Length' 0;
                    return 204;
                }

                # Serve HLS fragments
                types {
                    application/dash+xml mpd;
                    application/vnd.apple.mpegurl m3u8;
                    video/mp2t ts;
                }

                root /tmp;
            }
        }
    }

# /usr/local/nginx/sbin/nginx -s reload

3）推流测试OBS [url=https://obsproject.com/]https://obsproject.com/[/url]
Mode -> Live Stream
FMSURL -> rtmp://localhost:1935/show
Stream Key -> mystream
[img]http://dl2.iteye.com/upload/attachment/0119/5588/57a15108-8d5f-358c-b16e-43480300457f.png[/img]

4）拉流测试VLC media player [url=http://www.videolan.org/]http://www.videolan.org/[/url]
Network URL -> rtmp://localhost:1935/show/mystream
[img]http://dl2.iteye.com/upload/attachment/0119/5590/1e08e43f-4a8e-3e9e-af85-b73efe7ff07c.png[/img]

5）.m3u8文件确认

# cd /tmp/hls
# ll
    -rw-r--r-- 1 nobody nobody 1093596 Aug 23 13:41 mystream-0.ts
    -rw-r--r-- 1 nobody nobody  465112 Aug 23 13:41 mystream-1.ts
    -rw-r--r-- 1 nobody nobody 1060132 Aug 23 13:41 mystream-2.ts
    -rw-r--r-- 1 nobody nobody     181 Aug 23 13:41 mystream.m3u8
# cat mystream.m3u8
    #EXTM3U
    #EXT-X-VERSION:3
    #EXT-X-MEDIA-SEQUENCE:0       第一个TS分片的序列号
    #EXT-X-TARGETDURATION:8       每个分片TS的最大的时长
    #EXT-X-DISCONTINUITY
    #EXTINF:8.333,
    mystream-0.ts
    #EXTINF:3.534,
    mystream-1.ts
    #EXTINF:8.033,
    mystream-2.ts

测试结果：
[img]http://dl2.iteye.com/upload/attachment/0119/5188/df144d7a-46d0-3bf4-a166-78fe030ee74a.gif[/img]

6）ffmpeg [url=https://ffmpeg.org/]https://ffmpeg.org/[/url]

安装

# yum -y install epel-release
# rpm -Uvh http://li.nux.ro/download/nux/dextop/el7/x86_64/nux-dextop-release-0-5.el7.nux.noarch.rpm
# yum -y --enablerepo=epel,nux-dextop install ffmpeg
# ffmpeg -version

推流
file
[quote]ffmpeg -re -i mydir/myfile.mkv -c:v libx264 -b:v 5M -pix_fmt yuv420p -c:a:0 libfdk_aac -b:a:0 480k -f flv rtmp://localhost/show/mystream[/quote]
webcam
[quote]ffmpeg -re -f video4linux2 -i /dev/video0 -c:v libx264 -b:v 5M -pix_fmt yuv420p -c:a:0 libfdk_aac -b:a:0 480k -f flv rtmp://localhost/show/mystream[/quote]
stream
[quote]ffmpeg -i rtmp://example.com/appname/streamname -c:v libx264 -b:v 5M -pix_fmt yuv420p -c:a:0 libfdk_aac -b:a:0 480k -f flv rtmp://localhost/show/mystream[/quote]

测试结果：
[img]http://dl2.iteye.com/upload/attachment/0119/5397/2580c991-5277-3a0b-b818-ee5b04b3f16a.gif[/img]

7）HLS拉流
基于开源播放器 [url=http://mediaelementjs.com/]MediaElement.js[/url] 来播放HLS。PC端除了Safari支持直接播放HLS以外，IE、Chrome、Firefox、Opera等浏览器都支持使用基于Flashls插件的播放器。iOS平台、Android平台目前也都支持HLS播放。

[b]player.html[/b]

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Live Streaming</title>
    <script src="./mediaelement-2.22.1/build/jquery.js"></script>
    <script src="./mediaelement-2.22.1/build/mediaelement-and-player.min.js"></script>
    <link rel="stylesheet" href="./mediaelement-2.22.1/build/mediaelementplayer.min.css" />
</head>
<body>
<video width="640" height="360" id="player1">
  <source type="application/x-mpegURL" src="http://192.168.21.175/hls/mystream.m3u8" />
</video>
<span id="player1-mode"></span>
<script>
$(document).ready(function () {
    $('video').mediaelementplayer({
        success: function(media, node, player) {
            $('#' + node.id + '-mode').html('mode: ' + media.pluginType);
        }
    });
});
</script>
</body>
</html>

测试结果：
[img]http://dl2.iteye.com/upload/attachment/0119/5407/0cf44405-4fea-394e-928b-103412f7e3be.gif[/img]
Android截图:
[img]http://dl2.iteye.com/upload/attachment/0119/5586/e0027ce5-fada-3034-a166-19ec6ee8821a.jpg[/img]

[b]（4）移动端采集摄像头Camera视频源进行数据推流[/b]

RTSP直播（不怎么维护了）
libstreaming https://github.com/fyhertz/libstreaming
秒拍的VitamioBundle（需要授权）
https://github.com/yixia/VitamioBundle
大牛直播的SmarterStreaming
https://github.com/daniulive/SmarterStreaming
B站的ijkplayer
https://github.com/Bilibili/ijkplayer

阿里云ApsaraVideo，腾讯云、金山云、七牛云、乐视云、奥点云等各大云服务平台的直播SDK。这里测试一下金山云Android采集推流SDK(Livestream SDK)，从[url=https://github.com/ksvc/KSYStreamer_Android]https://github.com/ksvc/KSYStreamer_Android[/url]这里下载demo工程，运行即可。

测试结果：
[img]http://dl2.iteye.com/upload/attachment/0119/6959/0bce4dfc-7a1f-33b5-82f6-cd8e41040410.png[/img]