env-sys.git - Gitblit

parent: 09ab26b8 | 补丁 | 提交 | ignore whitespace

longyvfengyun

2023-07-03 365031c165038b7e1e3fc38ca8f91962f90c72d4

内容提交

3个文件已修改

2个文件已添加

	index.html	3 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/views/video/components/hkVideo.vue	62 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/views/video/components/js/hkVideo/hkModule.js	118 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/views/video/video.vue	7 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	static/hk/webVideoCtrl.js	9098 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 index.html

@@ -8,6 +8,9 @@
  </head>
  <body>
    <div id="app" style="box-sizing: border-box; height: 100vh;"></div>
    <script src="./static/hk/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="./static/hk/jsVideoPlugin-1.0.0.min.js" type="text/javascript"></script>
    <script src="./static/hk/webVideoCtrl.js" type="text/javascript"></script>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

 src/views/video/components/hkVideo.vue

New file
@@ -0,0 +1,62 @@
<script setup>
import {computed, onMounted, onUnmounted, ref, watch} from "vue";
import hkModule from "@/views/video/components/js/hkVideo/hkModule";
const props = defineProps({
    companyVideoData: {
        type: Object,
        default() {
            return {
                ip: "192.168.10.6",
                port: 80,
                username: "admin",
                password: "a123456789"
            };
        },
    },
});

// 海康威视模块
const {
    divPlugin, iWndowType, gIWndIndex,
    videoInitPlugin, clickLogin
} = hkModule();


onMounted(()=>{
    videoInitPlugin(()=>{
        clickLogin(props.companyVideoData);
    });
});

onUnmounted(()=>{
    WebVideoCtrl.I_Logout(props.companyVideoData.ip);
    WebVideoCtrl.I_GetPluginOBJECT().JS_DestroyPlugin();
});
</script>

<template>
    <div class="video-player">
        <div id="divPlugin" class="divPlugin" ref="divPlugin"></div>
    </div>
</template>

<style scoped>
.video-player {
    position: relative;
    width: 100%;
    height: 100%;
}
.divPlugin {
    width: 100%;
    height: 100%;
}
.hk-tools-wrapper {
    position: absolute;
    width: 300px;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #ffffff;
    z-index: 99;
}
</style>

 src/views/video/components/js/hkVideo/hkModule.js

New file
@@ -0,0 +1,118 @@
import {ref, watch} from "vue";
import slideMenu from "@/views/mainLayout/js/slideMenu";

/**
 *  海康威视模块内容
 */
const hkModule = ()=>{
  const {isCollapse} = slideMenu();
  const divPlugin = ref(null);
  const iWndowType = ref(1);
  const gIWndIndex = ref(0);
  const videoInitPlugin = (cbComplete)=>{
    let iRet = WebVideoCtrl.I_CheckPluginInstall();
    if (iRet === -1) {
      alert("您还未安装过插件，请安装WebComponentsKit.exe插件！");
      return;
    }
    initPlugin(cbComplete);
  }

  const initPlugin = (cbComplete)=>{
    WebVideoCtrl.I_InitPlugin({
      bWndFull: false, //是否支持单窗口双击全屏
      iWndowType: iWndowType.value,
      bDebugMode:true,
      cbSelWnd: function (xmlDoc){
        gIWndIndex.value = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
      },
      cbInitPluginComplete: function() {
        console.log("初始化插件完成");
        WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
        if(cbComplete && typeof cbComplete === "function") {
          setTimeout(()=>{
            cbComplete();
          }, 500);

        }
      }
    });
  }

  const clickLogin = (data)=>{
    console.log(data);
    WebVideoCtrl.I_Login(data.ip, 1, data.port, data.username, data.password, {
      timeout: 3000,
      success: function () {
        console.log("开始预览");  //不能删除
        setTimeout(()=>{
          initPlay(data.ip, data.port);
        }, 1000);
      },
      error: function () {
        console.log("login error");
      }
    });
  }

  const changeWndNum = (num)=>{
    let value = parseInt(num, 10);
    WebVideoCtrl.I_ChangeWndNum(value).then(() => {
      console.log("窗口分割成功！");
    }, (oError) => {
      console.log("窗口分割失败！");
    });
  };

  const initPlay = (ip, port)=>{
    let oWndInfo = WebVideoCtrl.I_GetWindowStatus(0);
    if (oWndInfo != null) {// 已经在播放了，先停止
      WebVideoCtrl.I_Stop({
        success: function () {
          startRealPlay(ip, port);
        }
      });
    } else {
      startRealPlay(ip, port);
    }

  }

  const startRealPlay = (ip, port)=>{
    WebVideoCtrl.I_StartRealPlay(ip, {
      iStreamType: 1,
      iChannelID: 1,
      bZeroChannel: false,
      success: function () {
        console.log("开始预览成功！");
      },
      error: function (oError) {
        console.log("开始预览失败！");
        console.log(oError);
      }
    });
  }

  watch(
    iWndowType,
    (newVal)=>{
      changeWndNum(newVal[0]);
    },
  );
  watch(
    isCollapse,
    (newVal)=>{
      //changeWndNum(newVal[0]);
      setTimeout(()=>{
        WebVideoCtrl.I_My_Resize();
      }, 0);

    },
  );

  return {
    divPlugin, iWndowType, gIWndIndex,
    videoInitPlugin, clickLogin, changeWndNum, initPlay
  };
}
export default hkModule;

 src/views/video/video.vue

@@ -1,12 +1,9 @@
<script setup>
import webVideoCtrl from "../../../static/hk/webVideoCtrl";

import HkVideo from "@/views/video/components/hkVideo.vue";
</script>

