Vue 海康监控多屏幕展示 WebVideoCtrl 3.3.0

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

将WebVideoCtrl.js  和jquery 引入index.html 中
webvideoctrl,vue.js,前端,javascript

封装一个WebVideo.js
 

import $ from "jquery";

const WebVideo = {
  g_iWndIndex: 0, //可以不用设置这个变量,有窗口参数的接口中,不用传值,开发包会默认使用当前选择窗口
  g_oLocalConfig: null, //本地配置
  ERROR_CODE_UNKNOWN: 1000, //未知错误
  ERROR_CODE_NETWORKERROR: 1001, //网络错误
  ERROR_CODE_PARAMERROR: 1002,
  //登录模块
  ERROR_CODE_LOGIN_NOLOGIN: 2000, // 未登录
  ERROR_CODE_LOGIN_REPEATLOGIN: 2001, //设备已登录,重复登录
  ERROR_CODE_LOGIN_NOSUPPORT: 2002, //当前设备不支持Digest登录
  //预览播放
  ERROR_CODE_PLAY_PLUGININITFAIL: 3000, //插件初始化失败
  ERROR_CODE_PLAY_NOREPEATPLAY: 3001, //当前窗口已经在预览
  ERROR_CODE_PLAY_PLAYBACKABNORMAL: 3002, //回放异常
  ERROR_CODE_PLAY_PLAYBACKSTOP: 3003, //回放停止
  ERROR_CODE_PLAY_NOFREESPACE: 3004, //录像过程中,硬盘容量不足
  // 对讲
  ERROR_CODE_TALK_FAIL: 5000, //语音对讲失败
  version: 'V3.3.0build20230322',

  init: function (options) {
    let that = this;
    return new Promise((resolve, reject) => {
      WebVideoCtrl.I_InitPlugin({
        bWndFull: true, //是否支持单窗口双击全屏,默认支持 true:支持 false:不支持
        iWndowType: options.iWndowType,
        cbInitPluginComplete: function () {
          console.log(options.domId);
            WebVideoCtrl.I_InsertOBJECTPlugin(options.domId).then(() => {
              // 检查插件是否最新
              WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
                if (bFlag) {
                  console.log("检测到新的插件版本,双击开发包目录里的HCWebSDKPlugin.exe升级!");
                }
              });

            }, () => {
              console.log("插件初始化失败,请确认是否已安装插件;如果未安装,请双击开发包目录里的HCWebSDKPlugin.exe安装!");
            });
          resolve();
          console.log('初始化成功')
        }
      })
    })
  },
  // 停止预览
  I_StopAllPlay(){
    WebVideoCtrl.I_StopAllPlay();
  },
  clickLogout(ip) {

    return new Promise((resolve,reject) => {
      var szDeviceIdentify = ip;

      if (null == szDeviceIdentify) {
        return;
      }

      WebVideoCtrl.I_Logout(szDeviceIdentify).then(() => {
        console.log(szDeviceIdentify + " " + "退出成功!");
        resolve();
      }, () => {
        console.log(szDeviceIdentify + " " + "退出失败!");
      });
    })

  },
  I_DestroyPlugin:function(){
    WebVideoCtrl.I_DestroyPlugin()
  },
  clickLogin: function (options) {
    return new Promise((resolve, reject) => {
      var szIP =  options.ip,
        szPort = options.port,
        szUsername = options.username,
        szPassword = options.password;

      if ("" == szIP || "" == szPort) {
        return;
      }
      var szDeviceIdentify = szIP + "_" + szPort;
      WebVideoCtrl.I_Login(szIP, 1, szPort, szUsername, szPassword, {
        timeout: 3000,
        success: function (xmlDoc) {
          console.log(szDeviceIdentify + " 登录成功!")
          resolve();
          WebVideo.ip = szDeviceIdentify;
        },
        error: function (oError) {
          if (WebVideo.ERROR_CODE_LOGIN_REPEATLOGIN === oError.errorCode) {
            console.log(szDeviceIdentify + " 已登录过!")
          } else {
            console.log(szDeviceIdentify + " 登录失败!")
            // showOPInfo(szDeviceIdentify + " 登录失败!", oError.errorCode, oError.errorMsg);
          }
        }
      });
    })

  },
  clickStopRealPlay() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(0),
      szInfo = "";
    console.log(oWndInfo,'这是什么')
    return
    if (oWndInfo != null) {
      WebVideoCtrl.I_Stop({
        success: function() {
          szInfo = "停止预览成功!";
          console.log(oWndInfo.szDeviceIdentify + " " + szInfo);
        },
        error: function(oError) {
          console.log(szDeviceIdentify + " 停止预览失败!", oError.errorCode, oError.errorMsg);
        }
      });
    }
  },
  clickStartRealPlay: function (iStreamType,iChannelID,iWndIndex) {
    return new Promise((resolve, reject) => {
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(WebVideo.g_iWndIndex),
        szDeviceIdentify = WebVideo.ip,
        iRtspPort = parseInt($("#rtspport").val(), 10),
        iChannelID = parseInt($("#channels").val(), 10),
        szInfo = "";

      if ("undefined" === typeof iStreamType) {
        iStreamType = 1;
      }

      if (null == szDeviceIdentify) {
        return;
      }
      var startRealPlay = function () {
        WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
          iStreamType:iStreamType,
          iChannelID: WebVideo.iChannelID ? WebVideo.iChannelID : 1,
          iWndIndex:iWndIndex ? iWndIndex : '',
          success: function () {
            szInfo = "开始预览成功!";
            console.log(szDeviceIdentify + " " + szInfo);
            resolve()
          },
          error: function (oError) {
            console.log(szDeviceIdentify + " 开始预览失败!", oError.errorCode, oError.errorMsg);
          }
        });
      };

      if (oWndInfo != null) { // 已经在播放了,先停止
        WebVideoCtrl.I_Stop({
          success: function () {
            startRealPlay();
          }
        });
      } else {
        startRealPlay();
      }
    })
  }
}

