根据传入的cameraIndexCode 来动态生成预览画面
<template>
<div>
<div id="playWnd" class="playWnd"></div>
</div>
</template>
<script>
export default {
props: {
cameraIndexCode: String,
},
data() {
return {
oWebControl: null,
pubKey: '',
initOption: {
// appkey: '22175154',
// secret: '852Sdn5TrNEN2tdeEeet',
appkey: '21738710',
secret: 'NTbousDoKLBMIUW5EdTr',
ip: '192.168.0.121',
playMode: 0, // 预览
port: 443,
snapDir: '',
videoDir: '',
layout: '1x1',
enableHTTPS: 1,
showToolbar: 0,
showSmart: 1,
buttonIDs: '1,0,256',
encryptedFields: 'secret',
language: 'zh_CN',
reconnectTimes: 5,
reconnectDuration: 5,
},
startPreviewOption: {
cameraIndexCode: '353e8b60a6144112a1a80e2d81de6f32',
streamMode: +'0',
transMode: +'1',
gpuMode: +'0',
ezvizDirect: +'0',
},
obj: {
// 600,390
w: 1400,
h: 830,
},
}
},
watch: {
cameraIndexCode: {
handler(val) {
console.log(val)
if (val && val.trim()) {
this.startPreviewOption.startPreviewOption = val
this.initPlugin()
window.addEventListener(
'resize',
() => {
if (this.oWebControl != null) {
this.oWebControl.JS_Resize(this.obj.w, this.obj.h)
this.setWndCover()
}
},
true
)
window.addEventListener(
'scroll',
() => {
if (this.oWebControl != null) {
this.oWebControl.JS_Resize(this.obj.w, this.obj.h)
this.setWndCover()
}
},
true
)
}
},
immediate: true,
},
},
computed: {},
created() {
console.log('进入视频页面')
},
mounted() {
// this.initPlugin();
// 窗口resize
},
beforeDestroy() {
// console.log("beforeDestory");
this.oWebControl.JS_DestroyWnd().then(
() => {
console.log('destory success')
},
() => {
console.log('destory error')
}
)
},
methods: {
initPlugin() {
let initCount = 0
let self = this
this.oWebControl = new WebControl({
szPluginContainer: 'playWnd',
iServicePortStart: 15900,
iServicePortEnd: 15909,
szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
cbConnectSuccess: function() {
initCount = 0
self.setCallbacks()
self.oWebControl
.JS_StartService('window', {
dllPath: './VideoPluginConnect.dll',
})
.then(
function() {
self.oWebControl
.JS_CreateWnd('playWnd', self.obj.w, self.obj.h)
.then(function() {
console.log('JS_CreateWnd success')
self.init()
})
},
function() {}
)
},
cbConnectError: function() {
console.log('cbConnectError')
this.oWebControl = null
// $("#playWnd").html("插件未启动,正在尝试启动,请稍候...");
// this.$message.error("插件未启动,正在尝试启动,请稍候...");
WebControl.JS_WakeUp('VideoWebPlugin://')
initCount++
if (initCount < 3) {
setTimeout(function() {
initPlugin()
}, 3000)
} else {
// $("#playWnd").html("插件启动失败,请检查插件是否安装!");
// this.$message.error("插件启动失败,请检查插件是否安装!");
}
},
cbConnectClose: function(bNormalClose) {
// 异常断开:bNormalClose = false
// JS_Disconnect正常断开:bNormalClose = true
console.log('cbConnectClose')
this.oWebControl = null
},
})
},
setCallbacks() {
this.oWebControl.JS_SetWindowControlCallback({
cbIntegrationCallBack: this.cbIntegrationCallBack,
})
},
cbIntegrationCallBack(oData) {
this.showCBInfo(JSON.stringify(oData.responseMsg))
},
init() {
let self = this
this.getPubKey(function() {
self.oWebControl
.JS_RequestInterface({
funcName: 'init',
argument: JSON.stringify({
...self.initOption,
secret: self.setEncrypt(self.initOption.secret),
}),
})
.then(function(oData) {
// console.log(oData);
self.oWebControl.JS_Resize(self.obj.w, self.obj.h) // 初始化后resize一次,规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
self.startPreview()
})
})
},
getPubKey(callback) {
let self = this
this.oWebControl
.JS_RequestInterface({
funcName: 'getRSAPubKey',
argument: JSON.stringify({
keyLength: 1024,
}),
})
.then(function(oData) {
// console.log(oData);
if (oData.responseMsg.data) {
self.pubKey = oData.responseMsg.data
callback()
}
})
},
setEncrypt(value) {
var encrypt = new JSEncrypt()
encrypt.setPublicKey(this.pubKey)
return encrypt.encrypt(value)
},
showCBInfo(szInfo, type) {
// this.$message.error(szInfo);
},
startPreview() {
let self = this
this.oWebControl
.JS_RequestInterface({
funcName: 'startPreview',
argument: JSON.stringify(self.startPreviewOption),
})
.then(function(oData) {
// console.log(oData);
// self.showCBInfo(JSON.stringify(oData ? oData.responseMsg : ""));
})
},
setWndCover() {
let { w, h } = this.obj
var iWidth = window.innerWidth
var iHeight = window.innerHeight
console.log('当前window窗口的宽度:', iWidth)
console.log('当前window窗口的高度:', iHeight)
var oDivRect = document.getElementById('playWnd').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 > w ? w : iCoverLeft
iCoverTop = iCoverTop > h ? h : iCoverTop
iCoverRight = iCoverRight > w ? w : iCoverRight
iCoverBottom = iCoverBottom > h ? h : iCoverBottom
console.log(iCoverLeft)
console.log(iCoverRight)
this.oWebControl.JS_RepairPartWindow(0, 0, w + 1, h) // 多1个像素点防止还原后边界缺失一个像素条
if (iCoverLeft != 0) {
this.oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, h)
}
if (iCoverTop != 0) {
this.oWebControl.JS_CuttingPartWindow(0, 0, h+1, iCoverTop) // 多剪掉一个像素条,防止出现剪掉一部分窗口后出现一个像素条
}
if (iCoverRight != 0) {
this.oWebControl.JS_CuttingPartWindow(
w - iCoverRight,
0,
iCoverRight,
h
)
}
if (iCoverBottom != 0) {
this.oWebControl.JS_CuttingPartWindow(
0,
h - iCoverBottom,
w,
iCoverBottom
)
}
},
},
}
</script>
<style scoped="scoped" lang="scss">
.playWnd {
// margin: 30px 0 0 400px;
width: 1400px;
height: 830px;
border: 1px solid red;
}
</style>