我使用海康威视Web3.2_控件开发包但是登录她一直报错404，解决

公司之前让我用海康威视Web3.2_控件开发包，没用过，一直在查文档，最后上手写在登录时一直报错404，最后解决了，请看代码

首先将开发包解压出来，需要codebase里边的所有文件以及外侧的jquery-1.7.1.min.js

在public中引入文件

index.html中引入

将开发包的nginx1.10.2放在自己项目的同级目录下，项目频繁打包调试。一定要打包之后调试哦

配置nginx的config本机地址和端口，root指向vue的打包文件dist（index那默认是index.html index.htm，我是因为打包index.html将名字修改成videoData所以哪里写了videoData.html，默认index可以不改）

之后就进入主题了，配置自己的webVideo.js和html

在src/components下，新建webVideo.js

这是代码

export function WebVideo() {
    this.g_iWndIndex = 0
    this.szDeviceIdentify = ''
    this.deviceport = ''
    this.rtspPort = ''
    this.channels = []
    this.ip = ''
    this.port = '80'
    this.username = ''
    this.password = ''
    this.init = function (ip, username, password) {
        this.ip = ip
        this.username = username
        this.password = password
       
        // 初始化插件参数及插入插件
        WebVideoCtrl.I_InitPlugin(454, 315, {
            szColorProperty: 'plugin-background:#102749; sub-background:#102749; sub-border:#18293c; sub-border-select:red',
            bWndFull: true, // 全屏
            // iPackageType: 2,
            iWndowType: 1, //分屏
            bNoPlugin: true, // 支持无插件
            cbInitPluginComplete: function () {
                WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
            }
        });
    }
    // 登录
    this.clickLogin = function () {
        var self = this
        if ("" == self.ip || "" == self.port) {
            return;
        }
        self.szDeviceIdentify = self.ip + "_" + self.port;
        WebVideoCtrl.I_Login(self.ip, 1, self.port, self.username, self.password, {
            success: function (xmlDoc) {
                setTimeout(function () {
                    console.log('登录成功');
                    self.getChannelInfo();
                    self.getDevicePort();
                }, 10);
                setTimeout(function () {
                    self.clickStartRealPlay()
                }, 500)
            },
            error: function (status, xmlDoc) {
                console.log('登录失败');
            }
        });
    }
    // 退出
    this.clickLogout = function () {
        var self = this
        self.channels = []

        if (null == self.szDeviceIdentify) {
            return;
        }
        var iRet = WebVideoCtrl.I_Logout(self.szDeviceIdentify);
        if (0 == iRet) {
            self.getChannelInfo();
            self.getDevicePort();
        }
    }
    // 获取通道
    this.getChannelInfo = function () {
        var self = this
        self.channels = []
        if (null == self.szDeviceIdentify) {
            return;
        }
        // 模拟通道
        WebVideoCtrl.I_GetAnalogChannelInfo(self.szDeviceIdentify, {
            async: false,
            success: function (xmlDoc) {
                var oChannels = $(xmlDoc).find("VideoInputChannel");
                $.each(oChannels, function (i) {
                    var 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
                    })
                });
                console.log('获取模拟通道号成功',self.channels)
            },
            error: function (status, xmlDoc) {
                console.log('获取模拟通道号失败')
            }
        });
    }
    // 获取端口
    this.getDevicePort = function () {
        var self = this
        if (null == self.szDeviceIdentify) {
            return;
        }
        var oPort = WebVideoCtrl.I_GetDevicePort(self.szDeviceIdentify);
        if (oPort != null) {
            self.deviceport = oPort.iDevicePort;
            self.rtspPort = oPort.iRtspPort;
        }
        console.log('获取端口号成功')
    }

    // 开始预览
    this.clickStartRealPlay = function () {
        var self = this
        var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex),
            iChannelID = self.channels[0].id//默认通道号为第一个

        if (null == self.szDeviceIdentify) {
            return;
        }
        var startRealPlay = function () {
            WebVideoCtrl.I_StartRealPlay(self.szDeviceIdentify, {
                iChannelID: iChannelID,
                bZeroChannel: false,
                iStreamType: 2,
                success: function () {
                    console.log('预览成功')
                },
                error: function (status, xmlDoc) {
                    if (403 === status) {
                        console.log('设备不支持Websocket取流')
                    } else {
                        console.log('预览失败')
                    }
                }
            });
        };

        if (oWndInfo != null) {// 已经在播放了，先停止
            WebVideoCtrl.I_Stop({
                success: function () {
                    startRealPlay();
                }
            });
        } else {
            startRealPlay();
        }
    }
    // 停止预览
    this.clickStopRealPlay = function () {
        var self = this
        var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex)
        if (oWndInfo != null) {
            WebVideoCtrl.I_Stop({
                success: function () {
                    console.log('停止预览成功')
                },
                error: function () {
                    console.log('停止预览失败')
                }
            });
        }
    }
}

vue文件

<template>
  <div class="video-play">
    <div id="divPlugin" class="divPlugin" style="width: 454px;height: 315px" />
  </div>
</template>
 
<script>
import { WebVideo } from '../components/webVideo'

export default {
  name: 'VideoPlay',
  // mixins: [resize],
  data() {
    return {
      webVideo: '',
      hkvInfo: {
        //自己填
        ip: '',//你的摄像头的ip
        username: '',//用户名
        password: ''//密码
      }
    }
  },
  created() {

  },
  mounted() {
    this.initVideoPlay()
  },
  beforeDestroy() {
    this.stopVideoPlay()
  },
  methods: {
    initVideoPlay() {
      this.webVideo = new WebVideo()
      this.$nextTick(() => {
        this.webVideo.init(this.hkvInfo.ip, this.hkvInfo.username, this.hkvInfo.password)
        this.webVideo.clickLogin()
      })
    },
    stopVideoPlay() {
      this.webVideo.clickStopRealPlay()
      this.webVideo.clickLogout()
    }
  }
}
</script>
 
<style lang="less" scope></style>

切记

id="divPlugin"必须设置，而且要有明确的宽高
beforeDestroy() {this.stopVideoPlay()},必须要退出预览否则页面切换会出问题

记得打包后先启动nginx-1.10.2中的start.bat哦，然后输入本机地址和端口号就可以看了