electron使用WEB无插件3.2版本对接海康威视摄像头

vue代码

<template>
  <view>
    <view id="divPlugin" class="plugin" ref="plugin"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      g_iWndIndex: 0,
      szDeviceIdentify: '',
      deviceport: '',
      channels: [],
      ip: '192.168.1.64',
      port: 80,
      username: 'admin',
      password: '12345',
      iRtspPort: ''
    }
  },
  mounted() {
    this.$nextTick(()=>{
      this.init()
    })
  },
  methods: {
    // 打开相机
    open(params){
      // 登录
      this.ip = params.camera_ip
      this.port = params.camera_port
      this.username = params.camera_user
      this.password = params.camera_pass
      this.clickLogin()
    },
    // 关闭相机
    close(){
      this.clickStopRealPlay()
    },
    // 初始化
    init() {
      let _this = this
      // 初始化插件参数及插入插件
      const dom = document.getElementById('divPlugin')
      WebVideoCtrl.I_InitPlugin(dom.scrollWidth, dom.scrollHeight, {
        // 插件的背景颜色，插件子窗口的背景颜色，窗口边框的颜色，窗口边框选中后的颜色
        szColorProperty: "plugin-background:0B0F1A; sub-background:0B0F1A; sub-border:0B0F1A; sub-border-select:0B0F1A",
        bDebugMode: false,// JS 调试模式，控制台打印调试信息，true(开启)，false(关闭)
        bWndFull: true, // 但窗口双击全屏
        iPackageType: 2, // 封装格式 无插件只能是2
        iWndowType: 1, // 分屏类型 1*1 2*2 ....
        bNoPlugin: true, // 开启无插件模式
        cbInitPluginComplete: function () {
          console.log("初始化成功！");
          // 嵌入播放插件, 成功返回 0，失败返回-1
          const res = WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
          if(res != 0){
            uni.showToast({title:'相机初始化失败，嵌入播放插件失败，请重试',icon:'none'});
          }
        }
      });
    },
    // 登录
    clickLogin() {
      if (!this.ip || !this.port) {
        uni.showToast({title:'相机IP或端口错误',icon:'none'});
        return
      }
      this.szDeviceIdentify = this.ip+"_"+this.port
      let _this = this
      WebVideoCtrl.I_Login(this.ip, 1, this.port, this.username, this.password,
        {
          success: function(xmlDoc) {
            _this.getChannelInfo() // 获取模拟通道
          },
          error: function(statusCode, xmlDoc){
            // console.log(statusCode, xmlDoc)
            uni.showToast({title:'相机登录失败!',icon:'none'});
          }
        })
    },
    // 获取模拟媒体通道
    getChannelInfo() {
      let self = this
      if (!this.szDeviceIdentify) {
        return
      }
      console.log('开始获取模拟通道--------')
      WebVideoCtrl.I_GetAnalogChannelInfo(self.szDeviceIdentify, {
        async: false, // http 交互方式，true 表示异步，false 表示同步
        success: function (xmlDoc) {
          let oChannels = $(xmlDoc).find("VideoInputChannel");
          // console.log('获取模拟通道成功', oChannels)
          $.each(oChannels, function (i) {
            let id = $(this).find("id").eq(0).text(),
              name = $(this).find("name").eq(0).text();
            if (!name) {
              name = "Camera " + (i < 9 ? "0" + (i + 1) : (i + 1));
            }
            self.channels.push({
              id: id,
              name: name
            })
          });

          self.getDevicePort() // 获取端口 （影响不大）
        },
        error: function (status, xmlDoc) {
          uni.showToast({title:'获取模拟通道失败!',icon:'none'});
        }
      });
    },
    // 获取端口 不会对预览效果造成影响
    getDevicePort() {
      if (!this.szDeviceIdentify) {
        return
      }
      let _this = this
      let oPort = WebVideoCtrl.I_GetDevicePort(this.szDeviceIdentify);
      console.log('获取通道端口号', oPort)
      if (oPort != null) {
        _this.deviceport = oPort.iDevicePort;
        _this.iRtspPort= oPort.iRtspPort;

        // 开始预览
        _this.clickStartRealPlay()
      }
    },
    // 开始预览
    clickStartRealPlay() {
      let self = this
      let oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex),
        iChannelID = self.channels[0].id
      if (!this.szDeviceIdentify) {
        return;
      }
      try{
        let startRealPlay = function () {
          // console.log('开始预览',oWndInfo, iChannelID,self)
          // console.log('RTSP 端口号',parseInt(self.deviceport, 10))
          WebVideoCtrl.I_StartRealPlay(self.szDeviceIdentify, {
            // iRtspPort: parseInt(self.deviceport, 10), // RTSP端口必须是int
            iPort: parseInt(self.iRtspPort, 10), // RTSP 端口号，可以选择传入，如果不传，开发包会自动判断设备的 RTSP 端口
            iStreamType: 2, // 码流类型：1-主码流 必须int,2-子码流
            iChannelID: parseInt(iChannelID, 10), // 播放通道 必须int
            bZeroChannel: false, // 是否播放零通道 默认false
            success: function () {
              console.log("预览成功")
            },
            error: function (status, xmlDoc) {
              console.log("预览失败", status, xmlDoc)
              uni.showToast({title:'预览失败!',icon:'none'});
            }
          });
        };
        if (oWndInfo != null) {// 已经在播放了，先停止
          WebVideoCtrl.I_Stop({
            success: function () {
              startRealPlay();
            }
          });
        } else {
          startRealPlay();
        }
      }catch (e){
        console.log("预览报错", e)
      }
    },
    // 停止预览
    clickStopRealPlay(){
      let _this = this
      let oWndInfo = WebVideoCtrl.I_GetWindowStatus(_this.g_iWndIndex)
      if (oWndInfo != null) {
        WebVideoCtrl.I_Stop({
          success: function () {
            uni.showToast({title:'停止预览成功!',icon:'none'});
            _this.clickLogout()
          },
          error: function () {
            uni.showToast({title:'停止预览失败!',icon:'none'});
          }
        });
      }
    },
    // 退出
    clickLogout(){
      let iRet = WebVideoCtrl.I_Logout(this.szDeviceIdentify);
      if (0 == iRet) {
        // uni.showToast({title:'退出成功!',icon:'none'});
        this.getChannelInfo();
        this.getDevicePort();
      } else {
      }
    }
  }
}
</script>