export default WebVideo

页面中使用
 

<template>
	<div>
    <div :id="'divPlugin' + index" v-for="(item,index) in list" :key="index" class="plugin" style="width: 600px;height: 400px;float: left"></div>
	</div>
</template>
<script>
import WebVideo from "../assets/WebVideo";

export default {
		data() {
			return {
        list:[
          {
            ip:'',
            port:8888,
            username:'',
            password:''
          },
          {
            ip:'',
            port:8999,
            username:'',
            password:''
          }
        ]
			}
		},
		created() {
      this.initLogin();
		},
		methods: {
      VideoPlayers(domId,options){
        return new Promise((resolve,reject) => {
          WebVideo.init({
            domId:domId
          }).then(() => {
            setTimeout(() => {
              WebVideo.clickLogin(options).then(res => {
                WebVideo.clickStartRealPlay();
                resolve();
              })
            },1000)
          })
        })
      },
      async initLogin(){
        for(var i = 0; i < this.list.length; i++){
          await this.VideoPlayers('divPlugin' + i,this.list[i])
        }
      },
		}
	}
</script>
<style>
</style>

单个屏幕多个ip文章来源地址https://www.toymoban.com/news/detail-856990.html

<template>
  <div>
<!--        <div    :id="'divPlugin' + index" v-for="(item,index) in list" :key="index" class="plugin" style="width: 600px;height: 400px;float: left"></div>-->
    <div id="divPlugin" class="plugin" style="width: 600px;height: 400px;"></div>
    <button @click="refreshCom">停止预览</button>
    <button @click="initLogin">登录</button>
    <div @click-="unLogin()">退出11</div>
    <div style="height: 1000px"></div>
  </div>
</template>
<script>
import WebVideo from "../assets/WebVideo";

export default {
  data() {
    return {
      list: []
    }
  },
  created() {
    // this.initPlugin();
    this.initLogin();
    },
  methods: {
    refreshCom() {
     this.unLogin()
      WebVideo.I_DestroyPlugin();
    },
    async unLogin() {
      for (var i = 0; i < this.list.length; i++) {
        await WebVideo.clickLogout(this.list[i].ip + '_' + this.list[i].port).then(res => {
          console.log('退出成功')
        });
      }
    },
    VideoPlayers(domId,options){
      return new Promise((resolve,reject) => {
        WebVideo.init({
          domId:domId
        }).then(() => {
          setTimeout(() => {
            WebVideo.clickLogin(options).then(res => {
              WebVideo.clickStartRealPlay();
              resolve();
            })
          },1000)
        })
      })
    },

    clickStopRealPlay() {
      WebVideo.clickStopRealPlay();
    },

    async initPlugin() {
      for(var i = 0; i < this.list.length;i++){
       await this.VideoPlayers('divPlugin' + i,this.list[i])
      }
    },

    initLogin() {
      let that = this;
      WebVideo.init({
        domId: 'divPlugin',
        iWndowType:2
      }).then(() => {
        setTimeout(() => {
          for (var i = 0; i < that.list.length; i++) {
            let index = i;
            WebVideo.clickLogin(that.list[i]).then(() => {
              WebVideo.clickStartRealPlay(1, 1, index)
            })
          }
        }, 1000)
      })



      // for(var i = 0; i < this.list.length; i++){
      //   await this.VideoPlayers('divPlugin' + i, this.list[i])
      // }
      // setTimeout(() => {
      //   this.unLogin();
      // },1000)
    },
  }
}
</script>
<style>
.clear {
  clear: both;
}
</style>

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

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

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

