vue2中使用WebSDK_V3.3.0(231027)展示监控视频

这篇具有很好参考价值的文章主要介绍了vue2中使用WebSDK_V3.3.0(231027)展示监控视频。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.需要数据

 {
          szIP: '192.168.1.X',  //摄像头ip
          szPort: '80',       //端口
          szUsername: 'admin', //用户名
          szPassword: 'xxxxxx' //密码
        },

2.下载内容

WEB3.3控件开发包 V3.3

下载地址:海康开放平台

 3.安装插件,引入js文件

(1)双击HCWebSDKPlugin.exe,安装插件

(2)引入文件

hcwebsdk at webvideoc,vue2对接摄像头,前端,linux,javascript

把这两个文件放在public下static目录下,在public的index.html中引入

<script src="/static/videojs/jquery-1.7.1.min.js"></script>
<script id="videonode" src="/static/videojs/webVideoCtrl.js"></script>

4.vue代码--视频组件

<template>
  <div>
    <div class="left">
      <div
        ref="divPlugin"
        :id="divPlugin"
        class="plugin"
        style="width: 650px; height: 250px; z-index: 1"
      ></div>
    </div>
  </div>
</template>


<script>
export default {
  props: ['sysParams'],
  data() {
    return {
      divPlugin: 'video_' + this.generateUUID(),
      g_iWndIndex: null,
      szDeviceIdentify: ''
    };
  },
  created() {},
  mounted() {
    this.linkVideo();
  },
  beforeDestroy() {
    this.hideVideo();
  },
  methods: {
    // 初始化
    linkVideo() {
      let that = this;
      WebVideoCtrl.I_InitPlugin({
        bWndFull: true, //是否支持单窗口双击全屏,默认支持 true:支持 false:不支持
        iWndowType: 2, //表示视频组件窗口数,默认是1,我这里需要四个窗口改为了2
        cbSelWnd: function (xmlDoc) {
          that.g_iWndIndex = parseInt(
            $(xmlDoc).find('SelectWnd').eq(0).text(),
            10
          );
          console.log('选中窗口');
          if (that.sysParams[that.g_iWndIndex]) {
            that.clickStartRealPlay();
          } else {
            that.$message.error('当前窗口无设备');
          }
        },
        cbDoubleClickWnd: function (iWndIndex, bFullScreen) {
          if (!bFullScreen) {
          }
        },
        cbEvent: function (iEventType, iParam1, iParam2) {
          if (2 == iEventType) {
            // 回放正常结束
            showCBInfo('窗口' + iParam1 + '回放结束!');
          } else if (-1 == iEventType) {
            showCBInfo('设备' + iParam1 + '网络错误!');
          } else if (3001 == iEventType) {
            clickStopRecord(g_szRecordType, iParam1);
          }
        },
        cbInitPluginComplete: function () {
          WebVideoCtrl.I_InsertOBJECTPlugin(that.divPlugin).then(
            () => {
              that.sysParams.map((item, index) => {
                setTimeout(() => {
                  that.g_iWndIndex = index;
                  that.clickStartRealPlay();
                }, index * 1000);
              });
            },
            () => {}
          );
        }
      });
    },
    // 登录
    async clickStartRealPlay() {
      let that = this;
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(that.g_iWndIndex);
      let { szIP, szPort, szUsername, szPassword } =
        this.sysParams[that.g_iWndIndex];
      that.szDeviceIdentify = szIP + '_' + szPort;
      if (oWndInfo == null) {
        WebVideoCtrl.I_Login(szIP, 1, szPort, szUsername, szPassword, {
          success: function (xmlDoc) {
            //成功的回调函数
            that.getVideo();
          },
          error: function (oError) {
            if (oError.errorCode == '2001') {
              that.getVideo();
            }
            //失败的回调函数
          }
        });
      } else {
        await WebVideoCtrl.I_Stop(that.g_iWndIndex);
        that.getVideo();
      }
    },
    // 打开预览视频
    getVideo() {
      console.log('渲染第' + this.g_iWndIndex + '窗口');
      WebVideoCtrl.I_StartRealPlay(this.szDeviceIdentify, {
        iWndIndex: this.g_iWndIndex,
        success: function () {},
        error: function (oError) {}
      });
    },
    // 关闭销毁
    async hideVideo() {
      await WebVideoCtrl.I_StopAllPlay();
      await WebVideoCtrl.I_Logout(this.szDeviceIdentify);
      await WebVideoCtrl.I_DestroyPlugin();
    },
    // 生成uuid
    generateUUID() {
      let d = new Date().getTime();
      let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
        /[xy]/g,
        (c) => {
          let r = (d + Math.random() * 16) % 16 | 0;
          d = Math.floor(d / 16);
          return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
        }
      );
      return uuid;
    }
  },
  watch: {
    sysParams: {
      handler(newVal, oldVal) {
        // 当items数组发生变化时,执行这里的逻辑
        console.log('items 数组发生变化:', newVal, oldVal);
        // this.hideVideo();
        WebVideoCtrl.I_StopAllPlay();
        // this.linkVideo();
        this.sysParams.map((item, index) => {
          setTimeout(() => {
            this.g_iWndIndex = index;
            this.clickStartRealPlay();
          }, index * 400);
        });
      },
      deep: true
    }
  }
};
</script>

