移动直播、视频直播、Live Video Streaming有多么火爆,搜搜这几个关键字就知道了。直播的形态也在不断发展中:美女秀场 -> 游戏直播 -> 全民直播。相应的拍摄设备也在变化,PC -> 智能设备 -> VR设备。直播技术并不是什么新技术,google一下就有很多资料可查。
这里列几篇入门参考:
- 深入浅出看流媒体前世今生
- 关于大热的移动直播,你应该知道这些
- YY、六间房、9158…那些老牌直播平台为什么在移动时代掉了链子?
- 如何快速搭建一个完整的移动直播系统?
- 实现输出h264直播流的rtmp服务器
- H5视频直播扫盲
视频直播相当耗流量、对性能延迟等要求也很高,所以很少会自己开发视频直播技术,目前多采用第三方成熟的云直播平台。但应该掌握基本的视频直播技术。
(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工程,运行即可。
测试结果: