使用手机摄像头实现视频监控实时播放

一、概述

视频监控实时播放的原理与目前较为流行的直播是一致的，所以采用直播的架构实现视频监控实时播放，流程图如下：

#mermaid-svg-mUiqq5ywjTxQrBlT {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-mUiqq5ywjTxQrBlT .error-icon{fill:#552222;}#mermaid-svg-mUiqq5ywjTxQrBlT .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-mUiqq5ywjTxQrBlT .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-mUiqq5ywjTxQrBlT .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-mUiqq5ywjTxQrBlT .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-mUiqq5ywjTxQrBlT .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-mUiqq5ywjTxQrBlT .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-mUiqq5ywjTxQrBlT .marker{fill:#333333;stroke:#333333;}#mermaid-svg-mUiqq5ywjTxQrBlT .marker.cross{stroke:#333333;}#mermaid-svg-mUiqq5ywjTxQrBlT svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-mUiqq5ywjTxQrBlT .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-mUiqq5ywjTxQrBlT .cluster-label text{fill:#333;}#mermaid-svg-mUiqq5ywjTxQrBlT .cluster-label span{color:#333;}#mermaid-svg-mUiqq5ywjTxQrBlT .label text,#mermaid-svg-mUiqq5ywjTxQrBlT span{fill:#333;color:#333;}#mermaid-svg-mUiqq5ywjTxQrBlT .node rect,#mermaid-svg-mUiqq5ywjTxQrBlT .node circle,#mermaid-svg-mUiqq5ywjTxQrBlT .node ellipse,#mermaid-svg-mUiqq5ywjTxQrBlT .node polygon,#mermaid-svg-mUiqq5ywjTxQrBlT .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-mUiqq5ywjTxQrBlT .node .label{text-align:center;}#mermaid-svg-mUiqq5ywjTxQrBlT .node.clickable{cursor:pointer;}#mermaid-svg-mUiqq5ywjTxQrBlT .arrowheadPath{fill:#333333;}#mermaid-svg-mUiqq5ywjTxQrBlT .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-mUiqq5ywjTxQrBlT .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-mUiqq5ywjTxQrBlT .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-mUiqq5ywjTxQrBlT .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-mUiqq5ywjTxQrBlT .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-mUiqq5ywjTxQrBlT .cluster text{fill:#333;}#mermaid-svg-mUiqq5ywjTxQrBlT .cluster span{color:#333;}#mermaid-svg-mUiqq5ywjTxQrBlT div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-mUiqq5ywjTxQrBlT :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

推流

安卓APP

直播服务器

VLC播放器

其他播放端

目前实时视频流的传输协议有以下几种：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 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;                #是否开启hlshls_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/