vue海康视频播放组件
渲染组件后,调用initPlugin函数,传入一个code数组
<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>