<template>
    <div >

    </div>
    <hk-video></hk-video>
</template>

<style scoped>

 static/hk/webVideoCtrl.js

Diff too large

			@@ -8,6 +8,9 @@
			</head>
			<body>
			<div id="app" style="box-sizing: border-box; height: 100vh;"></div>
			<script src="./static/hk/jquery-1.7.1.min.js" type="text/javascript"></script>
			<script src="./static/hk/jsVideoPlugin-1.0.0.min.js" type="text/javascript"></script>
			<script src="./static/hk/webVideoCtrl.js" type="text/javascript"></script>
			<script type="module" src="/src/main.js"></script>
			</body>
			</html>

New file
			@@ -0,0 +1,62 @@
			<script setup>
			import {computed, onMounted, onUnmounted, ref, watch} from "vue";
			import hkModule from "@/views/video/components/js/hkVideo/hkModule";
			const props = defineProps({
			companyVideoData: {
			type: Object,
			default() {
			return {
			ip: "192.168.10.6",
			port: 80,
			username: "admin",
			password: "a123456789"
			};
			},
			},
			});

			// 海康威视模块
			const {
			divPlugin, iWndowType, gIWndIndex,
			videoInitPlugin, clickLogin
			} = hkModule();


			onMounted(()=>{
			videoInitPlugin(()=>{
			clickLogin(props.companyVideoData);
			});
			});

			onUnmounted(()=>{
			WebVideoCtrl.I_Logout(props.companyVideoData.ip);
			WebVideoCtrl.I_GetPluginOBJECT().JS_DestroyPlugin();
			});
			</script>

			<template>
			<div class="video-player">
			<div id="divPlugin" class="divPlugin" ref="divPlugin"></div>
			</div>
			</template>

			<style scoped>
			.video-player {
			position: relative;
			width: 100%;
			height: 100%;
			}
			.divPlugin {
			width: 100%;
			height: 100%;
			}
			.hk-tools-wrapper {
			position: absolute;
			width: 300px;
			right: 0;
			top: 0;
			bottom: 0;
			background-color: #ffffff;
			z-index: 99;
			}
			</style>

New file
			@@ -0,0 +1,118 @@
			import {ref, watch} from "vue";
			import slideMenu from "@/views/mainLayout/js/slideMenu";

			/**
			* 海康威视模块内容
			*/
			const hkModule = ()=>{
			const {isCollapse} = slideMenu();
			const divPlugin = ref(null);
			const iWndowType = ref(1);
			const gIWndIndex = ref(0);
			const videoInitPlugin = (cbComplete)=>{
			let iRet = WebVideoCtrl.I_CheckPluginInstall();
			if (iRet === -1) {
			alert("您还未安装过插件，请安装WebComponentsKit.exe插件！");
			return;
			}
			initPlugin(cbComplete);
			}

			const initPlugin = (cbComplete)=>{
			WebVideoCtrl.I_InitPlugin({
			bWndFull: false, //是否支持单窗口双击全屏
			iWndowType: iWndowType.value,
			bDebugMode:true,
			cbSelWnd: function (xmlDoc){
			gIWndIndex.value = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
			},
			cbInitPluginComplete: function() {
			console.log("初始化插件完成");
			WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
			if(cbComplete && typeof cbComplete === "function") {
			setTimeout(()=>{
			cbComplete();
			}, 500);

			}
			}
			});
			}

			const clickLogin = (data)=>{
			console.log(data);
			WebVideoCtrl.I_Login(data.ip, 1, data.port, data.username, data.password, {
			timeout: 3000,
			success: function () {
			console.log("开始预览"); //不能删除
			setTimeout(()=>{
			initPlay(data.ip, data.port);
			}, 1000);
			},
			error: function () {
			console.log("login error");
			}
			});
			}

			const changeWndNum = (num)=>{
			let value = parseInt(num, 10);
			WebVideoCtrl.I_ChangeWndNum(value).then(() => {
			console.log("窗口分割成功！");
			}, (oError) => {
			console.log("窗口分割失败！");
			});
			};

			const initPlay = (ip, port)=>{
			let oWndInfo = WebVideoCtrl.I_GetWindowStatus(0);
			if (oWndInfo != null) {// 已经在播放了，先停止
			WebVideoCtrl.I_Stop({
			success: function () {
			startRealPlay(ip, port);
			}
			});
			} else {
			startRealPlay(ip, port);
			}

			}

			const startRealPlay = (ip, port)=>{
			WebVideoCtrl.I_StartRealPlay(ip, {
			iStreamType: 1,
			iChannelID: 1,
			bZeroChannel: false,
			success: function () {
			console.log("开始预览成功！");
			},
			error: function (oError) {
			console.log("开始预览失败！");
			console.log(oError);
			}
			});
			}

			watch(
			iWndowType,
			(newVal)=>{
			changeWndNum(newVal[0]);
			},
			);
			watch(
			isCollapse,
			(newVal)=>{
			//changeWndNum(newVal[0]);
			setTimeout(()=>{
			WebVideoCtrl.I_My_Resize();
			}, 0);

			},
			);

			return {
			divPlugin, iWndowType, gIWndIndex,
			videoInitPlugin, clickLogin, changeWndNum, initPlay
			};
			}
			export default hkModule;

			@@ -1,12 +1,9 @@
			<script setup>
			import webVideoCtrl from "../../../static/hk/webVideoCtrl";

			import HkVideo from "@/views/video/components/hkVideo.vue";
			</script>

			<template>
			<div >

			</div>
			<hk-video></hk-video>
			</template>

			<style scoped>