位置: IT常识 - 正文

海康视频WEB插件 V1.5.2 开发总结(海康威视网页插件下载)

编辑:rootadmin
海康视频WEB插件 V1.5.2 开发总结 文章目录前言一、效果图二、插件使用步骤总结三、具体步骤分析1.new 一个WebControl 插件实例2.启动插件服务3.创建视频播放窗口、绑定消息回调4.初始化参数,其中secret参数需要通过RSA加密,加密公钥通过WebControl.JS_RequestInterface获取5.通过WebControl 插件实例调用API方法操作功能(预览,回放,抓图、录像等)(1)预览功能(2)设置窗口布局(3)抓图6.离开页面断开与插件服务连接四、窗口事件绑定五、vue脚手架中集成插件六、注意事项七、vue版本开箱即用组件八、官方插件包和开发文档下载九、完整代码前言

推荐整理分享海康视频WEB插件 V1.5.2 开发总结(海康威视网页插件下载),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:海康威视web插件无响应,海康威视web插件无响应,海康摄像头web插件,海康视频web插件语音对讲,海康威视web插件,海康视频web插件怎么用,海康视频web插件对讲,海康视频web插件语音对讲,内容如对您有帮助,希望把文章链接给更多的朋友!

海康视频插件v.1.5.2版本运行环境需要安装插件VideoWebPlugin.exe,对浏览器也有兼容性要求,具体看官方文档

一、效果图

二、插件使用步骤总结

1.new 一个WebControl 插件实例 2. 启动插件服务 3.创建视频播放窗口、绑定消息回调 4.初始化参数,其中secret参数需要通过RSA加密,加密公钥通过WebControl.JS_RequestInterface获取 5.通过WebControl 插件实例调用API方法操作功能(预览,回放,抓图、录像等) 6.离开页面断开与插件服务连接

三、具体步骤分析1.new 一个WebControl 插件实例

后续功能都将通过该实例操作

