vue海康视频播放组件

<template>
<div :title="name" :id="id" :style="{width:swfWidth+'px',height:swfHeight+'px'}" class="showvideo">
</div>
</template>
<script>
export default {
props: {
name: {
default: ''
},
id: {
default: 'playWnd'
},
swfWidth: {
default: () => 657
},
swfHeight: {
default: () => 400
},
layout: {
default: '1x1'
},
autoPlay: {
default: true
},
},
data() {
return {
oWebControl: undefined,
initCount: 0,
pubKey: "",
cameraIndexCode: "8d6a85f82350402d8c9adc28a6a3dcef",
codes: ['76eb6efb24074827baa326987c379dab'],
//cameraIndexCode: 'ec89aa4c9dd147b39f59132661a40815',
};
},
created() {
//this.initPlugin();
},
mounted() {
let that = this;
this.observeWrapper();
$(window).resize(() => {
if (this.oWebControl != null) {
this.oWebControl.JS_Resize(450, 264);
this.setWndCover();
}
});
$(window).scroll(() => {
if (this.oWebControl != null) {
this.oWebControl.JS_Resize(450, 264);
this.setWndCover();
}
});
}, destroyed() {
if (this.oWebControl != null) {
this.oWebControl.JS_HideWnd();
this.oWebControl.JS_Disconnect().then(
function () {
},
function () {
}
);
}
}, methods: {
close() {
this.$parent.show_playShipin = false;
if (this.oWebControl != null) {
this.oWebControl.JS_HideWnd();
this.oWebControl.JS_Disconnect().then(
function () {
},
function () {
}
);
}
}, //推送消息
cbIntegrationCallBack(oData) {
showCBInfo(JSON.stringify(oData.responseMsg));
}, //监听自身容器大小变化
observeWrapper() {
const ro = new ResizeObserver((entries) => {
for (const entry of entries) {
const cr = entry.contentRect;
this.videoWidth = cr.width;
this.videoHeight = cr.height;
this.oWebControl &&
this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight);
this.oWebControl && this.setWndCover();
}
});
ro.observe(document.querySelector(`#${this.id}`));
},
setWndCover() {
//裁剪插件实例的大小
let iWidth = $(window).width();
let iHeight = $(window).height();
let oDivRect = $(`#${this.id}`).get(0).getBoundingClientRect(); let iCoverLeft = oDivRect.left < 0 ? Math.abs(oDivRect.left) : 0;
let iCoverTop = oDivRect.top < 0 ? Math.abs(oDivRect.top) : 0;
let iCoverRight =
oDivRect.right - iWidth > 0 ? Math.round(oDivRect.right - iWidth) : 0;
let iCoverBottom =
oDivRect.bottom - iHeight > 0
? Math.round(oDivRect.bottom - iHeight)
: 0;
iCoverLeft = iCoverLeft > this.videoWidth ? this.videoWidth : iCoverLeft;
iCoverTop = iCoverTop > this.videoHeight ? this.videoHeight : iCoverTop;
iCoverRight =
iCoverRight > this.videoWidth ? this.videoWidth : iCoverRight;
iCoverBottom =
iCoverBottom > this.videoHeight ? this.videoHeight : iCoverBottom; this.oWebControl.JS_RepairPartWindow(0, 0, 1001, 600);
if (iCoverLeft != 0) {
this.oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 600);
}
if (iCoverTop != 0) {
this.oWebControl.JS_CuttingPartWindow(0, 0, 1001, iCoverTop);
}
if (iCoverRight != 0) {
this.oWebControl.JS_CuttingPartWindow(
1000 - iCoverRight,
0,
iCoverRight,
600
);
}
if (iCoverBottom != 0) {
this.oWebControl.JS_CuttingPartWindow(
0,
600 - iCoverBottom,
1000,
iCoverBottom
);
}
},/**
* @codes:Array
* */
initPlugin(codes) {
let that = this;
this.codes = codes;
this.oWebControl = new WebControl({
szPluginContainer: that.id, // 指定容器id
iServicePortStart: 15900, // 指定起止端口号，建议使用该值
iServicePortEnd: 15909,
szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
cbConnectSuccess: function () {
that.oWebControl
.JS_StartService("window", {
// WebControl实例创建成功后需要启动服务
dllPath: "./VideoPluginConnect.dll", // 值"./VideoPluginConnect.dll"写死
})
.then(
function () {
console.log("success");
that.oWebControl.JS_SetWindowControlCallback({
// 设置消息回调
cbIntegrationCallBack: that.cbIntegrationCallBack,
});
that.oWebControl
.JS_CreateWnd(that.id, that.swfWidth, that.swfHeight) //JS_CreateWnd创建视频播放窗口，宽高可设定
.then(function () {
console.log("成功222", that);
that.init(codes); // 创建播放实例成功后初始化
});
},
function () {
// 启动插件服务失败
console.log("fail");
}
);
},
cbConnectError: function () {
// 创建WebControl实例失败
console.log(that, "that");
that.oWebControl = null;
that.$message.error("插件未启动，正在尝试启动，请稍候...");
WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
that.initCount++;
if (that.initCount < 3) {
setTimeout(function () {
that.initPlugin();
}, 3000);
} else {
that.$message.error("插件启动失败，请检查插件是否安装！");
}
},
cbConnectClose: function (bNormalClose) {
// 异常断开：bNormalClose = false
// JS_Disconnect正常断开：bNormalClose = true
console.log("cbConnectClose");
that.oWebControl = null;
},
});
},
init(codes) {
let that = this;
this.getPubKey(function () {
var appkey = "29482144"; //请自行修改为你自己的
var secret = that.setEncrypt("14Rmadov5xWauvjkVYJd"); //请自行修改为你自己的
var ip = "153.99.0.70"; //请自行修改为你自己的
var playMode = 0; //这个是播放模式，0是预览，1是回放
var port = 8111; //请自行修改为你自己的
var snapDir = "D:\\SnapDir";
var videoDir = "D:\\VideoDir";
var layout = that.layout;
var enableHTTPS = 1;
var encryptedFields = "secret";
var showToolbar = 0;
var showSmart = 1;
var buttonIDs =
"0,16,256,257,258,259,260,512,513,514,515,516,517,768,769";
that.oWebControl
.JS_RequestInterface({
funcName: "init",
argument: JSON.stringify({
appkey: appkey,
secret: secret,
ip: ip,
playMode: playMode,
port: port,
snapDir: snapDir,
videoDir: videoDir,
layout: layout,
enableHTTPS: enableHTTPS,
encryptedFields: encryptedFields,
showToolbar: showToolbar,
showSmart: showSmart,
buttonIDs: buttonIDs,
}),
})
.then(function (oData) {
that.oWebControl.JS_Resize(that.swfWidth, that.swfHeight);
for (let i = 0; i < codes.length; i++) {
that.startClickFn(codes[i]);
}
});
});
},
//公钥的获取
getPubKey(callback) {
let that = this;
this.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();
}
});
},
setEncrypt(value) {
let encrypt = new JSEncrypt();
encrypt.setPublicKey(this.pubKey);
return encrypt.encrypt(value);
},
startPlay() {
this.autoPlay = true
this.initPluginPlay(this.codes)
},
startClickFn(code) {
var cameraIndexCode = code;
var streamMode = 0;
var transMode = 1;
var gpuMode = 0;
var wndId = -1;
this.oWebControl.JS_RequestInterface({
funcName: "startPreview",
argument: JSON.stringify({
cameraIndexCode: cameraIndexCode,
streamMode: streamMode,
transMode: transMode,
gpuMode: gpuMode,
wndId: wndId,
}),
});
},
stopClickFn() {
if (this.oWebControl && this.oWebControl.JS_RequestInterface) {
this.oWebControl.JS_RequestInterface({
funcName: "stopAllPreview",
});
}
},
des() {
if (this.oWebControl != null) {
this.oWebControl.JS_HideWnd();
this.oWebControl.JS_Disconnect().then(
function () {
},
function () {
}
);
}
}
},
};
</script>
<style lang="scss" scoped>
.showvideo {
width: 657px;
height: 400px;
//border: 1px solid red;
background-color: rgba(0, 0, 0, .3);
border: 1px solid yellow;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
</style>