vue +WebSDK_V3.3.0

1.在index.html中引入js文件

     <!-- 实时对讲 -->
    <script src="./static/js/jquery-1.7.1.min.js"></script>
    <script src="./static/js/jsVideoPlugin-1.0.0.min.js"></script>
    <script id="videonode" src="./static/js/webVideoCtrl.js"></script>

2.在vue中使用需要修改webVideoCtrl.js文件中引入jsVideoPlugin-1.0.0.min.js的方式如下

     // this.I_InitPlugin = function (options) {
    //   m_utilsInc.extend(m_options, options)
    //   var szDirName = m_utilsInc.getDirName()
    //   if (szDirName) {
    //     if ('object' === typeof exports && typeof module !== 'undefined') {
    //     } else if ('function' === typeof define && define.amd) {
    //       require([szDirName + '/jsVideoPlugin-1.0.0.min.js'], function (o) {
    //         window.JSVideoPlugin = o.JSVideoPlugin
    //         if (options.cbInitPluginComplete) {
    //           options.cbInitPluginComplete()
    //         }
    //       })
    //     } else {
    //       m_utilsInc.loadScript(
    //         szDirName + '/jsVideoPlugin-1.0.0.min.js',
    //         function () {
    //           if (options.cbInitPluginComplete) {
    //             options.cbInitPluginComplete()
    //           }
    //         }
    //       )
    //     }
    //   }
    //   window.addEventListener('resize', function () {
    //     if (m_pluginOBJECT !== null) {
    //       var oElem = $('#' + m_options.szContainerID)
    //       m_pluginOBJECT.JS_Resize(oElem.width(), oElem.height())
    //     }
    //   })
    //   window.addEventListener('unload', function () {})
    // }


this.I_InitPlugin = function (options) {
      m_utilsInc.extend(m_options, options)

      if ('object' === typeof exports && typeof module !== 'undefined') {
        require(['./jsVideoPlugin-1.0.0.min.js'], function (o) {
          window.JSVideoPlugin = o.JSVideoPlugin
          if (options.cbInitPluginComplete) {
            options.cbInitPluginComplete()
          }
        })
      } else if ('function' === typeof define && define.amd) {
        require(['./jsVideoPlugin-1.0.0.min.js'], function (o) {
          window.JSVideoPlugin = o.JSVideoPlugin
          if (options.cbInitPluginComplete) {
            options.cbInitPluginComplete()
          }
        })
      } else {
        m_utilsInc.loadScript('./jsVideoPlugin-1.0.0.min.js', function () {
          if (options.cbInitPluginComplete) {
            options.cbInitPluginComplete()
          }
        })
      }

      window.addEventListener('resize', function () {
        if (m_pluginOBJECT !== null) {
          var oElem = $('#' + m_options.szContainerID)
          m_pluginOBJECT.JS_Resize(oElem.width(), oElem.height())
        }
      })
      window.addEventListener('unload', function () {})
      window.addEventListener('scroll', function () {})
    }

在使用到页面中

html

  <div id="divPlugin" class="plugin"></div>

js

     dataHD: {
        ip: "197.11.44.33333333",
        port: "80",
        user: "admin",
        password: "14141414",
      },
      startRealTimeIntercom: false,
      currentLoginIpPort: "",
      audiochannels: 0,

 mounted() {
    this.initS()
  },

 initS() {
      //初始化插件参数及插入插件
      WebVideoCtrl.I_InitPlugin({
        bWndFull: true,     //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
        iWndowType: 1,
        cbInitPluginComplete: function () {
          WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin").then(() => {
            // 检查插件是否最新
            // WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
            //   if (bFlag) {
            //     alert("检测到新的插件版本，双击开发包目录里的HCWebSDKPlugin.exe升级！");
            //   }
            // });
          }, () => {
            // alert("插件初始化失败，请确认是否已安装插件；如果未安装，请双击开发包目录里的HCWebSDKPlugin.exe安装！");
          });
        }
      });
      setTimeout(() => {
        this.clickLogin()
      }, 1000)
    },
    // 登录
    clickLogin() {
      console.log('denglu', this.dataHD.ip, 1, this.dataHD.port, this.dataHD.user, this.dataHD.password);
      let that = this
      WebVideoCtrl.I_Login(this.dataHD.ip, 1, this.dataHD.port, this.dataHD.user, this.dataHD.password, {
        success: function (xmlDoc) {
          that.currentLoginIpPort = that.dataHD.ip + "_" + that.dataHD.port;
          that.getSpeakChanel()
        },
        error: function (oError) {
          that.currentLoginIpPort = that.dataHD.ip + "_" + that.dataHD.port;
          that.getSpeakChanel()
          console.log(oError, " 登录失败12.28！", oError.errorCode, oError.errorMsg)
        }
      });
    },
    // 获取对讲通道
    getSpeakChanel() {
      let that = this
      WebVideoCtrl.I_GetAudioInfo(that.currentLoginIpPort, {
        success: function (xmlDoc) {
          var oAudioChannels = $(xmlDoc).find("TwoWayAudioChannel")
          $.each(oAudioChannels, function () {
            var id = $(this).find("id").eq(0).text();
            // 获取对讲通道
            that.audiochannels = id
          });
        },
        error: function (oError) {
        }

      })
    },

    // 开启对讲
    startSpeak() {
      console.log(this.audiochannels, this.currentLoginIpPort, 'this.audiochannels && this.currentLoginIpPort');
      if (this.audiochannels && this.currentLoginIpPort) {
        let iAudioChannel = parseInt(this.audiochannels, 10)
        WebVideoCtrl.I_StartVoiceTalk(this.currentLoginIpPort, iAudioChannel).then(() => {
          console.log("开始对讲成功");
        }, (oError) => {
          console.log("开始对讲失败");
        });
      }
    },
    // 停止对讲
    endSpeak() {
      WebVideoCtrl.I_StopVoiceTalk().then(() => {
        console.log("停止对讲成功");
      }, (oError) => {
        console.log("停止对讲失败");
      });
    },

小小功能整了一天：记住以下要点

1.在网上找了几篇文章cv的时候在index.html以内的文件名错了。。。。离离原上谱，，，

2.最开始后端大哥教我 无需安装插件然后一直报错m_pluginOBJECT.JS_SubmitHttpRequest(options)

后来我细细看了一下js文件初始化插件是必须的一步 我这里只需要登录成功即可 是不用安装插件但是呢初始化插件这一步是必须的WebVideoCtrl.I_InsertOBJECTPlugin否则m_pluginOBJECT就是null导致报错

3.就是一定要修改webVideoCtrl.js文件中引入jsVideoPlugin-1.0.0.min.js的方式 因为vue和html编译不同会导致找不到哇。。。。

其他别的功能应该都是大同小异 cv? js文件中已经封装好的方法即可?对了还有最后一点就是在vue中登录的前提是可以在html那个dome的文件中可以登录再研究，别页面都登录不了就框框一顿操作；以及需要启动ng 记得将ng中的配置文件中的端口和ip修改成你本地的以及在网页中输入localhost是可以访问到页面 再登录！！！！

好了 准备美美下班~