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, // 指定容器id
iServicePortStart: 15900, // 指定起止端口号，建议使用该值
iServicePortEnd: 15909,
// 用于IE10使用ActiveX的clsid
szClassId:"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 = true
console.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协议与综合安防管理平台交互，这里总是填1
var enableHTTPS = 1;
var encryptedFields = 'secret'; //加密字段，默认加密领域为secret
var 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网关提供的secret
ip: 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-TCP
var 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>
1053
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
