|
@@ -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>
|