Vue项目中使用海康安全生产平台播放监控视频

最近一直在做有关海康监控视频的项目，闲下来写下这篇文章，加深一下印象，同时也和大家交流一下经验，以便更好提升自己。废话不多说，开始正题。。。。

首先把海康插件引进到项目中来

然后在index.html中引进

最后把完整代码贴出来，不一一介绍了（懒~~~~）

<template><div class="video-player"><div id="divPlugin" class="divPlugin" ref="divPlugin" v-if="plugin"></div><!-- <div class="down" v-else><a href="http://jbfsys.oss-cn-beijing.aliyuncs.com/download/VideoWebPlugin-1564128302790.exe">下载</a></div> --></div>
</template>
<script>
export default {
name: 'videoPlayer',
props:['cameraIndexCode','layout'],data(){return {plugin:true ,oWebControl:null,   //插件对象initCount:0,pubKey:'',         //公钥加密playMode:'',video_init_data:{appkey:'你的appkey',appSecret:'你的appSecret',ip:'IP地址',port:'端口号',snapDir:'D:\\SnapDir',videoDir:'D:\\VideoDir',layout:'',// encryptedFields:'secret',// enableHttps:'1',},video_play_data:{cameraIndexCode:"",streamMode:0,transMode:1,gpuMode:0,wndId:-1,},//videoWidth videoHeight screenWidth screenHeight //这四个参数为了使插件大小和屏幕宽度一致变化videoWidth:700,videoHeight:300,screenWidth: document.documentElement.clientWidth,//屏幕宽度screenHeight: document.documentElement.clientHeight,//屏幕高度//设置窗口遮挡 根据浏览器大小变化视频插件的大小iLastCoverLeft : 0,iLastCoverTop : 0,iLastCoverRight : 0,iLastCoverBottom : 0,};},created(){},mounted(){//插件初始化this.initPlugin();this.$nextTick(()=>{this.videoWidth = this.$refs.divPlugin.offsetWidth;this.videoHeight = this.$refs.divPlugin.offsetHeight;})// 监听窗口变化let _this = this;window.onresize = function(){ // 定义窗口大小变更通知事件 _this.screenWidth = document.documentElement.clientWidth; //窗口宽度_this.screenHeight = document.documentElement.clientHeight; //窗口高度};window.addEventListener('scroll', function () {if (this.oWebControl != null) {this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight);this.setWndCover();}});},destroyed(){if (this.oWebControl != null){this.oWebControl.JS_Disconnect().then(function(){}, function() {});}},methods: {//   插件初始化initPlugin () {let _this = thisthis.oWebControl = new WebControl({szPluginContainer: "divPlugin",iServicePortStart: 15900,iServicePortEnd: 15909,cbConnectSuccess: (e) => {this.plugin=true;// _this.setCallbacks();if(_this.oWebControl){_this.oWebControl.JS_StartService("window", {dllPath: "./VideoPluginConnect.dll" //dllPath: "./DllForTest-Win32.dll"}).then( (res) => {_this.oWebControl.JS_CreateWnd("divPlugin",_this.videoWidth,_this.videoHeight).then(() => {// console.log("JS_CreateWnd success");_this.initVideo();});}, function () {});}else{}},cbConnectError: () => {//console.log("cbConnectError");_this.oWebControl = null;$("#divPlugin").html("插件未启动，正在尝试启动，请稍候...");WebControl.JS_WakeUp("VideoWebPlugin://");_this.initCount ++;if (_this.initCount < 3) {setTimeout(() => {_this.initPlugin();}, 3000)} else {$("#divPlugin").html("插件启动失败，请检查插件是否安装！");this.plugin=false;}},cbConnectClose: () => {//console.log("cbConnectClose");this.oWebControl.JS_Disconnect().then(function(){}, function() {});this.oWebControl = null;}});},    // 初始化参数initVideo () {// console.log(this.getPubKey)this.getPubKey(() =>{let appkey = this.video_init_data.appkey;let secret = this.video_init_data.appSecret;let ip = this.video_init_data.ip;let szPort= this.video_init_data.port;let snapDir = this.video_init_data.snapDir;let videoDir = this.video_init_data.videoDir ;let layout = this.layout;// let encryptedFields = ['secret'];let port = parseInt(szPort);// let enableHttps = parseInt(this.video_init_data.enableHttps);                       // encryptedFields = encryptedFields.join(",");this.oWebControl.JS_RequestInterface({funcName: "init",argument: JSON.stringify({appkey: appkey,secret: secret,ip: ip, playMode:0, // 预览port: port,snapDir: snapDir,videoDir: videoDir,layout: layout,// enableHTTPS: enableHttps,// encryptedFields: encryptedFields})}).then(function (oData) {// console.log(JSON.stringify(oData))});this.startRealPlay()})},// 获取公钥getPubKey (callback) {// console.log(this.oWebControl,'oWebControloWebControl')this.oWebControl.JS_RequestInterface({funcName: "getRSAPubKey",argument: JSON.stringify({keyLength: 1024})}).then((oData) => {// console.log(oData)if (oData.responseMsg.data) {this.pubKey = oData.responseMsg.datacallback()}})},// RSA加密setEncrypt (value) {let encrypt = new JSEncrypt();encrypt.setPublicKey(this.pubKey);return encrypt.encrypt(value);},// 视频预览startRealPlay () {// console.log('------开始播放-------')let cameraIndexCode  = this.cameraIndexCode;let streamMode = this.video_play_data.streamMode;let transMode = this.video_play_data.transMode;let gpuMode = this.video_play_data.gpuMode;let wndId = -1;  //默认为空闲窗口回放// console.log('------开始播放-------',cameraIndexCode)if(this.layout == 1){//用户点击具体摄像头播放this.oWebControl.JS_RequestInterface({funcName: "startPreview",argument: JSON.stringify({cameraIndexCode : cameraIndexCode,streamMode: streamMode,transMode: transMode,gpuMode: gpuMode,wndId: 1})}).then(function (oData) {// console.log('err:',oData)});} else {//循环出所有视频并播放for(let i = 0; i <cameraIndexCode.length;i++){this.oWebControl.JS_RequestInterface({funcName: "startPreview",argument: JSON.stringify({cameraIndexCode : cameraIndexCode[i],streamMode: streamMode,transMode: transMode,gpuMode: gpuMode,wndId: i+1})}).then(function (oData) {// console.log('err:',oData)});} }        },//根据窗口变化设置视频插件大小resizewindow(w,h){w = (w<1423)?1423:wh = (h<754)?754:hwindow.resizeTo(w ,h);},//设置窗口遮挡setWndCover() {let iWidth = document.body.clientWidth;let iHeight = document.body.clientHeight;let oDivRect = document.getElementById("divPlugin").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 > 700) ? 700 : iCoverLeft;iCoverTop = (iCoverTop > 400) ? 400 : iCoverTop;iCoverRight = (iCoverRight > 700) ? 700 : iCoverRight;iCoverBottom = (iCoverBottom > 400) ? 400 : iCoverBottom;if (this.iLastCoverLeft != iCoverLeft) {//console.log("iCoverLeft: " + iCoverLeft);this.iLastCoverLeft = iCoverLeft;this.oWebControl.JS_SetWndCover("left", iCoverLeft);}if (this.iLastCoverTop != iCoverTop) {//console.log("iCoverTop: " + iCoverTop);this.iLastCoverTop = iCoverTop;this.oWebControl.JS_SetWndCover("top", iCoverTop);}if (this.iLastCoverRight != iCoverRight) {//console.log("iCoverRight: " + iCoverRight);this.iLastCoverRight = iCoverRight;this.oWebControl.JS_SetWndCover("right", iCoverRight);}if (this.iLastCoverBottom != iCoverBottom) {//console.log("iCoverBottom: " + iCoverBottom);this.iLastCoverBottom = iCoverBottom;this.oWebControl.JS_SetWndCover("bottom", iCoverBottom);}}},watch:{screenWidth(n,o){this.videoWidth = this.$refs.divPlugin.offsetWidth;this.videoHeight = this.$refs.divPlugin.offsetHeight;this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight);this.resizewindow(n,this.screenHeight);this.setWndCover();}, screenHeight(n,o){this.videoWidth = this.$refs.divPlugin.offsetWidth;this.videoHeight = this.$refs.divPlugin.offsetHeight;this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight);this.resizewindow(this.screenWidth,n);this.setWndCover();},
//海康的视频播放插件是默认最高层级这样会导致页面中的弹框等被遮挡，定义一个全局的变量videohide
//当弹框出现时 视频插件隐藏，解决此问题。'$store.state.videohide'(n,o){if(n){this.oWebControl.JS_HideWnd();}else if(!n){this.oWebControl.JS_ShowWnd();}},videoDialog(n){if(n){this.initPlugin(); } }}
};
</script>
<style  scoped>
.video-player{width: 100%;height: 100%;
}
.divPlugin{width: 100%;height: 100%;color:red;/* display: flex; */justify-content: center;align-items: center;font-size: 18px;}.down{width: 100%;height: 100%;color:red;display: flex;justify-content: center;align-items: center;font-size: 18px;}.down a{color:red;}
</style>

我这是封装成组件，在需要的页面引用。父组件传来cameraIndexCode，记得上面的appkey、appSecret、ip、port一定要填，别忘了安装插件

另外加上回放代码

一开始回放播放不成功，文档上说是playMode=1就是回放，记得一定要把funcName的值写成 "startPlayback"，一个不起眼的单词就可能播放不成功。

好了，就这麽多了，如有不足请大家多多包涵，欢迎互相交流。

下一篇将写另一种海康插件的写法。

Vue项目中使用海康安全生产平台播放监控视频相关推荐

vue项目中实现语音队列的依次播放
vue项目中实现语音队列的依次播放需求分析通过长链接接收后台返回的消息数据,并进行语音的依次播放完整.长链接和语音播放功能在以往的文章中都有介绍.再次我们主要着重介绍语音依次播放的功能. 那怎样实 ...
vue项目中，amr格式的音频播放
在vue项目中,使用电脑浏览器播放amr格式的音频文件是直接播放不出来的,需要使用一个js包:benz-amr-recorder 1.npm install benz-amr-recorder 2.想 ...
在angular项目中集成海康视频web插件 V1.4.1
在近期的angular项目中,需要跟海康iSecure Center平台对接,实现监控点视频的实时和录像播放功能. 对接过程并不顺畅. 本来已经通过视频流转http-flv协议,利用flvjs实现了基 ...
对接海康ISC平台API
开发文档:海康开放平台.(视频预览.抓图等能力)
在vue项目中实现海康威视IOT云眸平台（实时和回放）
上次我们已经提到海康ISC平台的应用,详见在vue项目中实现海康威视ISC平台(实时和回放) 这次记录下海康云眸平台的应用,风格与上一篇文章保持一致,方便食用. 环境先下载安装海康插件HikOpen ...
在vue中使用海康插件实现视频实时监控(海康插件)
在vue中使用海康插件实现视频实时监控(海康插件) 首先下载并安装海康插件 webcontrol.exe 然后直接就写代码把,所有方法都是海康他们直接封装好的demo 初始化之后,后台把密钥和一些 ...
海康9800平台linux的sdk,流媒体项目外包海康9800平台sdk适配
1. 整体流程图,见附件: 2. 任务描述: 1>海康9800平台sdk适配:需要研究信令协议及开发对接程序(登陆平台,获取设备的列表,开启实时预览,停止实时预览等):需要研究音视频流的传输协议 ...
vue中使用海康插件实现视频监控-流不稳定导致视频断开前端解决办法
vue中使用海康插件实现视频监控-流不稳定导致视频断开前端解决办法配置和启用海康插件详情看本人博客链接:https://blog.csdn.net/jinglianglove/article/de ...
如何在LabVIEW中进行海康机器视觉算法平台VisionMaster二次开发
目录 1.导言庞大的NI LabVIEW软件平台 LabVIEW 平台的特点海康机器人的视觉算法平台VisionMaster特点如何在LabVIEW中进行海康视觉算法平台二次开发 2.方法与步骤 ...

Vue项目中使用海康安全生产平台播放监控视频

Vue项目中使用海康安全生产平台播放监控视频相关推荐

最新文章

热门文章