react开发海康视频web监控

前端小袁
5,538 阅读3分钟

前言

最近react项目中需要呈现某现场的实时视频，现场用到的是海康摄像头，是那种带CS端管理程序的，通过ip，port，用户名，密码登录摄像头，

熟悉demo程序

海康有提供一个web控件开发包，下面是链接,一定要下载对应浏览器的位数的开发包，否则会报错

开发包64位下载地址
链接：https://pan.baidu.com/s/19uCuu838TwP-OBqWqo-MPw
提取码：futg

开发包32位下载地址
链接：https://pan.baidu.com/s/1byAij-cStvoYhS9SlV5dDw
提取码：f24r

兼容性

这个控件是利用ActiveX控件和NPAPI实现的。IE上用ActiveX控件，Chrome基于NPAPI实现，并且需要安装codebase目录下的WebComponentsKit.exe插件。这里我们可以了解到，该控件不适用于高版本Chrome浏览器,下面是详细简介

我目前是在ie上测试

定制开发

demo 上有很多功能，大家可以根据自己实际情况进行取舍，我目前用到的功能有，登陆，预览，停止预览，关闭声音等功能，

代码分享

我将我需要用到的代码封装成了一个webVideo.js

首先在页面中编写容器

 <div id="divPlugin" style={{width:'600px',height:'350px'}} ></div>

引入webVideo

import {WebVideo} from '../../js/webVideo'

在页面进行初始化

componentDidMount() {
    this.webVideo = new WebVideo()
    this.webVideo.init()
    this.webVideo.clickLogin()
  }

最后效果图

完整代码贴出来

// 初始化插件
import x2js from 'x2js' //xml数据处理插件
import {WebVideoCtrl} from '@/assets/js/webVideoCtrl'
export function WebVideo() {
  this.g_iWndIndex = 0
  this.szDeviceIdentify = ''
  this.deviceport = ''
  this.channels = []
  this.ip = ['10.250.196.115','10.250.196.116']  
  this.port = '80'
  this.username = 'admin'
  this.password = '123456'
  this.$x2js = new x2js()
  this.init = function() {
      var self = this
      // 检查插件是否已经安装过
      var iRet = WebVideoCtrl.I_CheckPluginInstall();
      if (-1 === iRet) {
          alert("您还未安装过插件，双击开发包目录里的WebComponentsKit.exe安装！");
          return;
      }
      // 初始化插件参数及插入插件
     WebVideoCtrl.I_InitPlugin('100%', '100%', {
          bWndFull: true,
          iPackageType: 2,
          iWndowType: 2,
          myCbSelWnd: function (xmlStr) { //自己新增的方法
            var jsonObj = self.$x2js.xml2js(xmlStr);
            self.mySelectWnd = jsonObj.RealPlayInfo.SelectWnd;
            var szInfo = "当前选择的窗口编号：" + self.mySelectWnd;
            console.log(szInfo);
          },
          cbInitPluginComplete: function () {
              WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
              // WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin1")
          }
      });
  }
  // 登录
  this.clickLogin = function () {
      var self = this
      if ("" == self.ip || "" == self.port) {
          return;
      }
      for (let i = 0;i<self.ip.length;i++) {
        let szDeviceIdentify = self.ip[i] + "_" + self.port;
        WebVideoCtrl.I_Login(self.ip[i], 1, self.port, self.username, self.password, {
          success: function (xmlDoc) {      
              setTimeout(function () {
                  self.getChannelInfo(szDeviceIdentify);
                  self.getDevicePort(szDeviceIdentify);
                 
              }, 10);
              setTimeout(function() {
                  self.clickStartRealPlay(szDeviceIdentify,i)
                  self.clickCloseSound()
              }, 500)
          },
          error: function (status, xmlDoc) {
            
          }
        });
      }
      
  }
  // 全屏
  this.clickFullScreen = function () {
      WebVideoCtrl.I_FullScreen(true);
  }
  // 退出
  this.clickLogout = function(szDeviceIdentify) {
      var self = this
      if (null == szDeviceIdentify) {
          return;
      }
      var iRet = WebVideoCtrl.I_Logout(szDeviceIdentify);
      if (0 == iRet) {
          self.getChannelInfo();
          self.getDevicePort();
      }
  }
  // 获取通道
  this.getChannelInfo = function(szDeviceIdentify) {
      var self = this
      if (null == szDeviceIdentify) {
          return;
      }
      // 模拟通道
      WebVideoCtrl.I_GetAnalogChannelInfo(szDeviceIdentify, {
          async: false,
          mysuccess:function (xmlStr) {
            var jsonObj = self.$x2js.xml2js(xmlStr);
            console.log("模拟通道mysuccess",xmlStr);
            var id = jsonObj.VideoInputChannelList.VideoInputChannel && jsonObj.VideoInputChannelList.VideoInputChannel.id;
            self.channels.push(id);
            console.log('channels2',self.channels)
          },
          success: function (xmlStr) {
            console.log("模拟通道success",xmlStr);
          },
          error: function (status, xmlDoc) {
            console.log(" 获取模拟通道失败！", status, xmlDoc)
          }
      });
  }
  // 获取端口
  this.getDevicePort = function(szDeviceIdentify) {
      var self = this
      if (null == szDeviceIdentify) {
          return;
      }
      var oPort = WebVideoCtrl.I_GetDevicePort(szDeviceIdentify);
      if (oPort != null) {
          self.deviceport = oPort.iDevicePort;
          self.deviceport = oPort.iRtspPort;
      }
  }
  
  // 开始预览
  this.clickStartRealPlay = function(szDeviceIdentify,i) {
      var self = this
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex)
      if (null == szDeviceIdentify) {
          return;
      }
      WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
        iRtspPort: self.deviceport,
        iStreamType: 1,
        iWndIndex: i,
        iChannelID:  self.channels[i],
        bZeroChannel: false,
        success: function () {
          console.log("开始预览成功");
        },
        error: function (status, xmlDoc) {
            if (403 === status) {
              alert("浏览器不支持Websocket取流！请更换ie浏览器");
            } else {
              console.log("开始预览失败 ", status, xmlDoc);
            }
        }
      });
  }
  // 停止预览
  this.clickStopRealPlay = function() {
      var self = this
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex)
      if (oWndInfo != null) {
          WebVideoCtrl.I_Stop({
              success: function () {
              },
              error: function () {
              }
          });
      }
  }
  // 关闭声音
  this.clickCloseSound = function() {
    var self = this
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex)
    var iRet = WebVideoCtrl.I_CloseSound(self.g_iWndIndex);
    console.log('oWndInfo',oWndInfo)
    console.log('iRet',iRet)
      if (0 == iRet) {
        console.log("关闭声音成功！")
      } else {
        console.log("关闭声音失败！")
      }
}
}

小结

1：需要一开始引入Web控件开发包中的webVideoCtrl.js

<script type="text/javascript" id="videonode" src="static/webVideoCtrl.js"></script>

2: 还有一个jsPlugin-1.0.0.min.js也需要放在static目录下，但是不需要在index.html引用，因为webVideoCtrl.js会主动去调用同目录下的jsPlugin-1.0.0.min.js。

3：因为项目配置了eslint 语法校验，但是官方给的webVideoCtrl.js校验不通过，所以可以对单个文件进行检验，只需要在文件头部加入 /* eslint-disable */

avatar
文章
阅读
粉丝