海康威视平台摄像头视频及事件简要开发教程

3,341 阅读5分钟

根据业务需要,在公司的IoT平台(WEB端)中需集成海康威视平台的摄像头视频及告警事件,本文结合开发经验及官方文档,简要描述通过海康威视综合安防管理平台中提供的API接口网关服务来获取摄像头视频流及事件的实现方法。

一 安装API接口官关服务

公司使用海康威视的视频监控服务,它提供了监控平台及运管中心两个管理软件。其中监控平台具有web和客户端,用来查看监控点视频及各类事件,运管中心是web端,用来安装、配置基于海康威视平台的各种服务,我们要用到的API接口网关服务就需要通过运管中心来安装,API接口网关服务安装过程不再赘述。

API接口网关服务安装完毕后,可访问xxx.xxx.xxx.xxx/artemis-por… 查看接口文档,一般来说,如果能够正常访问该地址,则网关服务安装成功,安装成功后获取api网关的appkey和secret。

二 获取监控点摄像头视频

监控点摄像头的视频的调用,可通过两种方式来实现,一是安装并调用海康官网的视频WEB插件进行播放,另一种方式是获取视频流(RTSP、RTMP、HLS),前端使用video.js编码实现。

方式一:安装视频WEB插件 播放

首先到海康开放平台下载插件,插件下载地址,需注册。下载解压后,安装bin目录下的VideoWebPlugin.exe。

同时也将OpenApi接口测试工具下载下来,用于快速调试接口。

image-20230308151156388

image-20230308153244446

下面给出两种使用html+js和vue2来实现的方式,注意需要配置相关监控平台IP、appkey、secret和监控点的cameraIndexCode。

