web端对接海康平台V1.5.1插件

1、下载webv1.5.1插件

2、获取APPKey和APPSecret

需要登录综合安防平台（可以对接平台的话会有一套可访问的管理页面），点击状态监控，选择API网关下的API管理，进入API网关后，点击合作方管理，点击合作方名称，获取AK/SK，AK对应合作方Key，Sk对应合作方secret。

3、运行demo

安装bin目录下的VideoWebPlugin.exe，然后运行demo下的webs.exe，打开demo_window_integration.html，输入appkey、secret、ip、port点击下面的执行按钮，成功之后红色的视频框会加载成功变成下图。

将视频监控点编号输入到如图位置，点击执行，即可预览视频画面

如果视频非常卡顿，可将主码流改为子码流，如果还是卡顿，在运管中心/状态监控/API网关/API管理/API列表里找到“获取监控点预览取流URLv2”，点击在线调试，输入监控点编号、appKey和APPsecret，将"streamform"参数改为"rtp"，右侧会返回rtsp视频流，在VLC播放器里播放，看看丢包率，查看是否是网络问题。如果返回的视频一直播放不成功，排查①设备本身不在线②554端口不通

4、在项目中使用

注释：
/*** oWebControl是配置的全局变量* 需要考虑切换web3.2控件的情况，所以V1.5.1做显隐，如果只需要加载V1.5.1，显隐相关的方法可以忽略，直接初始化和销毁v1.5.1插件* HikPlatformRef是封装的组件，后面会统一放上来，本页只放调用*///未初始化过平台插件
if(!this.$url.oWebControl){this.$refs.HikPlatformRef.initPlugin(0);  //初始化平台视频插件
}else{this.$url.PlatVideo_Total.ShowWnd();  //显示1.5.1视频
}//点击视频加载对应的画面 serialNumber是视频的code码
this.$refs.HikPlatformRef.lookVideo(serialNumber);  //查看视频