var oWebControl = new WebControl({ szPluginContainer: "playWnd", // 指定容器idiServicePortStart: 15900, // 指定起止端口号,建议使用该值iServicePortEnd: 15909, szClassId:"23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsidcbConnectSuccess: function () { // 创建WebControl实例成功 console.log("success")},cbConnectError: function () { // 创建WebControl实例失败 console.log("error")},cbConnectClose: function (bNormalClose) { // 异常断开:bNormalClose = false console.log("cbConnectClose");}});2.启动插件服务

创建WebControl实例成功的回调函数中通过oWebControl.JS_StartService启动插件服务:

var oWebControl = new WebControl({ szPluginContainer: "playWnd", // 指定容器idiServicePortStart: 15900, // 指定起止端口号,建议使用该值iServicePortEnd: 15909, szClassId:"23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsidcbConnectSuccess: function () { // 创建WebControl实例成功 /// //步骤二代码 oWebControl.JS_StartService("window", { // WebControl实例创建成功后需要启动服务dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"写死 }).then(function () { // 启动插件服务成功}, function () { // 启动插件服务失败}); // /// },cbConnectError: function () { // 创建WebControl实例失败 console.log("error")},cbConnectClose: function (bNormalClose) { // 异常断开:bNormalClose = false console.log("cbConnectClose");}});3.创建视频播放窗口、绑定消息回调

通过创建播放窗口绘制样式布局,并绑定一些事件(进出全屏、切换布局消息等)的回调

var oWebControl = new WebControl({ szPluginContainer: "playWnd", // 指定容器idiServicePortStart: 15900, // 指定起止端口号,建议使用该值iServicePortEnd: 15909, szClassId:"23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsidcbConnectSuccess: 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实例失败 console.log("error")},cbConnectClose: function (bNormalClose) { // 异常断开:bNormalClose = false console.log("cbConnectClose");}});//消息回调监听 function cbIntegrationCallBack(oData){ console.log(oData) }4.初始化参数,其中secret参数需要通过RSA加密,加密公钥通过WebControl.JS_RequestInterface获取

通过appkey、secret、ip、port端口号等参数与服务器进行数据校验,校验通过即可正常与设备链接取流,初始化参数在步骤三创建窗口成功回调后执行,其中secret参数必须通过RSA进行加密处理,加密的公钥通过WebControl.JS_RequestInterface获取

var pubKey;//公钥 //初始化 function init() { getPubKey(function () {// 请自行修改以下变量值 var appkey = "20000000"; //综合安防管理平台提供的appkey,必填 var secret = setEncrypt("XXXxxxxxxxxxx"); //综合安防管理平台提供的secret,必填var ip = "192.168.20.80"; //综合安防管理平台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'; //加密字段,默认加密领域为secretvar 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,'odate'); if (oData.responseMsg.data) { pubKey = oData.responseMsg.data; callback() } }) } //RSA加密 function setEncrypt (value) { var encrypt = new JSEncrypt(); encrypt.setPublicKey(pubKey); return encrypt.encrypt(value); }5.通过WebControl 插件实例调用API方法操作功能(预览,回放,抓图、录像等)海康视频WEB插件 V1.5.2 开发总结(海康威视网页插件下载)

经过上面4个步骤,初始化工作已经全部完成,接下去就是使用api去操作实例实现对应功能

(1)预览功能 var cameraIndexCode='1e48db29e22143118441b75d199999dd'; //获取输入的监控点编号值,必填,从后端接口返回获取 var streamMode = 0; //主子码流标识:0-主码流,1-子码流 var transMode = 1; //传输协议:0-UDP,1-TCP var gpuMode = 1; //是否启用GPU硬解,0-不启用,1-启用 var wndId = -1; //播放窗口序号(在2x2以上布局下可指定播放窗口) oWebControl.JS_RequestInterface({ funcName: "startPreview", argument: JSON.stringify({ cameraIndexCode:cameraIndexCode, //监控点编号 streamMode: streamMode, //主子码流标识 transMode: transMode, //传输协议 gpuMode: gpuMode, //是否开启GPU硬解 wndId:wndId //可指定播放窗口 }) }).then(res=>{console.log(res,'res')})(2)设置窗口布局 oWebControl.JS_RequestInterface({ funcName: " setLayout", argument: { layout:'2x2',//窗口布局 } })(3)抓图 oWebControl.JS_RequestInterface({ funcName: "snapShot", argument:{ name:'D:\test.jpg'//图片绝对路径名称 }, });

其他功能对着开发文档API调用就行了 所有功能调用都是通过

oWebControl.JS_RequestInterface({ funcName: "",//例如:startPreview预览功能 argument:{} })

这个API实现,不同功能通过funcName值区别,argument为该功能需要传递的参数

6.离开页面断开与插件服务连接

释放资源

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

海康播放插件本质是ActiveX控件,无法通过css控制位置和大小,当页面窗口大小变化或者遇到页面有滚动条情况就需要手动设置插件窗口位置和大小,可以通过JS_Resize (调整插件窗口大小、位置),JS_CuttingPartWindow (扣除部分插件窗口)两个api来实现

//插件宽高请根据页面实际响应尺寸传递,下面默认宽1000,高600 // 监听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); } }五、vue脚手架中集成插件

把官方资源包里的query-1.12.4.min.js、jsencrypt.min.js、jsWebControl-1.0.0.min.js复制到vue项目public目录下,在index.html引入js

六、注意事项

1.初始化参数中ip不能带端口,端口单独设置port参数,ip跟端口号从综合安防管理平台获取,要根据实际值传参 2.实际开发中窗口事件必须绑定,可动态监听插件绑定的div宽高,响应式设置插件窗口大小 3.云控功能——插件工具栏已自带简陋版,如果需要高度自定义,可自己在页面其他地方画布局,写功能并调用海康提供云控接口来实现 4 .注意http跟https环境下海康提供的接口一些参数的区别,http->ws,https->wss

七、vue版本开箱即用组件

传送门:vue-hkvideo

八、官方插件包和开发文档下载

传送门:插件包和文档下载

九、完整代码

官方demo.html

<body> <!--预览界面--> <div id="operate" class="operate"> <div class="module"> <div class="item"><span class="label">监控点编号:</span><input id="cameraIndexCode" type="text" value=""></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="jsWebControl-1.0.0.min.js"></script> <!-- 用于前端与插件交互 --><script type="text/javascript"> //页面加载时创建播放实例初始化 $(window).load(function () { initPlugin(); }); //
本文链接地址:https://www.jiuchutong.com/zhishi/283368.html 转载请保留说明!

上一篇:hphupd04.exe是什么进程 作用是什么 hphupd04进程查询(hpptd.exe)

下一篇:kendns.exe是什么进程 kendns进程查询(kcleaner.exe是什么)

  • 先悦己,还是先悦众(悦己先悦心)

    先悦己,还是先悦众(悦己先悦心)

  • opporeno4充电速度如何(OPPOreno4充电速度)

    opporeno4充电速度如何(OPPOreno4充电速度)

  • 拼多多助力上限(拼多多助力限制要多久才可以用)

    拼多多助力上限(拼多多助力限制要多久才可以用)

  • 比心注销了还能注册吗(比心注销账号后个人信息会泄露吗)

    比心注销了还能注册吗(比心注销账号后个人信息会泄露吗)

  • 十进制数56转换成二进制数是(十进制56转换为16进制)

    十进制数56转换成二进制数是(十进制56转换为16进制)

  • oppor17指纹图案怎么设置(oppor17指纹图案修改)

    oppor17指纹图案怎么设置(oppor17指纹图案修改)

  • ip地址的分类如何划分

    ip地址的分类如何划分

  • 华为屏幕最大的手机是哪款(华为屏幕最大的是哪一款)

    华为屏幕最大的手机是哪款(华为屏幕最大的是哪一款)

  • 快手不显示作品推广(快手不显示作品浏览记录)

    快手不显示作品推广(快手不显示作品浏览记录)

  • 腾讯视频下载到本地方法(腾讯视频下载到手机哪个文件夹)

    腾讯视频下载到本地方法(腾讯视频下载到手机哪个文件夹)

  • 进程的三种基本状态的含义(进程的三种基本状态是运行状态就绪状态和什么状态)

    进程的三种基本状态的含义(进程的三种基本状态是运行状态就绪状态和什么状态)

  • windoows7的桌面是指(电脑系统window7桌面)

    windoows7的桌面是指(电脑系统window7桌面)

  • 怎么让excel表格正好放在a4纸上(怎么让excel表格线不显示)

    怎么让excel表格正好放在a4纸上(怎么让excel表格线不显示)

  • ipad笔有什么用(ipad笔有什么功能)

    ipad笔有什么用(ipad笔有什么功能)

  • 手机号不想用了怎么注销(手机号不想用了不交费可以吗)

    手机号不想用了怎么注销(手机号不想用了不交费可以吗)

  • 微信标签保存中为什么会保存失败(微信标签保存不成功)

    微信标签保存中为什么会保存失败(微信标签保存不成功)

  • 苹果x怎么拍广角(苹果x怎么拍广角视频)

    苹果x怎么拍广角(苹果x怎么拍广角视频)

  • 为什么苹果手机微信更新不了(为什么苹果手机信号不好 怎么解决)

    为什么苹果手机微信更新不了(为什么苹果手机信号不好 怎么解决)

  • iphone x是2k屏吗(苹果x是2k屏吗)

    iphone x是2k屏吗(苹果x是2k屏吗)

  • 怎么设置仅在wifi下载(怎么设置仅在无线网络下下载)

    怎么设置仅在wifi下载(怎么设置仅在无线网络下下载)

  • 三星s9相册回收站在哪(三星s9照片回收怎么找回)

    三星s9相册回收站在哪(三星s9照片回收怎么找回)

  • xsmax美版是双卡吗(xsmax美版是单卡)

    xsmax美版是双卡吗(xsmax美版是单卡)

  • 苹果xs屏幕录制在哪里(苹果xs屏幕录制功能在哪里)

    苹果xs屏幕录制在哪里(苹果xs屏幕录制功能在哪里)

  • 微信如何设置图案锁屏(微信如何设置图片自动下载)

    微信如何设置图案锁屏(微信如何设置图片自动下载)

  • 刷宝怎么用(刷宝app怎么样)

    刷宝怎么用(刷宝app怎么样)

  • 电脑怎么连接bose qc30(bose连接电脑)

    电脑怎么连接bose qc30(bose连接电脑)

  • fold命令  限制文件列宽

    fold命令 限制文件列宽

  • 升级到dedecms 5.7文档关键词代码部分细节警示(升级到miui14感觉耗电快了)

    升级到dedecms 5.7文档关键词代码部分细节警示(升级到miui14感觉耗电快了)

  • 小微企业城建税减半
  • 股权转让印花税税率
  • 企业所得税营业收入和增值税销售收入
  • 离线开票时间超时
  • 财付通转账手续费多少
  • 税务1236600短信
  • 金融资产的划分标准以及相关的处理怎么做
  • 会计凭证整理的要求有哪些
  • 销售自己使用过的物品
  • 收到补价时应确认收益,支付补价时不能确认收益
  • 筹办期的工资费用是什么
  • 转出上年的进项税额怎么做分录
  • 当期免抵税额和当期免抵退税额
  • 小规模纳税人的认定标准是什么
  • 公益性捐赠需要缴纳增值税吗
  • 个人承包是什么意思
  • 实缴资本是真的吗
  • 财务费用是否存入银行卡
  • 物流车辆挂靠账务怎么处理?
  • 员工垫付差旅费 民间借贷
  • 携程只有电子发票吗
  • 金蝶是先过账还是先审核
  • 视同销售的企业所得税汇缴表怎么填列?
  • 小规模纳税人缴纳增值税怎么做账
  • 公司组织的团建受伤算工伤吗
  • win10设置里没有飞行模式
  • 留存收益是否计入成本
  • linux创建一个文件并写入内容
  • win10设置待机时间长怎么在哪里设置
  • 银行支付的存款怎么做账
  • 与取得收入无关的成语
  • 实收资本主要包括哪些
  • 从奎雷英山口看到的 Leum na Luirginn湖和Cleat湖,英国斯凯岛 (© Sebastian Wasek/Sime/eStock Photo)
  • laravel dump
  • 计提资产减值准备是利好还是利空
  • yii2组件的理解
  • 如何收取会员会费才合法
  • php制作微信小程序
  • 基本户可以公对私吗
  • 不抵扣的进项税怎么做账
  • html基础网页
  • mysqlbinlog -vv
  • 增值税普通发票和专用发票有什么区别
  • 智能商亭超级大骗局
  • 售后回购会计处理分录
  • 应交税费增值税销项税
  • 金税四期介绍 王军
  • 固定资产处置的账务处理 终于搞明白了!
  • 简易征收应纳税额
  • 什么是委托检验报告
  • 小规模纳税企业在应交增值税明细科目
  • 什么叫自主研发
  • 根据企业会计准则第11号规定,下列关于等待期
  • mysql的知识点
  • sql里case
  • sql复制表的语句
  • 电脑win7win8win10操作系
  • Win Server 2003 使用技巧图解
  • 多台电脑ip地址设置
  • ubuntu安装linux五笔输入法
  • 2t硬盘如何分区最合理
  • kdeskcore.exe是什么
  • 格式化不干净
  • Win10如何设置电脑密码
  • windows 10 周年更新
  • window10重置和做系统的区别
  • 为wdcp面板的lnmp服务器添加ipv6支持的方法介绍
  • linux系统设置网络
  • perl uc,lc,ucfirst,lcfirst大小写转换函数
  • cocos creator 动画制作
  • node-js
  • windows下为啥没有观看电视的软件
  • unity如何成一组
  • nodejs实现登录
  • js做时钟让钟表转起来
  • jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
  • 建筑行业增值税11%
  • 电子专票红字信息表
  • 服务收入确认条件有哪些
  • 补充耕地指标费用能从储备中心支付吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设