1 HTML+JS

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>preview_demo</title>
	</head>
	<style>
		html,
		body {
			padding: 0;
			margin: 0;
		}

		.playWnd {
			margin: 30px 0 0 400px;
			width: 1000px;
			/*播放容器的宽和高设定*/
			height: 600px;
			border: 1px solid red;
		}

		.operate {
			margin-top: 24px;
		}

		.operate::after {
			content: '';
			display: block;
			clear: both;
		}

		.module {
			float: left;
			width: 340px;
			/*min-height: 320px;*/
			margin-left: 16px;
			padding: 16px 8px;
			box-sizing: border-box;
			border: 1px solid #e5e5e5;
		}

		.module .item {
			margin-bottom: 4px;
		}

		.module input[type="text"] {
			box-sizing: border-box;
			display: inline-block;
			vertical-align: middle;
			margin-left: 0;
			width: 150px;
			min-height: 20px;
		}

		.module .btn {
			min-width: 80px;
			min-height: 24px;
			margin-top: 100px;
			margin-left: 80px;
		}
	</style>

	<body>
		<!--预览界面-->
		<div id="operate" class="operate">
			<div class="module">
				<div class="item"><span class="label">监控点编号:</span><input id="cameraIndexCode" type="text"
						value="913b19ec5f204c2d9d21c8d612ba5fdf">
				</div>
				<div class="item" style="margin-top: 20px;margin-left: -20px;">
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<button style="width:20px;padding:0;margin:0;" id="startPreview" class="btn">预览</button>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<button style="width:90px;padding:0;margin:0;" id="stopAllPreview" class="btn">停止全部预览</button>
				</div>
			</div>
		</div>
		<!--视频窗口展示-->
		<div id="playWnd" class="playWnd" style="left: 109px; top: 133px;"></div>
	</body>

	<!--三个必要的js文件引入-->
	<script src="jquery-1.12.4.min.js"></script>
	<script src="jsencrypt.min.js"></script> <!-- 用于RSA加密 -->
	<script src="web-control_1.2.5.min.js"></script> <!-- 用于前端与插件交互 -->

	<script type="text/javascript">
		//页面加载时创建播放实例初始化
		$(window).load(function() {
			initPlugin();
		});

		//声明公用变量
		var initCount = 0;
		var pubKey = '';

		// 创建播放实例
		function initPlugin() {
			oWebControl = new WebControl({
				szPluginContainer: "playWnd", // 指定容器id
				iServicePortStart: 15900, // 指定起止端口号,建议使用该值
				iServicePortEnd: 15900,
				szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
				cbConnectSuccess: function() { // 创建WebControl实例成功											
					oWebControl.JS_StartService("window", { // WebControl实例创建成功后需要启动服务
						dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"写死 
					}).then(function() { // 启动插件服务成功
						oWebControl.JS_SetWindowControlCallback({ // 设置消息回调
							// cbIntegrationCallBack: cbIntegrationCallBack
						});

						oWebControl.JS_CreateWnd("playWnd", 1000, 600).then(
							function() { //JS_CreateWnd创建视频播放窗口,宽高可设定
								init(); // 创建播放实例成功后初始化
							});
					}, function() { // 启动插件服务失败
					});
				},
				cbConnectError: function() { // 创建WebControl实例失败
					oWebControl = null;
					$("#playWnd").html("插件未启动,正在尝试启动,请稍候...");
					WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数,采用wakeup来启动程序
					initCount++;
					if (initCount < 3) {
						setTimeout(function() {
							initPlugin();
						}, 3000)
					} else {
						$("#playWnd").html("插件启动失败,请检查插件是否安装!");
					}
				},
				cbConnectClose: function(bNormalClose) {
					// 异常断开:bNormalClose = false
					// JS_Disconnect正常断开:bNormalClose = true	
					console.log("cbConnectClose");
					oWebControl = null;
					$("#playWnd").html("插件未启动,正在尝试启动,请稍候...");
					WebControl.JS_WakeUp("VideoWebPlugin://");
					initCount++;
					if (initCount < 3) {
						setTimeout(function() {
							initPlugin();
						}, 3000)
					} else {
						$("#playWnd").html("插件启动失败,请检查插件是否安装!");
					}
				}
			});
		}

		// 设置窗口控制回调
		function setCallbacks() {
			oWebControl.JS_SetWindowControlCallback({
				cbIntegrationCallBack: cbIntegrationCallBack
			});
		}

		// 推送消息
		function cbIntegrationCallBack(oData) {
			showCBInfo(JSON.stringify(oData.responseMsg));
		}

		//初始化
		function init() {
			getPubKey(function() {

				////////////////////////////////// 请自行修改以下变量值	////////////////////////////////////		
				var appkey = "234234234"; //综合安防管理平台提供的appkey,必填
				var secret = setEncrypt("ASDFSDFSDA"); //综合安防管理平台提供的secret,必填
				var ip = "172.16.5.11"; //综合安防管理平台IP地址,必填
				var playMode = 0; //初始播放模式:0-预览,1-回放
				var port = 443; //综合安防管理平台端口,若启用HTTPS协议,默认443
				var snapDir = "D:\\SnapDir"; //抓图存储路径
				var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
				var layout = "1x1"; //playMode指定模式的布局
				var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互,这里总是填1
				var encryptedFields = 'secret'; //加密字段,默认加密领域为secret
				var showToolbar = 1; //是否显示工具栏,0-不显示,非0-显示
				var showSmart = 1; //是否显示智能信息(如配置移动侦测后画面上的线框),0-不显示,非0-显示
				var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
				////////////////////////////////// 请自行修改以上变量值	////////////////////////////////////

				oWebControl.JS_RequestInterface({
					funcName: "init",
					argument: JSON.stringify({
						appkey: appkey, //API网关提供的appkey
						secret: secret, //API网关提供的secret
						ip: ip, //API网关IP地址
						playMode: playMode, //播放模式(决定显示预览还是回放界面)
						port: port, //端口
						snapDir: snapDir, //抓图存储路径
						videoDir: videoDir, //紧急录像或录像剪辑存储路径
						layout: layout, //布局
						enableHTTPS: enableHTTPS, //是否启用HTTPS协议
						encryptedFields: encryptedFields, //加密字段
						showToolbar: showToolbar, //是否显示工具栏
						showSmart: showSmart, //是否显示智能信息
						buttonIDs: buttonIDs //自定义工具条按钮
					})
				}).then(function(oData) {
					oWebControl.JS_Resize(1000, 600); // 初始化后resize一次,规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
				});
			});
		}

		//获取公钥
		function getPubKey(callback) {
			oWebControl.JS_RequestInterface({
				funcName: "getRSAPubKey",
				argument: JSON.stringify({
					keyLength: 1024
				})
			}).then(function(oData) {
				console.log(oData);
				if (oData.responseMsg.data) {
					pubKey = oData.responseMsg.data;
					callback()
				}
			})
		}

		//RSA加密
		function setEncrypt(value) {
			var encrypt = new JSEncrypt();
			encrypt.setPublicKey(pubKey);
			return encrypt.encrypt(value);
		}

		// 监听resize事件,使插件窗口尺寸跟随DIV窗口变化
		$(window).resize(function() {
			if (oWebControl != null) {
				oWebControl.JS_Resize(1000, 600);
				setWndCover();
			}
		});

		// 监听滚动条scroll事件,使插件窗口跟随浏览器滚动而移动
		$(window).scroll(function() {
			if (oWebControl != null) {
				oWebControl.JS_Resize(1000, 600);
				setWndCover();
			}
		});


		// 设置窗口裁剪,当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
		function setWndCover() {
			var iWidth = $(window).width();
			var iHeight = $(window).height();
			var oDivRect = $("#playWnd").get(0).getBoundingClientRect();

			var iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left) : 0;
			var iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top) : 0;
			var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
			var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;

			iCoverLeft = (iCoverLeft > 1000) ? 1000 : iCoverLeft;
			iCoverTop = (iCoverTop > 600) ? 600 : iCoverTop;
			iCoverRight = (iCoverRight > 1000) ? 1000 : iCoverRight;
			iCoverBottom = (iCoverBottom > 600) ? 600 : iCoverBottom;

			oWebControl.JS_RepairPartWindow(0, 0, 1001, 600); // 多1个像素点防止还原后边界缺失一个像素条
			if (iCoverLeft != 0) {
				oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 600);
			}
			if (iCoverTop != 0) {
				oWebControl.JS_CuttingPartWindow(0, 0, 1001, iCoverTop); // 多剪掉一个像素条,防止出现剪掉一部分窗口后出现一个像素条
			}
			if (iCoverRight != 0) {
				oWebControl.JS_CuttingPartWindow(1000 - iCoverRight, 0, iCoverRight, 600);
			}
			if (iCoverBottom != 0) {
				oWebControl.JS_CuttingPartWindow(0, 600 - iCoverBottom, 1000, iCoverBottom);
			}
		}

		//视频预览功能
		$("#startPreview").click(function() {
			var cameraIndexCode = $("#cameraIndexCode").val(); //获取输入的监控点编号值,必填
			var streamMode = 0; //主子码流标识:0-主码流,1-子码流
			var transMode = 1; //传输协议:0-UDP,1-TCP
			var gpuMode = 0; //是否启用GPU硬解,0-不启用,1-启用
			var wndId = -1; //播放窗口序号(在2x2以上布局下可指定播放窗口)

			cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
			cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");

			oWebControl.JS_RequestInterface({
				funcName: "startPreview",
				argument: JSON.stringify({
					cameraIndexCode: cameraIndexCode, //监控点编号
					streamMode: streamMode, //主子码流标识
					transMode: transMode, //传输协议
					gpuMode: gpuMode, //是否开启GPU硬解
					wndId: wndId //可指定播放窗口
				})
			})
		});

		//停止全部预览
		$("#stopAllPreview").click(function() {
			oWebControl.JS_RequestInterface({
				funcName: "stopAllPreview"
			});
		});

		// 标签关闭
		$(window).unload(function() {
			if (oWebControl != null) {
				oWebControl.JS_HideWnd(); // 先让窗口隐藏,规避可能的插件窗口滞后于浏览器消失问题 
				oWebControl.JS_Disconnect().then(function() { // 断开与插件服务连接成功
					},
					function() { // 断开与插件服务连接失败
					});
			}
		});
	</script>
