【海康威视】web无插件3.2，vue开发

文章目录

• 下载配置
• 一、配置自己的webVideo.js
• 二、环境配置
  • 1.node环境(暂未走通，可参考)
  • 2.nginx环境(走通，略显繁琐)
• 总结

---

下载配置

在海康威视的官网进行下载开发包：

https://open.hikvision.com/download/5cda567cf47ae80dd41a54b3?type=10&id=4c945d18fa5f49638ce517ec32e24e24

没有账号的话，可以让公司注册下

一、配置自己的webVideo.js和html

<script>
    export default {
        data() {
            return {
                g_iWndIndex: 0,
                szDeviceIdentify: '',
                deviceport: '',
                channels: [],
                ip: '',
                port: '',
                username: '',
                password: '',
                iRtspPort: ''
            }
        },
        mounted() {
            this.init()
        },
        methods: {
            // 初始化
            init() {
                // 初始化插件参数及插入插件
                WebVideoCtrl.I_InitPlugin('100%', '100%', {
                  bWndFull: true, // 但窗口双击全屏
                  iPackageType: 2, // 封装格式 无插件只能是2
                  iWndowType: 1, // 分屏类型 1*1 2*2 ....
                  bNoPlugin: true, // 开启无插件模式
                  cbInitPluginComplete: function () {
                    console.log("初始化成功！");
                    WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
                  }
                });
            },
            // 登录
            clickLogin() {
                if (!this.ip || !this.port) {
                    return
                }
                this.szDeviceIdentify = this.ip+"_"+this..port
                WebVideoCtrl.I_Login(this.ip, 1, this.port, this.username, this.password,                 
                {
                  success: function(xmlDoc) {
                    this.getChannelInfo() // 获取模拟通道
                    this.getDevicePort() // 获取端口 （影响不大）
                  }   
                })
            },
            // 获取模拟媒体通道
            getChannelInfo() {
               let self = this
               if (!this.szDeviceIdentify) {
                   return
               }
               WebVideoCtrl.I_GetAnalogChannelInfo(self.szDeviceIdentify, {
                 async: 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
                      })
                    });
                 },
                 error: function (status, xmlDoc) {
                     console.log('获取模拟通道失败', status, xmlDoc)
                 }
              });
            },
            // 获取端口 不会对预览效果造成影响
            getDevicePort() {
               if (!this.szDeviceIdentify) {
                  return
               }
               var oPort = WebVideoCtrl.I_GetDevicePort(this.szDeviceIdentify);
               console.log('获取通道端口号', oPort)
               if (oPort != null) {
                  this.deviceport = oPort.iDevicePort;
                  this.iRtspPort= oPort.iRtspPort;
               }
            },
            // 开始预览
            clickStartRealPlay() {
                let self = this
                let oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex),
                iChannelID = self.channels[0].id
                if (!this.szDeviceIdentify) {
                    return;
                }
                var startRealPlay = function () {
                    WebVideoCtrl.I_StartRealPlay(self.szDeviceIdentify, {
                        iRtspPort: parseInt(self.deviceport, 10), // RTSP端口必须是int
                        iStreamType: 1, // 码流类型：1-主码流 必须int
                        iChannelID: parseInt(iChannelID, 10), // 播放通道 必须int
                        bZeroChannel: false, // 是否播放零通道 默认false
                        success: function () {
                            console.log("预览成功")
                        },
                        error: function (status, xmlDoc) {
                            console.log("预览失败", status, xmlDoc)
                        }
                    });
                };
                if (oWndInfo != null) {// 已经在播放了，先停止
                    WebVideoCtrl.I_Stop({
                        success: function () {
                            startRealPlay();
                        }
                    });
                } else {
                    startRealPlay();
                }
            }
        }
    }
</script>

html中标签.plugin必须有明确的宽高

<template>
  <el-main>
    <div id="divPlugin" class="plugin"></div> 
    <el-button @click="clickLogin">开始登录</el-button>
    <el-button @click="clickStartRealPlay">开始预览</el-button>
  </el-main>
</template>

<style>
.plugin{
  width:500px;
  height:300px;
}
</style>

在pulic目录引入开发包中的以下文件

在index.html中引入

二、环境配置

1.node环境(暂未走通，可参考)

按照步骤一之后，登录连接设备会出现接口“404”报错

这是因为无插件版本需要代理服务器，借鉴开发包中nginx.conf的配置用来处理流

location ~ /ISAPI|SDK/ {
	if ($http_cookie ~ "webVideoCtrlProxy=(.+)") {
    proxy_pass http://$cookie_webVideoCtrlProxy;
    break;
}

所以可以vue.config.js中devServer去做代理并设置端口为80端口，否则会有“502”报错

当代理设置好后，会出现“413”报错，百度上说可以设置node的maxhttpsize，尝试后失败无效到此结束，大家可以尝试别的方法处理413

2.nginx环境(走通，略显繁琐）

将自己的项目打包，放在开发包的nginx1.10.2同级目录下启动项目即可，不好的地方在于频繁打包，这时便可在项目中 登录 点击预览

 server {
        listen       80;
        server_name  127.0.0.1;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;


        location / {
            root   "../dist";
            index  index.html index.htm;
        }


	    location ~ /ISAPI|SDK/ {
	    if ($http_cookie ~ "webVideoCtrlProxy=(.+)") {
		proxy_pass http://$cookie_webVideoCtrlProxy;
		break;
	    }
	}	

---

总结

相较于3.0版本，方法上没有什么太多的变化，只不过有细微的参数变化，以及取流的方式产生了不同。可以借助于后端朋友的力量配置环境搭建，所学知识不足暂时没办法在node的开发环境中取到视频流。欢迎大家分享自己的方法