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

最新推荐文章于 2024-06-10 15:27:42 发布

思维SIVI

最新推荐文章于 2024-06-10 15:27:42 发布

阅读量7.8k

点赞数 2

分类专栏：技术相关文章标签：海康 Html5 Canvas 监控视频

本文链接：https://blog.csdn.net/QQ30886226/article/details/88640580

版权

技术相关专栏收录该内容

3 篇文章 0 订阅

订阅专栏

使用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);
        }

        //关闭视频
	    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

思维SIVI

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用Html5的Canvas功能来实现海康摄像头的无插件监控

使用Html5的Canvas功能来实现海康摄像头的无插件监控随着浏览器的更新，海康的Html插件用不了了，迫切需要解决在项目中加入Web实时监控的功能，所以才有了此解决方法及程序。基本思路为：解码海康视频流，通过Web服务将数据提供给Javascript，然后在Canvas上呈现。程序下载：https://download.csdn.net/download/qq30886226/10617...
复制链接

扫一扫