</html>

2 Vue2

  1. public/index.html 引入必要js
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<link rel="icon" href="<%= BASE_URL %>favicon.ico">
		<title>default</title>
		<!-- 海康插件 -->
		<script src="./static/haikang/jquery-1.12.4.min.js"></script>
		<script src="./static/haikang/jsencrypt.min.js"></script>
		<script src="./static/haikang/web-control_1.2.5.min.js"></script>
	</head>
	<body>
		<noscript>
			<strong>We're sorry but default doesn't work properly without JavaScript enabled. Please enable it to
				continue.</strong>
		</noscript>
		<div id="app"></div>
		<!-- built files will be auto injected -->
	</body>
</html>
  1. vue页面
<template>
	<div id="app">

		<!--视频窗口展示-->
		<div id="playWnd" class="playWnd" style="left: 109px; top: 133px;"></div>
		<button @click="previewVideo(cameraIndexCode)">预览</button>
	</div>
</template>

<script>
	export default {
		name: 'app',
		data() {
			return {
				// 视频盒子的高度
				playWndHeight: "500",
				// 视频盒子的宽度
				playWndWidth: "700",
				oWebControl: null,
				initCount: 0,
				pubKey: "",
				cameraIndexCode: "323123123123123123", // 这里面是监控点编号
				objData: {
					appkey: "3232", //海康平台提供的appkey
					ip: "172.16.5.10", //平台地址
					port: 443,
					playMode: 0, // 0 预览 1回放
					layout: "1x1", //页面展示的模块数【16】
					secret: "Z7xua5AfotB8pTlyW9QL", //海康平台提供的secret
				},
			}
		},
		created() {
			this.initPlugin()
		},
		methods: {
			// 创建播放实例
			initPlugin() {
				let that = this;
				this.oWebControl = null;
				that.oWebControl = new WebControl({
					szPluginContainer: "playWnd", // 指定容器id
					iServicePortStart: 15900, // 指定起止端口号,建议使用该值
					iServicePortEnd: 15909,
					szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
					cbConnectSuccess: () => {
						// 创建WebControl实例成功
						that.oWebControl
							.JS_StartService("window", {
								// WebControl实例创建成功后需要启动服务
								// 值"./VideoPluginConnect.dll"写死
								dllPath: "./VideoPluginConnect.dll",
							})
							.then(
								function() {
									// 设置消息回调
									that.oWebControl.JS_SetWindowControlCallback({
										cbIntegrationCallBack: that.cbIntegrationCallBack,
									});
									//JS_CreateWnd创建视频播放窗口,宽高可设定
									that.oWebControl.JS_CreateWnd("playWnd", 2040, 945, {
											bEmbed: true
										})
										// JS_CreateWnd('playWnd2', width, height, { bEmbed: true })
										.then(function() {
											// 创建播放实例成功后初始化
											that.init();
										});
								},
								function() {
									// 启动插件服务失败
								}
							);
					},
					// 创建WebControl实例失败
					cbConnectError: function() {
						that.oWebControl = null;
						// alert('插件未启动,正在尝试启动,请稍候...')
						// that.$message.warning("插件未启动,正在尝试启动,请稍候...");
						// 程序未启动时执行error函数,采用wakeup来启动程序
						window.WebControl.JS_WakeUp("VideoWebPlugin://");
						that.initCount++;
						if (that.initCount < 3) {
							setTimeout(function() {
								that.initPlugin();
							}, 3000);
						} else {
							// that.messageBox = true
							// alert('插件启动失败,请安装插件并重新启动!')
							// that.downloadHikVideo()
							// setTimeout(function () {
							//     that.messageBox = false
							// }, 5000)
							// setTimeout(function () {
							//     alert('插件启动失败,请检查插件是否安装!')
							//     that.$message({
							//         message: '插件启动失败,请检查插件是否安装! \n 插件下载地址:https://www.baidu.com',
							//         type: 'warning'
							//     });
							// }, 5000)
						}
					},
					cbConnectClose: () => {
						// 异常断开:bNormalClose = false
						// JS_Disconnect正常断开:bNormalClose = true
						// console.log("cbConnectClose");
						that.oWebControl = null;
					},
				});
			},
			// 初始化
			init(callback) {
				let that = this;
				that.getPubKey(() => {
					let appkey = that.objData.appkey; //综合安防管理平台提供的appkey,必填
					let secret = that.setEncrypt(that.objData.secret); //综合安防管理平台提供的secret,必填
					let ip = that.objData.ip; //综合安防管理平台IP地址,必填
					let playMode = that.objData.playMode; //初始播放模式:0-预览,1-回放
					let port = that.objData.port; //综合安防管理平台端口,若启用HTTPS协议,默认443
					let snapDir = "D:\\SnapDir"; //抓图存储路径
					let videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
					let layout = that.objData.layout; //playMode指定模式的布局
					let enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互,这里总是填1
					let encryptedFields = "secret"; //加密字段,默认加密领域为secret
					let showToolbar = 1; //是否显示工具栏,0-不显示,非0-显示
					let showSmart = 1; //是否显示智能信息(如配置移动侦测后画面上的线框),0-不显示,非0-显示
					let buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
					// var toolBarButtonIDs = "2049,2304" // 工具栏上自定义按钮

					that.oWebControl.JS_RequestInterface({
							funcName: "init",
							argument: JSON.stringify({
								appkey: appkey, //API网关提供的appkey
								secret: secret, //API网关提供的secret
								ip: ip, //API网关IP地址
								playMode: playMode, //播放模式(决定显示预览还是回放界面)
								port: port, //端口
								snapDir: snapDir, //抓图存储路径
								videoDir: videoDir, //紧急录像或录像剪辑存储路径
								layout: layout, //布局
								enableHTTPS: enableHTTPS, //是否启用HTTPS协议
								encryptedFields: encryptedFields, //加密字段
								showToolbar: showToolbar, //是否显示工具栏
								showSmart: showSmart, //是否显示智能信息
								buttonIDs, //自定义工具条按钮
							}),
						})
						.then(function(oData) {
							that.oWebControl.JS_Resize(that.playWndWidth, that
								.playWndHeight); // 初始化后resize一次,规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
							if (callback) {
								callback();
							}
							// 隐藏
							// that.oWebControl.JS_HideWnd()
						});
				});
			},
			// 获取公钥
			getPubKey(callback) {
				let that = this;
				this.oWebControl.JS_RequestInterface({
						funcName: "getRSAPubKey",
						argument: JSON.stringify({
							keyLength: 1024,
						}),
					})
					.then(function(oData) {
						if (oData.responseMsg.data) {
							that.pubKey = oData.responseMsg.data;
							callback();
						}
					});
			},
			// RSA 加密
			setEncrypt(value) {
				let that = this;
				let encrypt = new window.JSEncrypt();
				encrypt.setPublicKey(that.pubKey);
				return encrypt.encrypt(value);
			},
			// 回调的消息
			cbIntegrationCallBack(oData) {
				let {
					responseMsg: type
				} = oData;
				if (type === "error") {} else {}
			},
			// 视频预览功能
			previewVideo(data) {
				let that = this;
				let cameraIndexCode = data; // 获取输入的监控点编号值,必填
				let streamMode = 0; // 主子码流标识:0-主码流,1-子码流
				let transMode = 0; // 传输协议:0-UDP,1-TCP
				let gpuMode = 0; // 是否启用GPU硬解,0-不启用,1-启用
				let wndId = -1; // 播放窗口序号(在2x2以上布局下可指定播放窗口)
				// console.log(cameraIndexCode, "-------cameraIndexCode-");

				that.oWebControl.JS_RequestInterface({
					funcName: "startPreview",
					argument: JSON.stringify({
						cameraIndexCode: cameraIndexCode.trim(), // 监控点编号
						streamMode: streamMode, // 主子码流标识
						transMode: transMode, // 传输协议
						gpuMode: gpuMode, // 是否开启GPU硬解
						wndId: wndId, // 可指定播放窗口
					}),
				});
			},
			// 停止全部预览
			stopAllPreview() {
				this.oWebControl.JS_RequestInterface({
					funcName: "stopAllPreview",
				});
			},
			// 格式化时间
			dateFormat(oDate, fmt) {
				let o = {
					"M+": oDate.getMonth() + 1, //月份
					"d+": oDate.getDate(), //日
					"h+": oDate.getHours(), //小时
					"m+": oDate.getMinutes(), //分
					"s+": oDate.getSeconds(), //秒
					"q+": Math.floor((oDate.getMonth() + 3) / 3), //季度
					S: oDate.getMilliseconds(), //毫秒
				};
				if (/(y+)/.test(fmt)) {
					fmt = fmt.replace(
						RegExp.$1,
						(oDate.getFullYear() + "").substr(4 - RegExp.$1.length)
					);
				}
				for (let k in o) {
					if (new RegExp("(" + k + ")").test(fmt)) {
						fmt = fmt.replace(
							RegExp.$1,
							RegExp.$1.length == 1 ?
							o[k] :
							("00" + o[k]).substr(("" + o[k]).length)
						);
					}
				}
				return fmt;
			},

			// 设置窗口裁剪,当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
			setWndCover() {
				var iWidth = $(window).width();
				var iHeight = $(window).height();
				var oDivRect = $("#playWnd").get(0).getBoundingClientRect();

				var iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left) : 0;
				var iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top) : 0;
				var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
				var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;

				iCoverLeft = (iCoverLeft > 2041) ? 2041 : iCoverLeft;
				iCoverTop = (iCoverTop > 945) ? 945 : iCoverTop;
				iCoverRight = (iCoverRight > 2041) ? 2041 : iCoverRight;
				iCoverBottom = (iCoverBottom > 945) ? 945 : iCoverBottom;

				this.oWebControl.JS_RepairPartWindow(0, 0, 2041, 946); // 多1个像素点防止还原后边界缺失一个像素条
				if (iCoverLeft != 0) {
					this.oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 946);
				}
				if (iCoverTop != 0) {
					this.oWebControl.JS_CuttingPartWindow(0, 0, 2041, iCoverTop); // 多剪掉一个像素条,防止出现剪掉一部分窗口后出现一个像素条
				}
				if (iCoverRight != 0) {
					this.oWebControl.JS_CuttingPartWindow(2041 - iCoverRight, 0, iCoverRight, 946);
				}
				if (iCoverBottom != 0) {
					this.oWebControl.JS_CuttingPartWindow(0, 946 - iCoverBottom, 2041, iCoverBottom);
				}
			},
		},
	}