<style lang='scss' scoped>
</style>

 当前script里面的方法只是当前开发所需,其他方法可以看下载的文件中HCWebSDK3.3.pdf文档,或者运行demo--cn--demo.html文件,根据自己所需查找对应方法

5.vue代码--父组件

#引入
import monitorVideoVue from '@/components/video/monitorVideo.vue';

#html部分
<monitorVideoVue :sysParams="list"></monitorVideoVue>

#js部分
在data中定义
  // 视频列表
      sysParams: [
        {
          szIP: '192.168.1.A',
          szPort: '80',
          szUsername: 'admin',
          szPassword: 'xxxx'
        },
        {
          szIP: '192.168.1.B',
          szPort: '80',
          szUsername: 'admin',
          szPassword: 'xxxx'
        },
        {
          szIP: '192.168.1.C',
          szPort: '80',
          szUsername: 'admin',
          szPassword: 'xxxx'
        },
        {
          szIP: '192.168.1.D',
          szPort: '80',
          szUsername: 'admin',
          szPassword: 'xxxx'
        },
        {
          szIP: '192.168.1.A',
          szPort: '80',
          szUsername: 'admin',
          szPassword: 'xxxx'
        },
        {
          szIP: '192.168.1.B',
          szPort: '80',
          szUsername: 'admin',
          szPassword: 'xxxx'
        }
      ],

 6.我的代码问题

其实在父组件的sysParams中不需要这样重复声明账号密码,他登录一次后会有已登录状态,这里未作修改,只有通道列表更改一下就可以,只是当前代码还未更改

正确需要格式

        loginIp:  '192.168.90.xxx',//ip地址,后面拼接的是通道列表iChannelIDIndexList
        port: '80',//端口
        username:'admin',//用户名
        password: 'a123xxxxxxxxxxxx',//密码
        iChannelIDIndexList: [1, 4, 6, 7], // 选择的通道列表

这样的一个格式基本上可以实现多窗口的播放了,但项目后续没有用这个方法来实现,就没有继续完善代码

7.缺点

(1)必须安装HCWebSDKPlugin.exe插件,没有安装插件的电脑无法观看

(2)有时候会有一点卡顿

(3)如果不销毁播放器,他会出现在所有页面的上面,销毁的话再重新加载会慢一点文章来源地址https://www.toymoban.com/news/detail-861088.html

