1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
| <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.5",
| port: 80,
| username: "admin",
| password: "a123456789"
| },
| {
| ip: "192.168.10.6",
| port: 80,
| username: "admin",
| password: "a123456789"
| },
| {
| ip: "192.168.10.4",
| port: 80,
| username: "admin",
| password: "a123456789"
| },
| {
| ip: "192.168.10.3",
| port: 80,
| username: "admin",
| password: "a123456789"
| }
| ];
| },
| },
| });
|
| // 海康威视模块
| const {
| divPlugin, iWndowType, gIWndIndex,
| videoInitPlugin, clickLogin
| } = hkModule();
|
| onMounted(()=>{
| for(let i=0; i<props.companyVideoData.length; i++) {
| let item = props.companyVideoData[i];
| WebVideoCtrl.I_Logout(item.ip+"_"+item.port);
| }
| videoInitPlugin(()=>{
| for(let i=0; i<props.companyVideoData.length; i++) {
| let item = props.companyVideoData[i];
| setTimeout(()=>{
| clickLogin(item, i);
| }, 1000);
| }
| });
| });
|
| onUnmounted(()=>{
| for(let i=0; i<props.companyVideoData.length; i++) {
| let item = props.companyVideoData[i];
| WebVideoCtrl.I_Logout(item.ip+"_"+item.port);
| }
| 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>
|
|