<style scoped>
.plugin {
  /*width: 500px;*/
  /*height: 300px;*/
  width: 100%;
  height: 272px;
}
</style>

开发环境下，vite.config.js配置代理转发到nginx

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
// https://vitejs.dev/config/
export default defineConfig({
	base:'./',
  plugins: [
    uni(),
  ],
    server: {
        proxy: {
            "/ISAPI": {
                target: "http://127.0.0.1:80",
                changeOrigin: true,
                // rewrite: (path) => path.replace(/^\/api/, ""),
            },
            "/SDK": {
                target: "http://127.0.0.1:80",
                changeOrigin: true,
                // rewrite: (path) => path.replace(/^\/api/, ""),
            },
            "/webSocketVideoCtrlProxy": {
                //webSocket代理
                target: 'ws://127.0.0.1:80', // 内网
                ws:true,//开启ws, 如果是http代理此处可以不用设置
                changeOrigin: true,
            }
        },
    }
})

引入海康web无插件版本的js文件

index.html文件引入

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script>
      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
        CSS.supports('top: constant(a)'))
      document.write(
        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
    </script>
    <title></title>
    <!--preload-links-->
    <!--app-context-->
  </head>
  <body>
    <div id="app"><!--app-html--></div>
    <script type="module" src="/src/main.js"></script>
    <script type="module" src="/src/tools/shp.js"></script>
    <!--  海康  -->
    <script>
      const NODE_ENV = process.env.NODE_ENV // 新增
      let externalScript = document.createElement('script');
      externalScript.setAttribute('src', (NODE_ENV == 'development' ? '/src/' : './') + 'static/hik/codebase/webVideoCtrl.js')
      document.head.appendChild(externalScript)

      let AESScript = document.createElement('script');
      AESScript.setAttribute('src', (NODE_ENV == 'development' ? '/src/' : './') + 'static/hik/codebase/encryption/AES.js')
      document.head.appendChild(AESScript)

      let crypticoScript = document.createElement('script');
      crypticoScript.setAttribute('src', (NODE_ENV == 'development' ? '/src/' : './') + 'static/hik/codebase/encryption/cryptico.min.js')
      document.head.appendChild(crypticoScript)

      let jqueryScript = document.createElement('script');
      jqueryScript.setAttribute('src', (NODE_ENV == 'development' ? '/src/' : './') + 'static/hik/jquery-1.7.1.min.js')
      document.head.appendChild(jqueryScript)

    </script>
  </body>
</html>

webVideoCtrl.js文件修改

搜索”location”，找到如下位置

修改这两个方法，将地址和端口调整为自己的地址和端口.

ws部分可直接调整为连接海康摄像头的websocket地址

http部分可以直接修改上面定义的代理地址，覆盖location

nginx配置反向代理

php

其他

前端

后端

导航

发送评论编辑评论

发送评论 编辑评论

发送评论编辑评论