到了这里,关于vue2中使用WebSDK_V3.3.0(231027)展示监控视频的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3在浏览器段展示海康监控视频

    目录 一、需求 二、最后成果展示 三、思路和方法 3.1 首先安装插件,可以在上面的地址中下载安装,建立一个dom 3.2 初始化的时候可以获取一个视频展示的一个长宽 3.3 vue data中定义 3.4 初始化视频的方法在vue的methods中 3.5 开始方法 3.6 暂停方法 3.7 销毁监控方法 需要在浏览器

    2024年02月12日
    浏览(38)
  • 视频监控系统/视频汇聚平台EasyCVR平台页面展示优化

    安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快,可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等,以及支持厂家私有协议与SDK接入,包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安防视频监控的能力,也具备接入

    2024年02月07日
    浏览(48)
  • vue2组件库:表格数据展示通用页面

    2024年02月11日
    浏览(32)
  • Vue2 - 延迟加载(requestAnimationFrame实现)+ 效果展示

    当一个页面需要加载较多个组件时,并且组件自身又比较复杂。如果一次性加载,可能等待时间较长,体验不好。 一种解决办法:分批次的来渲染子组件。 通过 requestAnimationFrame(callback) 实现,同时能够控制 按照指定顺序来渲染 。 简单理解为:浏览器会按照一定的频率来重

    2024年01月25日
    浏览(34)
  • 【开发】视频监控系统/视频汇聚平台EasyCVR平台页面展示优化

    安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快,可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等,以及支持厂家私有协议与SDK接入,包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安防视频监控的能力,也具备接入

    2024年02月07日
    浏览(58)
  • vue2+vue-3d-loader 实现3D模型展示

    1.安装 vue-3d-loader npm i vue-3d-loader@1.x.x -S  注意vue2只能用1.几的版本 npm i vue-3d-loader会安装最新版本会导致不显示 2.main.js文件配置,此为全局注册 import vue3dLoader from \\\"vue-3d-loader\\\"; Vue.use(vue3dLoader) 3.具体使用 template   vue3dLoader     backgroundColor=\\\"rgb(216,217,219)\\\"     :height=\\\"600\\\"    

    2024年02月02日
    浏览(47)
  • vue2.0实现富文本编辑及文本内容展示

    1,下载富文本插件 2,可以直接在页面进行引入,也可以全局挂载,(只展示页面引入) 3,页面使用 4,页面展示效果为  5,到这一步如果页面需要把所发送的富文本内容展示到前端,可以直接让后端把传过去的内容原封不动的返回到前端(以下为演示) 演示发送,像后端

    2024年02月13日
    浏览(35)
  • vue2使用rtsp视频流接入海康威视摄像头(纯前端)

    海康威视官方的RTSP最新取流格式如下: rtsp://用户名:密码@IP:554/Streaming/Channels/101 用户名和密码 IP就是登陆摄像头时候的IP(笔者这里IP是192.168.1.210) 所以笔者的rtsp流地址就是 rtsp://用户名:密码@192.168.1.210:554/Streaming/Channels/101 1.1关闭 萤石云的接入 1.2 调整视频编码为H.264 在此下载

    2024年04月26日
    浏览(53)
  • vue2项目 使用海康视频h5player@2.0版本

    一、下载开发包         我们需要去海康官网下载h5player@2.0版本的一些用到的文件 二、引入开发包         下载之后我们把下载的文件打开把bin里的文件移动到pubilc文件里,可以自己单独建一个文件放在里面 注意:一定要放在vue中的public文件夹中 否则会报错 三、引用下载

    2024年02月03日
    浏览(51)
  • vue2 使用 vue-video-player 播放m3u8 流地址视频

    安装插件  : 注意需要引入  videojs-contrib-hls ,否则无法播放hls流文件  main.js 引入 代码内引入: 注意点:    1.type: \\\'application/x-mpegURL\\\' ,否则无法播放流文件  2.aspectRatio: \\\'16:9\\\',  宽高比需要进行设置, 若没有进行设置,会出现黑边过高或者过宽的问题 常用API方法:

    2024年02月07日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包