[SCREEN] video

src/components/hk/hkCamara.vue

@@ -9,6 +9,8 @@
   </div>
 </template>
 <script>
+import { resolve } from "eslint-plugin-promise/rules/lib/promise-statics";
+
 export default {
   name: "videoPlayer1",
   props: {
@@ -32,6 +34,7 @@ export default {
       xmlDocData: {},
       g_iWndIndex: 0, //可以不用设置这个变量，有窗口参数的接口中，不用传值，开发包会默认使用当前选择窗口
       videoNum: "",
+      wndNum: 2
     };
   },
   created() {},
@@ -57,7 +60,7 @@ export default {
     videoInitPlugin() {
       var iRet = WebVideoCtrl.I_CheckPluginInstall();
       if (iRet === -1) {
-        alert("您还未安装过插件，请安装WebComponentsKit.exe插件！");
+        alert("您还未安装过插件");
         return;
       }
       this.initPlugin();
@@ -65,51 +68,228 @@ export default {
     //插件初始化
     initPlugin() {
       var that = this;
+      console.log("🚀 开始初始化插件 >> ", that.g_iWndIndex);
       WebVideoCtrl.I_InitPlugin({
-        bWndFull: true, //是否支持单窗口双击全屏，默I_CheckPluginInstall
-        iWndowType: 1,
-
+        bWndFull: true,
+        iWndowType: that.wndNum,
         bDebugMode: true,
-        cbSelWnd: function (xmlDoc) {},
+        cbSelWnd: function (xmlDoc) {
+          that.g_iWndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
+        },
       });
-      WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin1");
-
-      // 检查插件是否最新
-      if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {
-        alert("检测到新的插件版本，请双击WebComponents.exe插件，进行升级！");
-        // return;
-      }
-      setTimeout(() => {
+      console.log("🚀 初始化插件完成 >> ", that.g_iWndIndex);
+      console.log("🚀 插入插件");
+      WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin1").then(() => {
         WebVideoCtrl.I_Resize(
           600 / (this.zoom / 1.25),
           240 / (this.zoom / 1.25)
-        );
-      }, 100);
-      window.addEventListener("resize", this.handleResize);
+        )
+        window.addEventListener("resize", that.handleResize);
+      });
+      console.log("🚀 插入完成");
+    },
+    async getLoginParams() {
+      var loginParams = {};
+      var that = this;
+      for (const item of that.companyVideoData) {
+          if (item !== undefined) {
+            let loginParam = {}
+            const key = JSON.stringify(item);
+            if (!loginParams.hasOwnProperty(key)) {
+              loginParams[key] = item;
+            }
+          }
+      }
+      return loginParams;
+    },
+    async login(loginParams) {
+      var that = this;
+      // for (const loginParam of Object.values(loginParams)) {
+      //   await that.doLogin(loginParam)
+      // }
+      await Promise.all(
+        Object.values(loginParams).map(async (loginParam) => {
+          await that.doLogin(loginParam);
+        })
+      )
+    },
+    async doLogin(loginParam) {
+      console.log("🚀 loginPara >> ", loginParam);
+      var that = this;
+      WebVideoCtrl.I_Login(
+        loginParam.ip,
+        1,
+        loginParam.Port,
+        loginParam.Username,
+        loginParam.Password,
+        {
+          timeout:1000,
+          success: function(xmlDoc) {
+            console.log("🚀 登录成功 >> ", loginParam.ip, loginParam.Port);
+            that.doGetChannelInfo(loginParam.ip).then((channels) => {
+              var s = JSON.stringify(channels);
 
-      this.clickLogin();
-      setTimeout(() => {
+              console.log("tezt", JSON.stringify(channels), channels.length, channels[0], channels[0].channelId, channels[0]["channelId"])
+              // console.log("🚀 通道列表 >> ", loginParam.ip, channels, channels.length, s[0]["channelName"]);
+              var channelId = that.getChannelIdByName(loginParam.channelName, channels);
+              console.log("🚀 获得id >> ", channelId);
+              if (channelId !== null) {
+                console.log("🚀 获得id >> ", channelId);
+                that.startPlay(loginParam.ip, channelId);
+              } else
+                console.log("🚀 通道号无效 >> ", loginParam.ip, loginParam.channelName);
+            })
+          },
+          error: function () {
+            console.log("login error");
+          },
+        }
+      );
+    },
+    getChannelIdByName(channelName, channels) {
+      const channel = channels.find((channel) => {
+        if (channel["channelName"] == channelName) {
+          return channel;
+        }
+      });
+      if (channel) {
+        return channel.channelId;
+      } else {
+        return null;
+      }
+    },
+    doGetChannelInfo(ip) {
+      return new Promise((resolve, reject) => {
+        var getAnalogChannelInfo = new Promise((resolve, reject) => {
+          WebVideoCtrl.I_GetAnalogChannelInfo(ip, {
+            success: function(xmlDoc) {
+              let channels = [];
+              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));
+                }
+                channels.push({
+                  channelId: id,
+                  channelName: name,
+                })
+              });
+              console.log("🚀 获取模拟通道成功 >> ",);
+              resolve(channels);
+            },
+            error: function(oError) {
+              console.log("🚀 获取模拟通道失败 >> ", ip, oError.errorCode, oError.errorMsg);
+            },
+          })
+        });
+        var getDigitalChannelInfo = new Promise((resolve, reject) => {
+          WebVideoCtrl.I_GetDigitalChannelInfo(ip, {
+            success: function(xmlDoc) {
+              let channels = [];
+              var oChannels = $(xmlDoc).find("InputProxyChannelStatus");
+              $.each(oChannels, function(i) {
+                var id = $(this).find("id").eq(0).text(),
+                  name = $(this).find("name").eq(0).text(),
+                  online = $(this).find("online").eq(0).text();
+                if ("false" == online) {// 过滤禁用的数字通道
+                  return true;
+                }
+                if ("" == name) {
+                  name = "IPCamera " + (i < 9 ? "0" + (i + 1) : (i + 1));
+                }
+                channels.push({
+                  channelId: id,
+                  channelName: name,
+                })
+              });
+              console.log("🚀 获取数字通道成功 >> ",);
+              resolve(channels);
+            },
+            error: function(oError) {
+              console.log("🚀 获取数字通道失败 >> ", ip, oError.errorCode, oError.errorMsg);
+              resolve([]);
+            }
+          });
+        });
+        var getZeroChannelInfo = new Promise((resolve, reject) => {
+          WebVideoCtrl.I_GetZeroChannelInfo(ip, {
+            success: function(xmlDoc) {
+              let channels = [];
+              var oChannels = $(xmlDoc).find("ZeroVideoChannel");
+              $.each(oChannels, function(i) {
+                var id = $(this).find("id").eq(0).text(),
+                  name = $(this).find("name").eq(0).text();
+                if ("" == name) {
+                  name = "Zero Channel " + (i < 9 ? "0" + (i + 1) : (i + 1));
+                }
+                if ("true" == $(this).find("enabled").eq(0).text()) {// 过滤禁用的零通道
+                  channels.push({
+                    channelId: id,
+                    channelName: name,
+                  })
+                }
+              });
+              console.log("🚀 获取零通道成功 >> ",);
+              resolve(channels);
+            },
+            error: function(oError) {
+              console.log("🚀 获取零通道失败 >> ", ip, oError.errorCode, oError.errorMsg);
+              resolve([]);
+            }
+          });
+        });
+        Promise.allSettled([getAnalogChannelInfo, getDigitalChannelInfo, getZeroChannelInfo])
+          .then((resList) => {
+            console.log("🚀 res >> ", resList);
+            const fulfilledValues = resList.reduce((list, result) => {
+              if (result.status === 'fulfilled' && result.value.length !== 0) {
+                const value = result.value;
+                list.push(value);
+              }
+              return list;
+            }, []);
+            resolve(fulfilledValues.flat());
+          })
+          .catch((error) => {
+            console.log("🚀 获取通道失败 >> ", ip);
+          });
+      })
+    },
+    startPlay(ip, channelId) {
+      console.log("🚀 开始播放 >> ", ip, channelId);
+      WebVideoCtrl.I_StartRealPlay(ip, {
+        iStreamType: 1,
+        iChannelID: channelId,
+        iWndIndex: 0,
+      }).then(() => {
         this.$emit("init", true);
-      }, 1000);
+        console.log("🚀 采集卡麒麟 >> ", );
+      })
     },
     clickLogin() {
-      console.log("this.companyVideoData :>> ", this.companyVideoData);
-      const uniqueArr = [];
-      const uniqueSet = new Set();
+      return new Promise((resolve) => {
+        const uniqueArr = [];
+        const uniqueSet = new Set();
 
-      this.companyVideoData.forEach((obj) => {
-        if (obj !== undefined) {
-          const key = JSON.stringify(obj);
-          if (!uniqueSet.has(key)) {
-            uniqueSet.add(key);
-            uniqueArr.push(obj);
+        this.companyVideoData.forEach((obj) => {
+          if (obj !== undefined) {
+            const key = JSON.stringify(obj);
+            if (!uniqueSet.has(key)) {
+              uniqueSet.add(key);
+              uniqueArr.push(obj);
+            }
           }
+        });
+        console.log(uniqueArr);
+        for (let index = 0; index < uniqueArr.length; index++) {
+          this.singleLogin(uniqueArr[index], index);
         }
+
+        // 完成登录操作后调用resolve
+        resolve();
       });
-      console.log(uniqueArr);
-      for (let index = 0; index < uniqueArr.length; index++) {
-        this.singleLogin(uniqueArr[index], index);
-      }
     },
     singleLogin(Data, index) {
       setTimeout(() => {
@@ -133,7 +313,7 @@ export default {
             },
           }
         );
-      }, 2000);
+      }, 100);
     },
     //获取通道
     getChannelInfo() {
@@ -206,30 +386,50 @@ export default {
   //因为项目中需求，总公司要查看所有子公司的监控，所以做了个监听来切换查看各个子公司的监控
   watch: {
     companyVideoData: {
-      handler(val, oldval) {
-        if (oldval) {
-          for (let i = 0; i < 16; i++) {
-            WebVideoCtrl.I_Stop(i); //停止正在播放的页面
+      handler(val, oldVal) {
+        if (oldVal.length !== 0) {
+          for (let i = 0; i < this.wndNum; i++) {
+            WebVideoCtrl.I_Stop(i);
           }
-          this.$emit("func", "");
-          WebVideoCtrl.I_Logout(oldval.ip);
-          this.clickLogin(this.companyVideoData);
+          this.getLoginParams().then((res) => {
+            console.log("🚀 解析完 >> ", res);
+            this.login(res);
+          });
+          //
         }
-      },
-      immediate: true, //关键
-      deep: true,
-    },
-    videoType: {
-      handler(val, oldval) {
-        if (oldval) {
-          WebVideoCtrl.I_ChangeWndNum(this.videoType); //分屏
-          this.initPlay();
-        }
-      },
-      immediate: true, //关键
-      deep: true,
-    },
-  },
+      }
+    }
+  }
+  // watch: {
+  //   companyVideoData: {
+  //     handler(val, oldval) {
+  //       if (oldval) {
+  //         for (let i = 0; i < 16; i++) {
+  //           WebVideoCtrl.I_Stop(i); //停止正在播放的页面
+  //         }
+  //         this.$emit("func", "");
+  //         WebVideoCtrl.I_Logout(oldval.ip);
+  //         this.clickLogin(this.companyVideoData);
+  //         setTimeout(() => {
+  //           console.log("🚀 ~ file:hkCamara method: line:92 -----");
+  //           this.$emit("init", true);
+  //         }, 2000);
+  //       }
+  //     },
+  //     immediate: true, //关键
+  //     deep: true,
+  //   },
+  //   videoType: {
+  //     handler(val, oldval) {
+  //       if (oldval) {
+  //         WebVideoCtrl.I_ChangeWndNum(this.videoType); //分屏
+  //         this.initPlay();
+  //       }
+  //     },
+  //     immediate: true, //关键
+  //     deep: true,
+  //   },
+  // },
 };
 </script>
 <style scoped>

src/components/hk/hkv.vue

@@ -81,40 +81,210 @@ export default {
       this.initPlugin();
     },
     //插件初始化
-    async initPlugin() {
+    initPlugin() {
       var that = this;
+      console.log("🚀 开始初始化插件 >> ", that.g_iWndIndex);
       WebVideoCtrl.I_InitPlugin({
-        bWndFull: true, //是否支持单窗口双击全屏，默I_CheckPluginInstall
+        bWndFull: true,
         iWndowType: 2,
-
         bDebugMode: true,
-        cbSelWnd: function (xmlDoc) {},
+        cbSelWnd: function (xmlDoc) {
+          that.g_iWndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
+        },
       });
-      WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
-
-      // 检查插件是否最新
-      if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {
-        alert("检测到新的插件版本，请双击WebComponents.exe插件，进行升级！");
-        // return;
-      }
-      setTimeout(() => {
+      console.log("🚀 初始化插件完成 >> ", that.g_iWndIndex);
+      console.log("🚀 插入插件");
+      WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin").then(() => {
         WebVideoCtrl.I_Resize(
           380 / (this.zoom / 1.25),
           260 / (this.zoom / 1.25)
-        );
-
-        // let divw = $('.divPlugin').width();
-        // let divh = $('.divPlugin').height();
-        // console.log("div宽:" + divw + "；div高:" + divh);
-        // WebVideoCtrl.I_Resize(divw, divh);
-      }, 200);
-      window.addEventListener("resize", this.handleResize);
-      await this.clickLogin();
+        )
+        this.$emit("init", true);
+        console.log("🚀 采集卡麒麟 >> ", );
+        window.addEventListener("resize", that.handleResize);
 
-        setTimeout(() => {
-         this.$emit("init", true);
-      }, 1000);
+      });
+      console.log("🚀 插入完成");
+    },
+    async getLoginParams() {
+      var loginParams = {};
+      var that = this;
+      for (const item of that.companyVideoData) {
+        if (item !== undefined) {
+          let loginParam = {}
+          const key = JSON.stringify(item);
+          if (!loginParams.hasOwnProperty(key)) {
+            loginParams[key] = item;
+          }
+        }
+      }
+      return loginParams;
+    },
+    async login(loginParams) {
+      var that = this;
+      // for (const loginParam of Object.values(loginParams)) {
+      //   await that.doLogin(loginParam)
+      // }
+      await Promise.all(
+        Object.values(loginParams).map(async (loginParam) => {
+          await that.doLogin(loginParam);
+        })
+      )
+    },
+    async doLogin(loginParam) {
+      console.log("🚀 loginPara >> ", loginParam);
+      var that = this;
+      WebVideoCtrl.I_Login(
+        loginParam.ip,
+        1,
+        loginParam.Port,
+        loginParam.Username,
+        loginParam.Password,
+        {
+          timeout:1000,
+          success: function(xmlDoc) {
+            console.log("🚀 登录成功 >> ", loginParam.ip, loginParam.Port);
+            that.doGetChannelInfo(loginParam.ip).then((channels) => {
+              var s = JSON.stringify(channels);
 
+              console.log("tezt", JSON.stringify(channels), channels.length, channels[0], channels[0].channelId, channels[0]["channelId"])
+              // console.log("🚀 通道列表 >> ", loginParam.ip, channels, channels.length, s[0]["channelName"]);
+              var channelId = that.getChannelIdByName(loginParam.channelName, channels);
+              console.log("🚀 获得id >> ", channelId);
+              if (channelId !== null) {
+                console.log("🚀 获得id >> ", channelId);
+                that.startPlay(loginParam.ip, channelId);
+              } else
+                console.log("🚀 通道号无效 >> ", loginParam.ip, loginParam.channelName);
+            })
+          },
+          error: function () {
+            console.log("login error");
+          },
+        }
+      );
+    },
+    getChannelIdByName(channelName, channels) {
+      const channel = channels.find((channel) => {
+        if (channel["channelName"] == channelName) {
+          return channel;
+        }
+      });
+      if (channel) {
+        return channel.channelId;
+      } else {
+        return null;
+      }
+    },
+    doGetChannelInfo(ip) {
+      return new Promise((resolve, reject) => {
+        var getAnalogChannelInfo = new Promise((resolve, reject) => {
+          WebVideoCtrl.I_GetAnalogChannelInfo(ip, {
+            success: function(xmlDoc) {
+              let channels = [];
+              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));
+                }
+                channels.push({
+                  channelId: id,
+                  channelName: name,
+                })
+              });
+              console.log("🚀 获取模拟通道成功 >> ",);
+              resolve(channels);
+            },
+            error: function(oError) {
+              console.log("🚀 获取模拟通道失败 >> ", ip, oError.errorCode, oError.errorMsg);
+            },
+          })
+        });
+        var getDigitalChannelInfo = new Promise((resolve, reject) => {
+          WebVideoCtrl.I_GetDigitalChannelInfo(ip, {
+            success: function(xmlDoc) {
+              let channels = [];
+              var oChannels = $(xmlDoc).find("InputProxyChannelStatus");
+              $.each(oChannels, function(i) {
+                var id = $(this).find("id").eq(0).text(),
+                  name = $(this).find("name").eq(0).text(),
+                  online = $(this).find("online").eq(0).text();
+                if ("false" == online) {// 过滤禁用的数字通道
+                  return true;
+                }
+                if ("" == name) {
+                  name = "IPCamera " + (i < 9 ? "0" + (i + 1) : (i + 1));
+                }
+                channels.push({
+                  channelId: id,
+                  channelName: name,
+                })
+              });
+              console.log("🚀 获取数字通道成功 >> ",);
+              resolve(channels);
+            },
+            error: function(oError) {
+              console.log("🚀 获取数字通道失败 >> ", ip, oError.errorCode, oError.errorMsg);
+              resolve([]);
+            }
+          });
+        });
+        var getZeroChannelInfo = new Promise((resolve, reject) => {
+          WebVideoCtrl.I_GetZeroChannelInfo(ip, {
+            success: function(xmlDoc) {
+              let channels = [];
+              var oChannels = $(xmlDoc).find("ZeroVideoChannel");
+              $.each(oChannels, function(i) {
+                var id = $(this).find("id").eq(0).text(),
+                  name = $(this).find("name").eq(0).text();
+                if ("" == name) {
+                  name = "Zero Channel " + (i < 9 ? "0" + (i + 1) : (i + 1));
+                }
+                if ("true" == $(this).find("enabled").eq(0).text()) {// 过滤禁用的零通道
+                  channels.push({
+                    channelId: id,
+                    channelName: name,
+                  })
+                }
+              });
+              console.log("🚀 获取零通道成功 >> ",);
+              resolve(channels);
+            },
+            error: function(oError) {
+              console.log("🚀 获取零通道失败 >> ", ip, oError.errorCode, oError.errorMsg);
+              resolve([]);
+            }
+          });
+        });
+        Promise.allSettled([getAnalogChannelInfo, getDigitalChannelInfo, getZeroChannelInfo])
+          .then((resList) => {
+            console.log("🚀 res >> ", resList);
+            const fulfilledValues = resList.reduce((list, result) => {
+              if (result.status === 'fulfilled' && result.value.length !== 0) {
+                const value = result.value;
+                list.push(value);
+              }
+              return list;
+            }, []);
+            resolve(fulfilledValues.flat());
+          })
+          .catch((error) => {
+            console.log("🚀 获取通道失败 >> ", ip);
+          });
+      })
+    },
+    startPlay(ip, channelId) {
+      console.log("🚀 开始播放 >> ", ip, channelId);
+      WebVideoCtrl.I_StartRealPlay(ip, {
+        iStreamType: 1,
+        iChannelID: channelId,
+        iWndIndex: 0,
+      }).then(() => {
+        this.$emit("init", true);
+        console.log("🚀 采集卡麒麟 >> ", );
+      })
     },
     clickLogin() {
       return new Promise((resolve) => {
@@ -236,18 +406,18 @@ export default {
   //因为项目中需求，总公司要查看所有子公司的监控，所以做了个监听来切换查看各个子公司的监控
   watch: {
     companyVideoData: {
-      handler(val, oldval) {
-        if (oldval) {
-          for (let i = 0; i < 16; i++) {
-            WebVideoCtrl.I_Stop(i); //停止正在播放的页面
+      handler(val, oldVal) {
+        if (oldVal.length !== 0) {
+          for (let i = 0; i < this.wndNum; i++) {
+            WebVideoCtrl.I_Stop(i);
           }
-          this.$emit("func", "");
-          WebVideoCtrl.I_Logout(oldval.ip);
-          this.clickLogin(this.companyVideoData);
+          this.getLoginParams().then((res) => {
+            console.log("🚀 解析完 >> ", res);
+            this.login(res);
+          });
+          //
         }
       },
-      immediate: true, //关键
-      deep: true,
     },
     videoType: {
       handler(val, oldval) {

src/views/taskScreen.vue

@@ -364,7 +364,8 @@ export default {
   },
   methods:{
     HKCardInit(){
-      this.HKCardshow = true;
+      this.HKCardShow = true;
+      console.log("🚀 test >> ", this.HKCardShow);
     },
     jumpToHistory() {
       // this.$refs.hk.$destroy();
@@ -823,7 +824,7 @@ export default {
       }, 1000);
 
       setTimeout(() => {
-        this.HKCardShow = true;
+        this.HKCamaraShow = true;
       }, 800);
 
        let params1 = {
@@ -863,6 +864,7 @@ export default {
       url = url.split("@");
       data.ip = url[1];
       data.Password = url[0];
+      data.channelName = "test1";
       return data;
     },
     async changeVideo(subjectName) {