您的位置：首页 > Web前端 > HTML5

使用Html5的Canvas功能来实现海康摄像头的无插件监控

2019-03-18 15:52 417 查看

使用Html5的Canvas功能来实现海康摄像头的无插件监控

随着浏览器的更新，海康的Html插件用不了了，迫切需要解决在项目中加入Web实时监控的功能，所以才有了此解决方法及程序。
基本思路为：解码海康视频流，通过Web服务将数据提供给Javascript，然后在Canvas上呈现。

程序下载：https://download.csdn.net/download/qq30886226/10617007

调用的脚本演示：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="jquery-1.12.1.min.js" type="text/javascript"></script>
<script src="svVideo.js" type="text/javascript"></script>
</head>
<body style="margin:0;padding:0;overflow:hidden;">
<canvas id="cvs1" class="cvs" width="450" height="320"></canvas>
<!--<button id='ToggleConnection' type="button" onclick='connect();'>
连接</button><br />
<br />
<button id='Toggle' type="button" onclick='disconnect();'>
断开：beston</button><br />
<br />
<button id='ttt' type="button" onclick='seestate();'>
查看</button><br />
<br />-->
<script type="text/javascript">
//获取Url参数
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return decodeURIComponent(r[2]);
} else {
return null;
}
}

//获取Url中的视频名称
var videoName = getQueryString('vid');

var video1 = $("#cvs1").svVideo({ videoId: videoName })[0];

//打开视频
function videoOpen() {
video1.open("127.0.0.1", 8585);

20000
}

//关闭视频
function videoClose() {
video1.close();
}

//重设视频大小
function videoResize() {
var w = $(window).width();
var h = $(window).height();
video1.resize(w, h);
}

//加载完后执行
$(document).ready(function () {
videoResize();
videoOpen();
});

//窗口缩放事件
$(window).resize(function () {
videoResize();
});
</script>
</body>
</html>

程序下载：https://download.csdn.net/download/qq30886226/10617007

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航