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

最新推荐文章于 2024-09-24 15:52:42 发布

星雨我心愿

最新推荐文章于 2024-09-24 15:52:42 发布

阅读量6.1k

点赞数 12

文章标签： vue 监控视频

本文链接：https://blog.csdn.net/mysunli/article/details/103786766

版权

本文介绍如何在Vue项目中集成海康监控视频，包括引入海康插件、配置步骤及回放功能实现，同时分享了遇到的问题与解决方法，适合开发者参考。

摘要由CSDN通过智能技术生成

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

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

然后在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(){