web页面调用海康摄像头

最新推荐文章于 2025-01-10 13:52:20 发布
原创 最新推荐文章于 2025-01-10 13:52:20 发布 · 4.9k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-1.12.4.min.js"></script>
    <script src="./jsencrypt.min.js"></script>
    <script src="./jsWebControl-1.0.0.min.js"></script>
    <style>
        /* #playWnd {
            width: 500px;
            height: 500px;
        } */
        #startPreview {
            position: absolute;
            bottom: 0;
            left: 50%;
        }
    </style>
</head>

<body>
    <div id="playWnd">

    </div>
    <button id="startPreview">播放</button>
    <script>
        $(window).load(function () {
        // 第一步要创建实例
        	var oWebControl = new WebControl({ // 创建 WebControl 实例
        		szPluginContainer: "playWnd", // 指定 DIV 窗口标识
				iServicePortStart: 15900, // 指定起止端口号，建议使用该值
				iServicePortEnd: 15909,
				// 用于 IE10 使用 ActiveX 的 clsid
				szClassId:"23BF3B0A-2C56-4D97-9C03-0CB103AA8F11",
				cbConnectSuccess: function () {
				// 创建 WebControl 实例成功
				},
				cbConnectError: function () {
				// 创建 WebControl 实例失败
				},
				cbConnectClose: function (bNormalClose) {
				// 插件使用过程中发生的断开与插件服务连接的回调
				// bNormalClose = false 时表示异常断开
				// bNormalClose = true 时表示正常断开
				}
        	})
            initPlugin();
        });
        // 创建播放实例 2
        function initPlugin() {
            oWebControl = new WebControl({
                szPluginContainer: "playWnd",                       // 指定容器id
                iServicePortStart: 15909,                           // 指定起止端口号，建议使用该值
                iServicePortEnd: 15909,
                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({   // 设置消息回调
                            if(cbIntegrationCallBack) {
                                cbIntegrationCallBack: cbIntegrationCallBack
                            }
                        });

                        oWebControl.JS_CreateWnd("playWnd", 1000, 600).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定
                            console.log('创建播放实例成功后初始化')
                            init();  // 创建播放实例成功后初始化 3
                        });
                    }, function () { // 启动插件服务失败
                        console.log('启动插件服务失败')
                    });
                },
                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;
                }
            });
        }
        //初始化 4
        function init() {
            getPubKey(function () {

                ////////////////////////////////// 请自行修改以下变量值	////////////////////////////////////		
                var appkey = "27309263";                           //综合安防管理平台提供的appkey，必填
                var secret = setEncrypt("P3BRtkeLsSG82sAnEKIg");   //综合安防管理平台提供的secret，必填
                var ip = "ip";                           //综合安防管理平台IP地址，必填
                var playMode = 0;                                  //初始播放模式：0-预览，1-回放
                var port = ip;                                    //综合安防管理平台端口，若启用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窗口重合问题
                });
            });
        }
        //获取公钥 ||5
        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()
                }
            })
        }
        
	// 监听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 = $('#hikvision').get(0).getBoundingClientRect()
      console.log(oDivRect)
      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

      this.oWebControl.JS_RepairPartWindow(0, 0, 1001, 600) // 多1个像素点防止还原后边界缺失一个像素条
      if (iCoverLeft !== 0) {
        this.oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 600)
      }
      if (iCoverTop !== 0) {
        this.oWebControl.JS_CuttingPartWindow(0, 0, 1001, iCoverTop) // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
      }
      if (iCoverRight !== 0) {
        this.oWebControl.JS_CuttingPartWindow(1000 - iCoverRight, 0, iCoverRight, 600)
      }
      if (iCoverBottom !== 0) {
        this.oWebControl.JS_CuttingPartWindow(0, 600 - iCoverBottom, 1000, iCoverBottom)
      }
    },
        //RSA加密 || 6
        function setEncrypt(value) {
            var encrypt = new JSEncrypt();
            encrypt.setPublicKey(pubKey);
            return encrypt.encrypt(value);
        }
        //视频预览功能 7||  最后点击播放
        $("#startPreview").click(function () {
            var cameraIndexCode = '5e07ca4ef67f4aefa5f6bdf77099dd33'     //获取输入的监控点编号值，必填
            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                                     //可指定播放窗口
                })
            })
        });


    </script>
