海康威视插件播放视频流

海康威视插件播放视频流

---

一, 下载jq和js海康插件

!!!需要下载VideoWebPlugin.exe这个应用

1.下载播放插件和css-js文件 链接：链接：链接：https://open.hikvision.com/download/5c67f1e2f05948198c909700?type=10
里面啥都有，就是需要注册一下，登录一下

二,引入js 在index.html里面进行引入

三,data里面定义内容

	  gpuMode: 0,      // 是否开启 GPU 硬解，不建议开启，0-不开启 1-开启 现在用的是 0
      streamMode: 0,  //  主子码流标识，0-主码流 1-子码流 现在用的是 0
      transMode: 1,     // 传输协议，0-UDP 1-TCP 现在用的是 1
      wndId: -1,    // 监控点的默认窗口播放是-1
      appkey: "123456",   //海康威视平台提供   必要
      secret: "abcdefgh",   //海康威视平台提供  必要
      ip: "120.0.0.1",      //  播放ip地址               必要
      port: "",      // 端口                                      必要
      snapDir: "d:\\SnapDir",   // 抓图存储路径
      videoDir: "d:\\VideoDir",  //录像存放地址
      layout: "1x1",        //playMode 指定模式的布局
      playMode: 0,   //播放类型 0 预览    1回放 没值报错
      isHttps: "1",   // https协议类型
      language: "zh_CN", //配置多语言模式 默认中文 或者 英文
      swfHeight: "",     //视频插件动态高度
      swfWidth: "",   //视频插件动态宽度
	// 全局的this.oWebControl  this.WebControl
      oWebControl: null,
      WebControl: null,

四,视频容器

五, 方法操作

//beforeMount生命周期
beforeMount() {
    this.WebControl = WebControl;
  },

1,初始化插件

//插件初始化, 成功就触发 this.init() 这个方法 如果没有成功则是没有下载插件,需要提示用户下载插件,给了一个弹框

下载插件方法 插件在上面地址网盘里面

//初始化插件
initPluginMon() {
      var that = this;
      this.oWebControl = new WebControl({
        szPluginContainer: "noscopendvd", // 指定容器id
        iServicePortStart: 15900, // 指定起止端口号，建议使用该值
        iServicePortEnd: 15909,
        szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
        // 创建WebControl实例成功
        cbConnectSuccess: () => {
          this.oWebControl
            .JS_StartService("window", {
              // WebControl实例创建成功后需要启动服务
              dllPath: "./VideoPluginConnect.dll", // 值"./VideoPluginConnect.dll"写死
            })
            .then(
              () => {
                // 启动插件服务成功
                this.oWebControl.JS_SetWindowControlCallback({
                  // 设置消息回调
                  cbIntegrationCallBack: this.cbIntegrationCallBack,
                });

                this.oWebControl
                  .JS_CreateWnd("noscopendvd", this.swfWidth, this.swfHeight)   //动态插件宽高
                  .then(() => {
                    //JS_CreateWnd创建视频播放窗口，宽高可设定
                    this.init(); // 创建播放实例成功后初始化
                  });