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

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

目录

一、需求

二、最后成果展示

三、思路和方法

3.1 首先安装插件,可以在上面的地址中下载安装,建立一个dom

3.2 初始化的时候可以获取一个视频展示的一个长宽

3.3 vue data中定义

3.4 初始化视频的方法在vue的methods中

3.5 开始方法

3.6 暂停方法

3.7 销毁监控方法


一、需求

需要在浏览器点击查看海康的监控视频

二、最后成果展示

vue3在浏览器段展示海康监控视频,vue.js-功能,前端,javascript,html

插件下载地址:https://download.csdn.net/download/xm_w_xm/87995593文章来源地址https://www.toymoban.com/news/detail-522079.html

三、思路和方法

3.1 首先安装插件,可以在上面的地址中下载安装,建立一个dom

<div id="playWnd" class="playWnd"></div>

3.2 初始化的时候可以获取一个视频展示的一个长宽

 mounted() {
    this.clientWidth = document.body.clientWidth * (7 / 10);
    this.clientHeight = document.body.clientHeight * (7 / 10);
  },

3.3 vue data中定义

data() {
    return {
      initCount: 0,
      pubKey: "",
      oWebControl: null,
      cameraIndexCode: "",
      title: "",
      clientWidth: 1000,
      clientHeight: 800,
      downloadUrl: `${process.env.VUE_APP_IMG_API}/js/video/VideoWebPlugin.exe`,
    };
  },

3.4 初始化视频的方法在vue的methods中

initPlugin(val) {
      let that = this;
      if (val) {
        that.cameraIndexCode = val.cameraIndex;
        this.title = val.name;
        that.oWebControl = new WebControl({
          szPluginContainer: "playWnd", // 指定容器id
          iServicePortStart: 15900, // 指定起止端口号,建议使用该值
          iServicePortEnd: 15900,
          szClassId: "用于IE10使用ActiveX的clsid", // 用于IE10使用ActiveX的clsid
          cbConnectSuccess: function () {
            // 创建WebControl实例成功
            that.oWebControl
              .JS_StartService("window", {
                // WebControl实例创建成功后需要启动服务
                dllPath: "./VideoPluginConnect.dll", // 值"./VideoPluginConnect.dll"写死
              })
              .then(
                function () {
                  // 启动插件服务成功
                  that.oWebControl
                    .JS_CreateWnd(
                      "playWnd",
                      that.clientWidth,
                      that.clientHeight
                    )
                    .then(function () {
                      //JS_CreateWnd创建视频播放窗口,宽高可设定
                      that.init(); // 创建播放实例成功后初始化
                      setTimeout(() => {
                        that.startPreview();
                      }, 2500);
                    });
                },
                function () {
                  // 启动插件服务失败
                }
              );
          },
          cbConnectError: function () {
            // 创建WebControl实例失败
            that.oWebControl = null;
            $("#playWnd").html(
              "插件未启动,正在尝试启动,请到这个地址下载并安装:" +
                that.downloadUrl
            );
            WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数,采用wakeup来启动程序
            that.initCount++;
            if (that.initCount < 3) {
              setTimeout(function () {
                // that.initPlugin();
              }, 3000);
            } else {
              $("#playWnd").html("插件启动失败,请检查插件是否安装!");
            }
          },
          cbConnectClose: function (bNormalClose) {
            // 异常断开:bNormalClose = false
            // JS_Disconnect正常断开:bNormalClose = true
            console.log("cbConnectClose");
            that.oWebControl = null;
            $("#playWnd").html(
              "插件未启动,正在尝试启动,请到这个地址下载并安装:" +
                that.downloadUrl
            );
            WebControl.JS_WakeUp("VideoWebPlugin://");
            that.initCount++;
            if (that.initCount < 3) {
              setTimeout(function () {
                // that.initPlugin();
              }, 3000);
            } else {
              $("#playWnd").html("插件启动失败,请检查插件是否安装!");
            }
          },
        });
      }
    },
    getPubKey(callback) {
      let that = this;
      that.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) {
      var encrypt = new JSEncrypt();
      encrypt.setPublicKey(this.pubKey);
      return encrypt.encrypt(value);
    },
    init() {
      let that = this;
      that.getPubKey(function () {
        var appkey = "综合安防管理平台提供的appkey"; //综合安防管理平台提供的appkey,必填
        var secret = that.setEncrypt("综合安防管理平台提供的secret,必填"); //综合安防管理平台提供的secret,必填
        var ip = "综合安防管理平台IP地址,必填"; //综合安防管理平台IP地址,必填
        var playMode = 0; //初始播放模式:0-预览,1-回放
        var port = 443; //综合安防管理平台端口,若启用HTTPS协议,默认443
        var snapDir = "D:\\SnapDir"; //抓图存储路径
        var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
        var layout = "1x1"; //playMode指定模式的布局
        var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互,这里总是填1
        var encryptedFields = "secret"; //加密字段,默认加密领域为secret
        var showToolbar = 1; //是否显示工具栏,0-不显示,非0-显示
        var showSmart = 1; //是否显示智能信息(如配置移动侦测后画面上的线框),0-不显示,非0-显示
        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, //API网关提供的appkey
              secret: secret, //API网关提供的secret
              ip: ip, //API网关IP地址
              playMode: playMode, //播放模式(决定显示预览还是回放界面)
              port: port, //端口
              snapDir: snapDir, //抓图存储路径
              videoDir: videoDir, //紧急录像或录像剪辑存储路径
              layout: layout, //布局
              enableHTTPS: enableHTTPS, //是否启用HTTPS协议
              encryptedFields: encryptedFields, //加密字段
              showToolbar: showToolbar, //是否显示工具栏
              showSmart: showSmart, //是否显示智能信息
              buttonIDs: buttonIDs, //自定义工具条按钮
            }),
          })
          .then(function (oData) {
            that.oWebControl.JS_Resize(that.clientWidth, that.clientHeight); // 初始化后resize一次,规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
          });
      });
    },

