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

文章目录

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

  ---

  下载配置

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

  海康开放平台

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

  一、配置自己的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的配置用来处理流

   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的开发环境中取到视频流。欢迎大家分享自己的方法