应用条件
一.、引入依赖文件
jsencrypt.min.js
jsWebControl-1.0.0.min.js
注：必须在与 vue 的 根 index.html 文件中引入，main.js 中引入有效；
依赖文件及官网 demo：官网下载
二、template
<div class="video-wrap mt-16">
<wrap
class="video-box"
v-for="(item, index) in realTimeData.videoConfig"
:key="item.id"
>
<div :id="`playWnd${index}`" class="playWnd"></div>
</wrap>
</div>三、methods
/* 获取视频 code */
async getVideoCode() {
this.realTimeData.videoLoad = true;
const params = {
area: "",
enterprise: this.realTimeData.Warehouse.enterpriseName,
street: "",
};
await getCamera(params).then((res) => {const videoCode = res.data.list.map(({ cameraIndexCode}) => ({cameraIndexCode,}));
this.realTimeData.videoConfig = videoCode.map((item) => {
return {
code: item.cameraIndexCode,
id: Math.floor(Math.random() * 100),
};
});
this.initPlugin(videoCode);
});
},
/* 创立插件实例 */
initPlugin(codeArr) {const dll = { dllPath: "./VideoPluginConnect.dll"};
codeArr.forEach((item, index) => {
let oWebControl = new WebControl({szPluginContainer: `playWnd${index}`, // 指定容器 id
iServicePortStart: 15900,
iServicePortEnd: 15909,
szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于 IE10 应用 ActiveX 的 clsid
cbConnectSuccess: () => {oWebControl.JS_StartService("window", dll).then(() => {
oWebControl.JS_SetWindowControlCallback({cbIntegrationCallBack: (msg) => {
// 注：不能应用内部函数调用，有效
if (msg?.responseMsg?.msg?.result) {const { result} = msg.responseMsg.msg;
if (result == 1024) {oWebControl.JS_HideWnd();// 放大暗藏其它视频窗口
} else if (result == 1025) {oWebControl.JS_ShowWnd();// 放大显示全副窗口
}
}
},
});
// 启动插件服务胜利
oWebControl.JS_CreateWnd(`playWnd${index}`, 260, 160).then(() => {
//JS_CreateWnd 创立视频播放窗口，宽高可设定
this.initVideo(oWebControl, item.cameraIndexCode); // 创立播放实例胜利后初始化
});
});
},
});
this.plug.example.push(oWebControl);
});
},
/* 获取公钥 */
initVideo(oWebControl, code) {
const params = {
funcName: "getRSAPubKey",
argument: JSON.stringify({keyLength: 1024}),
};
oWebControl.JS_RequestInterface(params).then((res) => {if (res.responseMsg.data) {
this.plug.pubKey = res.responseMsg.data;
this.getVideoConfig(oWebControl);
this.getClickAction(oWebControl, code);
}
});
},
/* 视频插件配置项回调 */
getVideoConfig(oWebControl) {const { offsetWidth, offsetHeight} = document.getElementById("playWnd0");
const configObj = {
funcName: "init",
argument: JSON.stringify({
appkey: "xxxxxx", //API 网关提供的 appkey
secret: this.setEncrypt("xxxxxx"), //API 网关提供的 secret
ip: "xxx.xxx.xxx.xxx", //API 网关 IP 地址
playMode: 0, // 播放模式（决定显示预览还是回放界面）port: 8443, // 端口
snapDir: "D:\\SnapDir", // 抓图存储门路
videoDir: "D:\\VideoDir", // 紧急录像或录像剪辑存储门路
layout: "1x1", // 布局
enableHTTPS: 1, // 是否启用 HTTPS 协定
encryptedFields: "secret", // 加密字段
showToolbar: 1, // 是否显示工具栏
showSmart: 1, // 是否显示智能信息
buttonIDs: "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769", // 自定义工具条按钮
}),
};
oWebControl.JS_RequestInterface(configObj).then(() => {oWebControl.JS_Resize(offsetWidth, offsetHeight);
});
},
/* 视频流 RSA 加密 */
setEncrypt(value) {const encrypt = new JSEncrypt();
encrypt.setPublicKey(this.plug.pubKey);
return encrypt.encrypt(value);
},
/* 视频播放 */
getClickAction(oWebControl, code) {code = code.trim();
oWebControl.JS_RequestInterface({
funcName: "startPreview",
argument: JSON.stringify({
cameraIndexCode: code, // 监控点编号
streamMode: 0, // 奴才码流标识：0- 主码流，1- 子码流
transMode: 1, // 传输协定：0-UDP，1-TCP
gpuMode: 0, // 是否启用 GPU 硬解，0- 不启用，1- 启用
wndId: -1, // 播放窗口序号（在 2x2 以上布局下可指定播放窗口）}),
});
this.realTimeData.videoLoad = false;
},
/* 销毁视频实例 */
getDestruction() {this.plug.example.forEach((item) => {item.JS_HideWnd();
item.JS_DestroyWnd().then((res) => {});
// item.JS_Disconnect().then((res) => {});
});
},四、应用效果图、性能：
1. 实时监控 / 2. 截图 / 3. 录屏 / 4. 摄像头管制 / 5. 语音指挥（硬件反对）/ 6. 即时回放