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

2023-05-16

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

一、概述

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

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

四、客户端观看直播

目前暂时使用VLC进行视频播放
VLC下载地址：https://www.videolan.org/vlc/

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)