</script>

<style>
	html,
	body {
		padding: 0;
		margin: 0;
	}

	.playWnd {
		margin: 30px 0 0 400px;
		width: 1000px;
		/*播放容器的宽和高设定*/
		height: 600px;
		border: 1px solid red;
	}

	.operate {
		margin-top: 24px;
	}

	.operate::after {
		content: '';
		display: block;
		clear: both;
	}

	.module {
		float: left;
		width: 340px;
		/*min-height: 320px;*/
		margin-left: 16px;
		padding: 16px 8px;
		box-sizing: border-box;
		border: 1px solid #e5e5e5;
	}

	.module .item {
		margin-bottom: 4px;
	}

	.module input[type="text"] {
		box-sizing: border-box;
		display: inline-block;
		vertical-align: middle;
		margin-left: 0;
		width: 150px;
		min-height: 20px;
	}

	.module .btn {
		min-width: 80px;
		min-height: 24px;
		margin-top: 100px;
		margin-left: 80px;
	}
</style>

方式二:接口获取视频流地址 编码播放

image-20230308153732493

通过接口,获得视频流地址,协议可以是rtsp/rtmp/hls,然后前端video.js标签编码实现。

接口地址:https://172.16.5.10/artemis/api/video/v2/cameras/previewURLs

#字段名类型必填描述
1cameraIndexCodeStringtrue监控点唯一标识,[分页获取监控点资源]@[软件产品-综合安防管理平台-API列表-视频应用服务-视频资源#分页获取监控点资源]接口获取返回参数cameraIndexCode
2streamTypeNumber码流类型,0:主码流 1:子码流 2:第三码流 参数不填,默认为主码流
3protocolString取流协议(应用层协议),“hik”:HIK私有协议,使用视频SDK进行播放时,传入此类型;“rtsp”:RTSP协议;“rtmp”:RTMP协议;“hls”:HLS协议(HLS协议只支持海康SDK协议、EHOME协议、ONVIF协议接入的设备;只支持H264视频编码和AAC音频编码;云存储版本要求v2.2.4及以上的2.x版本,或v3.0.5及以上的3.x版本;ISC版本要求v1.2.0版本及以上,需在运管中心-视频联网共享中切换成启动平台内置VOD)。参数不填,默认为RTSP协议
4transmodeNumber传输协议(传输层协议),0:UDP 1:TCP 默认是TCP 注:EHOME设备回放只支持TCP传输 GB28181 2011及以前版本只支持UDP传输
5expandString标识扩展内容,格式:key=value, 调用方根据其播放控件支持的解码格式选择相应的封装类型; 支持的内容详见[附录F expand扩展内容说明]@[软件产品-综合安防管理平台-附录-附录F expand扩展内容说明]
6streamformString输出码流转封装格式,“ps”:PS封装格式、“rtp”:RTP封装协议。当protocol=rtsp时生效,且不传值时默认为RTP封装协议。

1 使用OpenAPI接口测试工具

请求参数

{
  "cameraIndexCode": "f6cf8b706bb64ddaac202ca3ff37008b",
  "protocol": "rtmp"
}
image-20230222132836298

2 使用Java实现

maven坐标:


        <dependency>

            <groupId>com.hikvision.ga</groupId>

            <artifactId>artemis-http-client</artifactId>

            <version>1.1.3</version>

        </dependency>

代码实现:

import com.hikvision.artemis.sdk.ArtemisHttpUtil;
import com.hikvision.artemis.sdk.config.ArtemisConfig;
import net.minidev.json.JSONObject;

import java.util.HashMap;
import java.util.Map;

public class GetCameraPreviewURL {

    public static String GetCameraPreviewURL() {

        /**
         * STEP1:设置平台参数,根据实际情况,设置host appkey appsecret 三个参数.
         */
        ArtemisConfig.host = "172.16.5.10:443"; // 平台的ip端口
        ArtemisConfig.appKey = "231123123";  // 密钥appkey
        ArtemisConfig.appSecret = "XXXXXXXXX";// 密钥appSecret

        /**
         * STEP2:设置OpenAPI接口的上下文
         */
        final String ARTEMIS_PATH = "/artemis";

        /**
         * STEP3:设置接口的URI地址
         */
        final String previewURLsApi = ARTEMIS_PATH + "/api/video/v2/cameras/previewURLs";
        Map<String, String> path = new HashMap<String, String>(2) {
            {
                put("https://", previewURLsApi);//根据现场环境部署确认是http还是https
            }
        };

        /**
         * STEP4:设置参数提交方式
         */
        String contentType = "application/json";

        /**
         * STEP5:组装请求参数
         */
        JSONObject jsonBody = new JSONObject();
        jsonBody.put("cameraIndexCode", "f6cf8b706bb64ddaac202ca3ff37008b");
        jsonBody.put("streamType", 0);
        jsonBody.put("protocol", "rtmp");
        jsonBody.put("transmode", 1);
//        jsonBody.put("expand", "streamform=ps");
        String body = jsonBody.toJSONString();
        /**
         * STEP6:调用接口
         */
        String result = ArtemisHttpUtil.doPostStringArtemis(path, body, null, null, contentType , null);// post请求application/json类型参数
        return result;
    }

    public static void main(String[] args) {
        String result = GetCameraPreviewURL();
        System.out.println("result结果示例: " + result);
    }
}

三 获取事件

事件可通过综合安防管理平台-事件检索来进行查看,根据API文档,可通过获取联动事件列表接口来获取数据,地址为https://172.16.5.10/artemis/api/els/v1/events/search

#字段名类型必填描述示例
1eventRuleIdString事件规则id6d442617f7604e569aa1086d67ef61a8
2abilityString事件分类,详见[附录A.62 事件分类]@[软件产品-综合安防管理平台-附录-附录A 数据字典#附录A.62 事件分类]event_vss
3regionIndexCodeString区域编号ec268bf2-9fd7-4815-ac4f-1000003
4resNameString事件源名称ehomeNVR-183.104-8-182.73
5eventTypeString事件类型,参考[附录D]@[软件产品-综合安防管理平台-附录-附录D 事件列表]131329
6remarkString处理意见事件处理意见
7handleStatusNumber处理状态,0-未处理,1-已处理0
8startTimeStringtrue开始时间,ISO8601时间2019-03-18T12:11:38.154+08:00
9endTimeStringtrue结束时间,ISO8601时间2019-03-19T12:11:38.154+08:00
10pageSizeNumbertrue分页大小20
11pageNoNumbertrue页码1

下面通过接口测试工具来进行测试一下,如图所示,可获取事件列表。

image-20230308160519071

这里代码实现参照

四 常见问题

1 如何获取摄像头标识cameraIndexCode?

  1. 进入综合安防管理平台,右上角系统管理

  2. 左边菜单 设备资源管理-视频设备-选择监控点-某摄像头点击编辑按钮查看监控点编号

    image-20230308160450464

    image-20230222133439883