基础知识 - 视频直播

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

这里列几篇入门参考:

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

(1)流媒体协议
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

以及一些相对应的变种。


(2)主流方案

移动友好的主流方案: RTMP推流、HLS拉流!

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

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

流程
媒体文件/媒体流/摄像头 -> ffmpeg -> rtmp -> nginx server -> HLS -> Client


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

(3)搭建RTMP服务器(基于CentOS)

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 https://obsproject.com/
Mode -> Live Stream
FMSURL -> rtmp://localhost:1935/show
Stream Key -> mystream


4)拉流测试VLC media player http://www.videolan.org/
Network URL -> rtmp://localhost:1935/show/mystream


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


测试结果:


6)ffmpeg https://ffmpeg.org/

安装
# 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
引用
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

webcam
引用
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

stream
引用
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


测试结果:


7)HLS拉流
基于开源播放器 MediaElement.js 来播放HLS。PC端除了Safari支持直接播放HLS以外,IE、Chrome、Firefox、Opera等浏览器都支持使用基于Flashls插件的播放器。iOS平台、Android平台目前也都支持HLS播放。

player.html
<!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>


测试结果:

Android截图:


(4)移动端采集摄像头Camera视频源进行数据推流

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),从 https://github.com/ksvc/KSYStreamer_Android这里下载demo工程,运行即可。

测试结果:

猜你喜欢

转载自rensanning.iteye.com/blog/2319683