3.5 开始方法

// 点击开始
    startPreview() {
      var streamMode = 0; //主子码流标识:0-主码流,1-子码流
      var transMode = 1; //传输协议:0-UDP,1-TCP
      var gpuMode = 0; //是否启用GPU硬解,0-不启用,1-启用
      var wndId = -1; //播放窗口序号(在2x2以上布局下可指定播放窗口)
      this.oWebControl.JS_RequestInterface({
        funcName: "startPreview",
        argument: JSON.stringify({
          cameraIndexCode: this.cameraIndexCode, //监控点编号
          streamMode: streamMode, //主子码流标识
          transMode: transMode, //传输协议
          gpuMode: gpuMode, //是否开启GPU硬解
          wndId: wndId, //可指定播放窗口
        }),
      });
    },

3.6 暂停方法

// 停止
    stopAllPreview() {
      this.oWebControl.JS_RequestInterface({
        funcName: "stopAllPreview",
      });
    },

3.7 销毁监控方法

closeAllPreview() {
      if (this.oWebControl) {
        this.stopAllPreview();
        this.oWebControl.JS_HideWnd();
        this.oWebControl
          .JS_DestroyWnd({
            funcName: "destroyeWnd",
          })
          .then(function () {});
      }
      this.oWebControl = null;
    },
    closeVideo() {
      this.closeAllPreview();
    },

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

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

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

