使用手机摄像头实现视频监控实时播放-Toy模板网

这篇具有很好参考价值的文章主要介绍了使用手机摄像头实现视频监控实时播放。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

一、概述

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

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