</body>

</html>

// 批量播放
{
  "argument": {
    "list": [
      {
        "authUuid": "",
        "cameraIndexCode": "",
        "ezvizDirect": 0,
        "gpuMode": 0,
        "streamMode": 0,
        "transMode": 1,
        "wndId": 1  // 设置它在 layout  布局中的位置
      },
      {
        "authUuid": "",
        "cameraIndexCode": "",
        "ezvizDirect": 0,
        "gpuMode": 0,
        "streamMode": 0,
        "transMode": 1,
        "wndId": 2
      }
    ]
  },
  "funcName": "startMultiPreviewByCameraIndexCode"
}
Vue3 - 详细实现接入使用海康威视监控云端显示及控制功能，网站集成安装海康监控及实时监控显示、回放、放大缩小画面、视频画面截图、截屏抓拍、摄像头控制，实时推流及播放器解决延迟卡顿等问题（详细代码）
资深程序员
07-12 1万+
vue3，nuxt3，海康威视，海康监控，摄像头监控，实时监控画面，海康插件，视频播放，回放，视频流地址，取流协议，视频sdk播放，hik，rtsp，rtmp，hls，ws，网站，网页，h5页面，后台管理系统，vue3对接海康监控设备，无法连接，报错，vue3对接海康处理接口认证规则，监控实时预览和回放功能，海康api接口，安全认证，海康开放平台，官方文档，播放海康摄像头的监控视频，海康实时监控播放详细步骤，web，黑屏，特别卡不流畅怎么办，解决无法推流，录像，连接不上，vue3，海康，vue海康视频监控，
海康对接摄像头
最新发布
chengchong_cc的博客
06-11 635
1.前端 播放用ws 流，后台调用海康后台可以直接返回。3.注意js引用是否正确。
web调取海康摄像头
06-01
Web前端调取海康摄像头Demo，亲测可用，已应用于实际项目中，解决一个页面同时调取多路摄像头问题。
2024年最新VUE3对接海康威视监控接口，实现实时查看监控。_vue3使用海康，100道高频面试题
2401_84436058的博客
05-15 1040
打开全栈工匠技能包-1小时轻松掌握SSR两小时精通jq+bs插件开发生产环境下如歌部署Node.js网易内部VUE自定义插件库NPM集成谁说前端不用懂安全，XSS跨站脚本的危害webpack的loader到底是什么样的？两小时带你写一个自己loader。
VUE3对接海康威视监控接口，实现实时查看监控。
cc_66666的博客
06-14 4154
vue3对接海康监控，实现实时查看监控功能。
Vue 3集成海康Web插件实现视频监控
唯见青山不见君
10-18 1万+
本文详细介绍了如何使用 Vue 3 框架集成海康Web插件实现视频监控功能。通过定义属性、事件、变量，以及编写初始化、播放视频、处理节点点击事件等方法，
VUE+海康摄像头WebSDK_V3.3.0对接
Sky_xinkong的博客
04-16 5164
在本篇文章中，我们将详细探讨如何使用WebSDK_V3.3.0技术接入海康摄像头。同时，我们也将分享在实际应用中遇到的问题及解决方案，希望能够对广大开发者和技术爱好者有所帮助。
web页面完美调用海康摄像头demo，支持预览、抓拍、录像、最重要的是支持云台
06-16
总结起来，实现"web页面完美调用海康摄像头demo"的关键技术点包括：WebRTC、MediaSource Extensions、HTML5 canvas、图像处理库、流媒体协议（如RTSP、HTTP）、云台控制API以及服务器端的视频处理。掌握这些技术，...
海康摄像头web的demo 完整源码，描述有使用详情
02-13
总结，"海康摄像头web的demo 完整源码"是一个用于开发海康摄像头web应用的重要工具，它涵盖了摄像头控制、视频流处理、Web API调用等多个关键领域。借助这个开发包，开发者可以更便捷地将海康摄像头的功能集成到自己...
海康摄像头web调用
08-23
海康摄像头Web调用主要涉及的是通过Web接口与海康威视的监控设备进行交互，以便在网页上实时查看和管理监控视频。海康威视作为全球知名的安防产品供应商，其提供的解决方案广泛应用于各种场景，包括但不限于家庭、...
海康摄像头+web调用（官方开发包）
05-09
（2）支持云服务设备添加、删除、预览、回放及远程配置。 （3）监控点联动支持联动其他监控点，报警联动功能更加完善。 （4）支持在线设备搜索功能，支持编解码设备网络参数的修改。 （5）主预览、电子地图、电视墙...
webVideoCtrl.js海康威视摄像vue引用脚本
03-14
vue集成原版的webVideoCtrl.js会出现报错，该资源修改了部分源码，用于支持vue，使用代码前请参考博客：https://blog.youkuaiyun.com/yushi6310/article/details/88549363
海康威视web3.0开发包
07-12
web3.0开发包，可以用，配合https://blog.youkuaiyun.com/qq_35583089/article/details/80631069
在vue3 中使用海康威视WEB3.3控件开发包 V3.3 抓图
weixin_68669853的博客
01-25 4961
和 dome/codeBase下的 jsVideoPlugin-1.0.0.min.js 和 webVideoCtrl.js 文件。双击dome/codebase/HCWebSDKPlugin.exe 并且安装。注意：index.ts 需要放入自己海康摄像头ip 账号和密码。三个文件复制到自己项目public/js 文件夹下。3、新建test/index.vue。打开dome/index.html。并且在index.html中引入。新建 test/index.ts。2、在自己vue3项目中使用。
vue2和3 对接 海康摄像头插件 （视频WEB插件 V1.5.2）
weixin_53322542的博客
11-24 6577
海康视频插件v.1.5.2版本运行环境需要安装插件VideoWebPlugin.exe，对浏览器也有兼容性要求，具体看官方文档。
vue3实现海康威视根据海康插件进行监控实时预览和回放功能
我是小刘丶
04-23 1万+
因为我的文章已经写过基于vue实现海康web插件进行视频播放开箱即用文章，这个文章是利用进行编写的，大致内容跟vue2一样，拿过去能直接用。至于我为什么要用js而不用ts，因为海康提供的三个脚本为js语言的，ts尝试过一次，我道行太浅，没搞明白。如果需要vue2的开发，接下来进入正题。
vue3集成海康视频 实现播放 与回放功能
埋头研究ing
01-10 417
海康视频播放与回放功能
vue+js+海康web开发包接入海康威视摄像头
热门推荐
weixin_46653941的博客
03-10 1万+
vue+js+海康web开发包接入海康威视摄像头
Vue3 中集成海康 H5 监控视频播放功能
唯见青山不见君
09-24 3157
本文旨在详细介绍如何在 Vue 3 应用中集成海康 H5 监控视频播放功能，实现视频的实时播放、分屏显示以及全屏切换等功能。
web页面完美调用海康摄像头的demo
08-24
要实现web页面完美调用海康摄像头的demo，可以按照以下步骤进行操作： 1. 首先，确保摄像头已正确安装并与电脑连接，确保设备的驱动程序已正确安装。 2. 在web页面中引入海康摄像头的插件，通常是通过嵌入object或embed标签来实现。可以通过官方提供的SDK文档了解如何引入插件。 3. 创建一个用于显示摄像头画面的容器，在HTML中添加一个div或者canvas元素。 4. 在JavaScript中编写相关的代码，通过调用插件的API来控制摄像头。可以使用插件提供的方法来启动、停止、截图和录制等操作。需要根据具体的需求来进行代码编写。 5. 在web页面中添加相关的控制按钮或者界面元素，用来触发摄像头的不同操作。例如，可以添加一个按钮来启动摄像头、一个按钮来停止摄像头，以及一个按钮来截图等。 6. 进行相关调试和测试，确保web页面能够正确调用海康摄像头，并实现所需的功能。 7. 最后，根据实际需求进行优化和改进。可以改进UI界面，添加更多的交互功能，以及增加错误处理机制等。 需要注意的是，海康摄像头的调用方式可能会因不同的型号和版本而有所差异，因此在编写代码之前，最好先阅读相关的开发文档和示例代码，以获取更详细的信息和正确的调用方法。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值