相关文章

  • vue2实现海康威视根据海康插件进行监控实时预览和回放功能,全套代码,开箱即用。

     这是一套拿到手就能直接用的根据海康提供的摄像机节点实时预览和回放的全步骤代码,开箱即用。  我的是基于vue2写的,vue3可以看我下一篇文章。 很多人在开发vue项目的时候,不知道怎么去开发视频实时预览和回放功能,然后一直查文档,再去看别人写的项目,就是无

    2023年04月15日
    浏览(80)
  • Vue 集成海康h5player,实现ws协议的实时监控播放

    首先,前往官网下载h5player.js的demo包: 海康开放平台 海康威视合作生态致力打造一个能力开放体系、两个生态圈,Hikvision AI Cloud开放平台是能力开放体系的核心内容。它是海康威视基于多年在视频及物联网核心技术积累之上,融合AI、大数据、云计算等技术,为合作伙伴提供

    2024年02月13日
    浏览(50)
  • vue对接海康摄像头,配合ifarme进行展示。给ifarme点击事件(消除ifarme事件,因为ifarme没有点击事件)

    1、在public文件夹下建一个文件ifarme.index,和index.html同级。 2、写组件,我是建在了components文件夹下边。 3、组件引入。 用的参数。 这样的话不知道是不是我的问题,这样的话会导致摄像头不能移动,所以我们这边的话是后端给提供接口,然后前端调用然后控制云台。 原文链

    2024年02月08日
    浏览(39)
  • 海康WEB3.3控件开发包 V3.3 前端vue项目调用实时监控画面

    公司业务迭代, 需要前端vue项目里增加一个查看实时监控模块, 这个需求是之前离职的前端小哥没有研究明白的, 现在落在了我的肩上, 压力还是有的. 但是压力归压力, 问题还是要解决的. 第一步: 调研大佬们已经实现的方案, 找设备对接. 公司后端大佬提出用官方SDK稍加修改即

    2024年02月08日
    浏览(42)
  • vue中web端播放rtsp视频流(摄像头监控视频)(海康威视录像机)

    ffmpeg下载 https://ffmpeg.org/download.html 找ffmpeg-release-essentials.zip点击下载,下载完解压 ffmpeg.exe 程序运行 添加成功后验证是否生效任意地方打开cmd窗口输入 ffmpeg 打印如下表示成功 新建一个app.js文件,同级目录下npm安装 node-rtsp-stream 我是直接写在项目里了,你们可以单独写在外

    2024年04月25日
    浏览(55)
  • vue2中使用WebSDK_V3.3.0(231027)展示监控视频

    1.需要数据 2.下载内容 WEB3.3控件开发包 V3.3 下载地址:海康开放平台  3.安装插件,引入js文件 (1)双击HCWebSDKPlugin.exe,安装插件 (2)引入文件 把这两个文件放在public下static目录下,在public的index.html中引入 4.vue代码--视频组件  当前script里面的方法只是当前开发所需,其他

    2024年04月28日
    浏览(39)
  • vue+js+海康web开发包接入海康威视摄像头

    一、登录海康开放平台下载web开发包,下载需要先登录海康账号,没有的需先注册一个。 海康开放平台web开发包下载地址:https://open.hikvision.com/download/5cda567cf47ae80dd41a54b3?type=10id=4c945d18fa5f49638ce517ec32e24e24 二、将web开发包引入vue项目 下载后解压的包目录如下: 将把webs下的整个

    2024年02月02日
    浏览(60)
  • vue+海康威视视频web插件开发

    下载地址:海康威视官网 下载页面 文件解压后的目录 运行bin文件下的VideoWebPlugin.exe demo/demo_window_integration.html 包含了插件所有功能的,可参照此demo来开发、验证功能、排查问题 demo/demo_window_simple_playback.html.html  视频回放,可在此基础上二次开发 demo/demo_window_simple_preview.ht

    2023年04月08日
    浏览(86)
  • Vue集成海康websdk实现摄像头预览

    选择以及下载相应的websdk: 从海康开放平台下载相应的sdk,web3.0不支持高版本浏览器,web3.2需要摄像头支持摄像头取流,web3.3支持高版本浏览器 我这选择的是3.3的。 可以先测试下开发包是否可以成功访问,修改用ip、户名、密码。端口一般使用默认80,点击登录,然后选择相

    2024年02月03日
    浏览(55)
  • vue实现海康h5player问题汇总

    最开始写的时候,把h5player封装成了一个组件,把资源文件随便放在了一个目录下, 直接在子组件中引入,报错 window.JSPlugin is not a constructor 或者 JSPlugin is not defined 初步分析应该是引入资源文件失败,查了很久才发现,资源文件应该放在public目录下,并在public下的index.html中引

    2024年04月11日
    浏览(51)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包