相关文章

  • webSRc实现浏览器播放rtsp【海康】

    下面准备webrtc-streamer 下载https://github.com/mpromonet/webrtc-streamer/releases 下载后解压 然后启动exe文件 如下图则启动成功,此时在浏览器访问127.0.0.1:8000可以看到本机监控画面 将下载包html文件夹下webrtcstreamer.js文件和html/libs文件夹下adapter.min.js文件复制到VUE项目public目录下。在inde

    2024年04月17日
    浏览(32)
  • vue3+jsQr实现手机浏览器调用本地摄像头扫描并识别二维码

    最近做的项目有个需求是在手机端打开页面,登录之后能在手机上扫描二维码并根据扫描的结果去查询班级情况。别的功能就不说了,移动端扫描二维码这个以前没做过,所以在这里记录一下。 项目用到的技术栈: Vue 3 + TypeScript + Vite + jsQr,UI组件库是 arco Design,可以根据自

    2024年02月09日
    浏览(59)
  • 海康威视网络摄像头通过浏览器网页的配置流程

    一、登录 输入网络摄像机IP地址,显示登录窗口,输入用户名和密码后,点击登录。如果是新设备,需要先激活设备,设置登录密码。(Edge浏览器如何访问海康设备?) 二、界面介绍 登入界面后,会显示预览,回放,图片,配置。登陆后界面右上角会显示用户名和注销标签

    2024年02月08日
    浏览(56)
  • 在uniapp Vue3版本中如何解决web/H5网页浏览器跨域的问题

    uniapp项目在浏览器运行,有可能调用某些接口会出现跨域问题,报错如下图所示: 存在跨域问题的原因是因为浏览器的同源策略,也就是说前端无法直接发起跨域请求。同源策略是一个基础的安全策略,但是这也会给uniapp/Vue开发者在部署时带来一定的麻烦。一般来说,浏览

    2024年01月21日
    浏览(54)
  • vue中使用video插件在微信浏览器中视频无法自动播放的问题

    测试机:安卓华为p30,ios暂未测试,不过看网上说的ios比较好设置,以下代码也设置了兼容 js 是的,你没看错,就是这么简单,并没有网上那么复杂的获取什么什么的,因为我都试过坑了,到最后发现直接在created中就能解决问题

    2024年02月11日
    浏览(67)
  • vue3.0 安卓和ios h5 移动端音频自定义圆环可拖拽播放(兼容微信浏览器)

    安装  npm install weixin-js-sdk 引入 template     div class=\\\"circle_box\\\"         div id=\\\"content\\\"/div          img class=\\\"img_0\\\" src=\\\"https://img.yzcdn.cn/vant/cat.jpeg\\\" alt=\\\"\\\"          img @click=\\\"changeType\\\" class=\\\"img_1\\\" v-show=\\\"playbool\\\" src=\\\"@/assets/decompression/pressure_audio_play.png\\\" alt=\\\"\\\"          img @click=\\\"changeType\\\"

    2023年04月23日
    浏览(98)
  • 海康威视web3.0在ie浏览器上一直提示安装插件的问题解决

    打开ie浏览器,点击右上角的齿轮。 64位的会显示64-bit信息 32位的就不会显示这个信息。  答案就是,前面解压出来有两个版本一个是32位,一个是64位,我们首先要确定的就是自己电脑ie浏览器的位数,用错了就会报这个问题,所以一定得先确认自己的ie位数,不然就要像我一

    2024年02月08日
    浏览(46)
  • Edge浏览器无法展示Stable Diffusion Control Net插件

    最近在学习Stable Diffusion,需要使用到Control Net插件,结果通过各种方式安装成功插件后,浏览器页面没有展示ControlNet相关页面,最终换到Chorme浏览器后正常,猜测Edge部分功能无法支持,导致底部部分功能无法加载成功展示的是空白页 Edge页面: Chorme页面:

    2024年02月15日
    浏览(40)
  • Vue 海康监控多屏幕展示 WebVideoCtrl 3.3.0

    将WebVideoCtrl.js  和jquery 引入index.html 中 封装一个WebVideo.js   页面中使用   单个屏幕多个ip

    2024年04月24日
    浏览(28)
  • 【iosH5开发】IOS浏览器对于Vue3 Element-plus el-input中,input.value.focus无法聚焦问题

    此次项目遇到了两个问题,一个是在Vue3中el-input的input.value.focus()无法触发,但是在PC或者安卓均可触发。 第二个问题是ios浏览器H5没有办法默认聚焦触发键盘输入

    2024年02月13日
    浏览(57)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包