<template><div :id="videoParam.warpId" class="playWnd" :style="videoParam.styleData"></div>
</template><script>import {WebControl} from "../../../public/js/v1.5.1/jsWebControl-1.0.0.min"export default {name: "hik_platform_video",data(){return{// 是否为IE浏览器bIE:(!!window.ActiveXObject || 'ActiveXObject' in window),initCount:0,pubKey:''}},props:{videoParam:Object},methods:{// 创建插件实例，并启动本地服务建立websocket连接，创建插件窗口initPlugin(playModeValue){var that = this;this.$url.oWebControl = new WebControl({szPluginContainer: that.videoParam.warpId,          // 指定容器idiServicePortStart: 15900, // 指定起止端口号，建议使用该值iServicePortEnd: 15909,// 用于IE10使用ActiveX的clsidszClassId:"23BF3B0A-2C56-4D97-9C03-0CB103AA8F11",   // 创建WebControl实例成功cbConnectSuccess: function () {                     that.initCount = 0;// WebControl实例创建成功后需要启动服务that.$url.oWebControl.JS_StartService("window", { // 值"./VideoPluginConnect.dll"写死        dllPath: "./VideoPluginConnect.dll"  // 启动插件服务成功}).then(function () {                           that.$url.oWebControl.JS_CreateWnd(that.videoParam.warpId, that.videoParam.windowWidth, that.videoParam.windowHeight)//JS_CreateWnd创建视频播放窗口，宽高可设定.then(function () { that.init(playModeValue);  // 创建播放实例成功后初始化});}, function () { // 启动插件服务失败});},cbConnectError: function () { // 创建WebControl实例失败that.$url.oWebControl = null;$("#"+that.videoParam.warpId).html("插件未启动，正在尝试启动，请稍候...");// 程序未启动时执行error函数，采用wakeup来启动程序                        WebControl.JS_WakeUp("VideoWebPlugin://"); that.initCount ++;if (that.initCount < 3) {setTimeout(function () {that.initPlugin(playModeValue);}, 3000)} else {$("#"+that.videoParam.warpId).html("插件启动失败，请检查插件是否安装！<input type='button' value='点击下载' id='download_video_plugin'>");}},cbConnectClose: function (bNormalClose) {// 异常断开：bNormalClose = false// JS_Disconnect正常断开：bNormalClose = trueconsole.log("cbConnectClose");that.$url.oWebControl = null;}});},//初始化init(playModeValue){var that = this;this.getPubKey(function () {//请自行修改以下变量值//综合安防管理平台提供的secret，必填var secret = that.setEncrypt(that.$url.PlatVideoParam.secret);   var playMode = playModeValue;  //初始播放模式：0-预览，1-回放var snapDir = "D:\\SnapDir";    //抓图存储路径var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径var layout = "1x1";   //playMode指定模式的布局//是否启用HTTPS协议与综合安防管理平台交互，这里总是填1var enableHTTPS = 1; var encryptedFields = 'secret';     //加密字段，默认加密领域为secretvar showToolbar = 1;  //是否显示工具栏，0-不显示，非0-显示//是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示var showSmart = 1;var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769";  //自定义工具条按钮// 请自行修改以上变量值that.$url.oWebControl.JS_RequestInterface({funcName: "init",argument: JSON.stringify({//API网关提供的appkey                           appkey: that.$url.PlatVideoParam.appkey,secret: secret,    //API网关提供的secretip: that.$url.PlatVideoParam.ip, //API网关IP地址                                   playMode: playMode,   //播放模式（决定显示预览还是回放界面）port: that.$url.PlatVideoParam.port,//端口                      snapDir: snapDir,     //抓图存储路径videoDir: videoDir,   //紧急录像或录像剪辑存储路径layout: layout,        //布局enableHTTPS: enableHTTPS,  //是否启用HTTPS协议encryptedFields: encryptedFields, //加密字段showToolbar: showToolbar,   //是否显示工具栏showSmart: showSmart,     //是否显示智能信息buttonIDs: buttonIDs    //自定义工具条按钮})}).then(function (oData) {// 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题that.$url.oWebControl.JS_Resize(that.videoParam.windowWidth, that.videoParam.windowHeight);  });});},//反初始化uninit(){this.$url.oWebControl.JS_RequestInterface({funcName: "uninit"});},//获取公钥getPubKey (callback) {var that = this;this.$url.oWebControl.JS_RequestInterface({funcName: "getRSAPubKey",argument: JSON.stringify({keyLength: 1024})}).then(function (oData) {console.log(oData);if (oData.responseMsg.data) {that.pubKey = oData.responseMsg.data;callback()}})},//RSA加密setEncrypt (value) {var encrypt = new JSEncrypt();encrypt.setPublicKey(this.pubKey);return encrypt.encrypt(value);},//开启预览lookVideo(carCode){var cameraIndexCode  = carCode;     //获取输入的监控点编号值，必填var streamMode = 1;  //主子码流标识：0-主码流，1-子码流var transMode = 1;   //传输协议：0-UDP，1-TCPvar gpuMode = 0;     //是否启用GPU硬解，0-不启用，1-启用var wndId = -1;       //播放窗口序号（在2x2以上布局下可指定播放窗口）if(cameraIndexCode){cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");}this.$url.oWebControl.JS_RequestInterface({funcName: "startPreview",argument: JSON.stringify({cameraIndexCode:cameraIndexCode,   //监控点编号ezvizDirect: 0,gpuMode: gpuMode,    //是否开启GPU硬解streamMode: streamMode,   //主子码流标识transMode: transMode,   //传输协议wndId:wndId        //可指定播放窗口})})}},mounted(){//下载插件$("body").on("click", "#download_video_plugin", function () {window.open("../../../monitor/js/v1.5.1/VideoWebPlugin.exe","_blank");});}}
</script><style scoped lang="scss">
</style>

web端对接海康平台V1.5.1插件相关推荐

web端对接海康视频3.2开发包以及遇到的坑
须知: 3.0开发包功能比较全,但是只支持ie浏览器,所以使用的功能相对来说较少的3.2开发包,开发包官网上可以下载,可自行下载,并按照要求引入文件. 我的项目需求是左侧显示摄像头树状列表,中间部分显 ...
web前端对接海康大华视频
项目是在地图上摄像头打点,点击摄像头加载当前摄像头的视频 1下载web开发包 2整合代码,将代码放到nginx里面启动 3安装插件 4相关文件下载地址: 链接:相关地址提取码:e247 5代码实现 ...
web，h5海康视频接入监控视频流记录一
项目需求,web端实现海康监控视频对接接入,需实现实时预览,云台功能,回放功能. web端要播放视频,有三种方式,一种是装浏览器装插件,一种是装客户端exe,还有就是无插件了.浏览器装插件很早前已经行 ...
对接海康综合安防管理平台经验总结
前言:因业务需要对接海康威视的综合安防管理平台获得下属所管理的摄像头,根据摄像头code获得监控视频流信息 1.详情可以浏览海康开放平台,在官网上有对应的接入指南以及开放的API接口[前提是本地已部署 ...
php对接海康视频教程_EasyNVR无插件互联网直播平台对接海康摄像头如何通过SDK将视频在前端网页播放...
原标题:EasyNVR无插件互联网直播平台对接海康摄像头如何通过SDK将视频在前端网页播放市场上常见的海康.大华.宇视等网络摄像头只要支持RTSP协议,都可以接入到EasyNVR中,今天主要给大家分 ...
EasyRTSPServer流媒体服务协议网络视频直播平台对接海康NVR音频不能正常播问题解决方案
背景分析众所周知,RTSP协议是一个流媒体协议,可以实现直播和点播形式的音频与视频流的播放.RTSP协议定义了多种服务器-客户端之间交互的接口,主要有OPTIONS,DESCRIBE,SETUP,P ...
LiveGBS流媒体平台国标GB/T28181作为上级平台对接海康大华华为宇视等下级平台硬件NVR监控摄像机
LiveGBS流媒体平台国标GB/T28181作为上级平台对接海康.大华.华为.宇视等下级平台NVR硬件监控摄像机 1.背景说明 2.部署国标平台 2.1.安装使用说明 2.2.服务器网络环境 2.3 ...
LiveGBS流媒体平台GB/T28181功能-作为上级平台对接海康大华华为宇视等下级平台监控摄像机NVR硬件执法仪等GB28181设备
LiveGBS作为上级平台对接海康大华华为宇视等下级平台监控摄像机NVR硬件执法仪等GB28181设备 1.背景说明 2.部署国标平台 2.1.安装使用说明 2.2.服务器网络环境 2.3.信令服务配 ...
国标服务器GBServerPlatform对接海康摄像头的操作说明
这篇文章讲解一下QuickGBLink开发的国标服务器如何对接海康IPC. (GBT28181国标平台软件下载地址:https://github.com/QuickGBLink88/GB28181_S ...

web端对接海康平台V1.5.1插件

web端对接海康平台V1.5.1插件相关推荐

最新文章

热门文章