安防音视频(rtsp,onvif,gb28181)的HTML5(H5)解决方案(直播，回放，PTZ)

KL_FLSHMAN

已于 2022-11-24 21:04:46 修改

阅读量918

点赞数

分类专栏： HTML5 文章标签：音视频 html5 网络

于 2022-11-24 20:59:25 首次发布

本文链接：https://blog.csdn.net/u010359310/article/details/128026333

版权

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

背景

单位需要在基于H5的管理软件中接入安防音视频，直接在H5上实现不容易，只能选择第三方开发包，本文对klporxy使用做个简单记录。

开发包的获取

开发包为共享软件，2路视频是免费的，需要的可以点击下载。或者邮件联系5614280@qq.com,也可以私信我。

软件的安装配置

该软件无安装包，解压即可使用，软件里有使用说明以及HTTP-API开发手册和实例，上手比较容易。
下图是我配置的海康威视服务器，只需要输入IP地址，端口号，用户名密码即可！
在这里插入图片描述
1.添加设备点击添加设备按钮，根据实际情况填写设备IP地址、端口号、用户名密码等，TOKEN作为访问标志，请填写一个唯一的方便记忆的非中文编码，建议开发者使用。
2.作为开发者建议都与定义设备，当然您也可以不定义任何设备，这需要你在使用相关接口中指定正确的设备IP地址、端口号、用户名、密码等。
3.如果作为GB28181下级这里必须正确填写配置设备，SIPID 必须为20位编号，请按28181规范填写，如果不作为GB28181下级使用，可以不填写，下面举例说明SIPID。
SIPID:34020000001320000012 前10位（3402000000）为SIP域，通常由上级指定，不能随意填写。11-13位为设备类型，132为网络摄像机，本软件要求固定为132，14为网络类型一般填0，15-20为编号，本软件内不能重复。
下图为海康设备实例，其中设备信息为： 192.168.1.73为海康IP摄像机。对应的端口为8000 设备用户名为admin 密码为admin12345,Token为自定义唯一不重复ID，实例中设置为hik173.为了开发简单，请务必定义token，如果未定义，软件将自动匹配IP地址或者设备名，但这并不能保证唯一性。

在HTML5(H5)中使用

HTML就相对容易了，本文引用开发包例子。直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flv 播放示例</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="sourcesNode"></div>
<div>
    <p style="color:#808080">请输入你的FLV播放地址: </p>
	<p style="color:#808080">示例:http://127.0.0.1:8081/cgi-bin/live.flv?devicetoken=ehome&devicechannel=0&streamtype=0</p>
</div>

<div>
	<p>
    <input  id="stream_url" size="100" value= "http://127.0.0.1:8081/cgi-bin/live.flv?devicetoken=ehome&devicechannel=0&streamtype=0">
	</p>
	<p>
    <button id="set_new_url">播放</button>
	</p>
</div>
 <div>
	 <video id="videoElement" controls autoplay muted style="width:640px;height:360px;background-color:Black;">Your browser is too old which doesn't support HTML5 video.</video>
</div>


<script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.5.0/flv.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

<script>
	
	var urlButton    = document.getElementById("set_new_url");
	var urlEdit      = document.getElementById("stream_url");
	var player 		 = document.getElementById("videoElement");
	//player.controls  = false; //显示控件按钮
	var flvPlayer 	 = null; 
	urlButton.onclick = ()=> 
	{
		setPlayerSource(urlEdit.value);
	};
	
	$(document).ready(function()
	{ 
		//setPlayerSource(urlEdit.value);
	}); 
	
	window.onload = function () 
	{
		//setPlayerSource(urlEdit.value);
	}

	function setPlayerSource(newSource) 
	{
		
		flvPlayer = flvjs.createPlayer
		(
		    {
                type: 'flv',
				isLive: true,
                url: newSource,
				enableWorker: false,     
				fixAudioTimestampGap: false, 
				autoCleanupSourceBuffer:true
				
            },
			{
				azyLoadMaxDuration: 30*60, 
				isLive: true,
				lazyLoad:false,
				controls:true//显示控件按钮
			}
		);
		
		if (flvPlayer)
		{		
			flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => 
			{ 
				// errType是 NetworkError时，对应errDetail有：Exception、HttpStatusCodeInvalid、ConnectingTimeout、EarlyEof、UnrecoverableEarlyEof
				// errType是 MediaError时，对应errDetail是MediaMSEError
				alert(errDetail);
			});

			flvPlayer.on(flvjs.Events.LOADING_COMPLETE, () =>
			{
				//alert('MEDIA_SOURCE_CLOSE'); //直播中途断开
			});
			
			flvPlayer.on(flvjs.Events.METADATA_ARRIVED, () =>
			{
			
			});
		}
		flvPlayer.attachMediaElement(videoElement);
		flvPlayer.load(); //加载
		flvPlayer.play();  
	
		
		/*
		
		player = new FlvPlayer
		(
			{
			  id: 'test_video',
			  isLive: true,
			  url: newSource,
			  playsinline: true,
			  autoplay: true,
			  controls:false,//显示控件按钮
			  preloadTime: 1,
			  minCachedTime: 5,
			  cors: true,
			  height: 360,
			  width: 640
			},
			{
			    enableWorker: true,
				azyLoadMaxDuration: 2,
				seekType: 'range',      
				fixAudioTimestampGap: false, 
			}
		);
		*/
	    setInterval(() => 
		{
			if (!player.buffered.length) 
			{
				return;
			}
			let end = player.buffered.end(0);
			let diff = end - player.currentTime;
			if (diff >= 3) 
			{
			   player.currentTime = end - 1;
			}
		}, 
		5 * 1000);
	}
</script>
</body>
</html>