使用手机摄像头实现视频监控实时播放
一、概述
视频监控实时播放的原理与目前较为流行的直播是一致的，所以采用直播的架构实现视频监控实时播放，流程图如下：
目前实时视频流的传输协议有以下几种：RTSP、RTMP、HLS、Http-flv。
安卓APP开发使用HBuilder，而HBuilder内置了LivePusher直播推流控件，该控件使用了RTMP协议，所以暂时选择使用RTMP协议
| 协议 | RTSP | RTMP | HLS | Http-flv |
|---|---|---|---|---|
| 实时预览 | √ | √ | √ | √ |
| 实时回放 | √ | √ | √ | √ |
| 定位 | √ | √ | √ | × |
| 暂停恢复 | √ | √ | √ | × |
| 视频加密 | √ | × | √ | √ |
| 视频格式 | H264/H265 | H264/H265 | H264 | H264/H265 |
| 音频格式 | G711u, G711a, G726, MP2L2, AAC | AAC | AAC | AAC |
| 首屏时间 | 1秒 | 1秒 | 3~4秒 | 1秒 |
| 播放延迟 | 1秒 | 1秒 | 3~4秒 | 1秒 |
二、RTMP服务器搭建
RTMP服务器使用nginx+rtmp模块搭建，linux下可以下载nginx源代码+nginx-rtmp-module模块重新编译，windows下nginx编译较为麻烦，可以下载nginx 1.7.11.3 Gryphon，然后再下载nginx-rtmp-module模块进行配置即可
相关软件下载地址
nginx地址：https://github.com/nginx/nginx
nginx-rtmp-module地址：https://github.com/arut/nginx-rtmp-module/
nginx 1.7.11.3 Gryphon地址：http://nginx-win.ecsds.eu/download/nginx 1.7.11.3 Gryphon.zip
ffmpeg地址：https://ffmpeg.org/download.html
服务器搭建步骤
- 下载nginx 1.7.11.3 Gryphon后解压到任意目录，注意目录中尽量不带中文字符和空格
- 下载nginx-rtmp-module（直接从github clone或下载zip压缩包），将nginx-rtmp-module目录放到nginx的根目录下，与conf目录同级
- 将conf/nginx-win.conf复制一份，改名为nginx.conf
- 配置nginx.conf文件，增加rtmp的server，同时给http的server中增加路径映射
- 启动nginx
- 打开http://localhost/stat查看状态
- 使用ffmpeg进行直播测试
nginx配置
在http段之前增加以下内容：
rtmp {
server {
listen 1935;
application live {
live on;
record off;
publish_notify on;
#on_publish http://localhost:8080/newsweb/api/v1/rtmp/on_publish;
#on_publish_done http://localhost:8080/newsweb/api/v1/rtmp/on_publish_done;
#on_play http://localhost:8080/newsweb/api/v1/rtmp/on_play;
#on_play_done http://localhost:8080/newsweb/api/v1/rtmp/on_play_done;
}
application hls {
live on;
hls on; #是否开启hls
hls_path temp/hls; #本地切片路径
hls_fragment 8s; #本地切片长度
publish_notify on;
#on_publish http://localhost:8080/newsweb/api/v1/rtmp/on_publish;
#on_publish_done http://localhost:8080/newsweb/api/v1/rtmp/on_publish_done;
#on_play http://localhost:8080/newsweb/api/v1/rtmp/on_play;
#on_play_done http://localhost:8080/newsweb/api/v1/rtmp/on_play_done;
}
}
}
在http->server下，location /段之前增加以下内容：
location /stat {
rtmp_stat all;
rtmp_stat_stylesheet stat.xsl;
}
location /stat.xsl {
root nginx-rtmp-module/;
}
#HLS配置开始,这个配置为了`客户端`能够以http协议获取HLS的拉流
location /hls {
#server hls fragments
types{
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
alias temp/hls;
expires -1;
}
注：其中rtmp段中的on_publish、on_publish_done、on_play、on_play_done是事件触发，当直播开始、直播结束、观看开始、观看结束时，会触发指定的URL，并将推流和观看时的相关参数传递到相关URL上，如果HTTP返回的状态码不是200时表示鉴权失败，会直接阻断下一步的操作
直播测试
- 本地找一个mp4文件
- 使用在ffmpeg\bin目录下执行推流命令
- 使用ffplayer播放视频
#推流地址解释：rtmp://localhost:1935/live/home?p=v
#rtmp://为协议名
#localhost是域名
#1935为端口号，rtmp默认为1935端口
#live为nginx.conf中配置的rtmp标记
#home为指定字符串，生产环境中可以设置为设备ID或用户ID
#?p=v是附加参数，用于鉴权和记录直播开始使用
#ffmpeg推流测试：
ffmpeg.exe -re -i c:\ffmpeg\inputfile.mp4 -vcodec libx264 -acodec aac -f flv rtmp://127.0.0.1:1935/live/home
#ffmpeg 拉流测试：
ffplay.exe rtmp://localhost:1935/live/home
三、安卓APP推流
安卓APP推流使用HBuilder的LivePusher直播推流控件，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>Video Example</title>
<script type="text/javascript">
var pusher = null;
// H5 plus事件处理
function plusReady(){
// 创建直播推流控件
pusher = new plus.video.LivePusher('pusher',{
url:'rtmp://172.16.70.182:1935/live/phone',
mode:'SD',
muted:false,
});
pusher.preview();
// 监听状态变化事件
pusher.addEventListener('statechange', function(e){
console.log('statechange: '+JSON.stringify(e));
}, false);
}
document.addEventListener('plusready', plusReady, false);
// 设置推流服务器
function updatePusher() {
var url= document.getElementById('pushurl').value;
pusher.setOptions({
url:url
});
}
// 开始推流
function startPusher() {
console.log(pusher)
pusher.start();
}
// 切换摄像头
function switchCamera() {
pusher.switchCamera();
}
</script>
</head>
<body style="margin:0;padding:0;text-align:center;">
<div id="pusher" style="width:100%;height:300px;background-color:#000000;margin:auto"></div>
<br/>
<input type="text" id="pushurl" value="rtmp://172.16.70.182:1935/live/phone" style="width: 500px;"/> <br><br>
<button onclick="updatePusher()">更新推流服务器</button>
<br/><br>
<button onclick="startPusher()">开始推流</button>
<br><br>
<button onclick="switchCamera()">切换摄像头</button>
<br/><br/>
</body>
</html>
四、客户端观看直播
目前暂时使用VLC进行视频播放
VLC下载地址：https://www.videolan.org/vlc/