home.html
7.15 KB
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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title>视频会议-房间</title>
<script type="text/javascript" src="js/vue.js"></script>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/home.css">
<link rel="stylesheet" href="css/video.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/cerulean/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css" type="text/css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/6.4.0/adapter.min.js" ></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js" ></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.1.0/bootbox.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/video.js"></script>
<script type="text/javascript" src="js/iconfont.js"></script>
<script type="text/javascript" src="js/janus.js"></script>
<script type="text/javascript" src="js/util.js"></script>
</head>
<style type="text/css">
body {
background-color: #000000;
}
</style>
<body >
<div id="app">
<el-container>
<el-header>
<div class="home-header">
<span class="home-header-title">{{ roomName }}的视频会议 (ID：{{ roomId }} )</span>
</div>
</el-header>
<el-main>
<el-container style="background-color:#272C33;">
<el-aside width="77%" style="background-color: #272C33;">
<div style="height: 100%;">
<div style="padding: 24px 24px 24px 24px;height: 100%;">
<div style="margin-top: 10px;height: 95%; background-color: #000000;width: 100%;" align="center" @click="videoClick('mainVideo_html5_api');">
<div style="color:#FEBB35;position:absolute;z-index:100;font-size:26px;cursor:default;margin-top: 1%;left: 4%;width:150px;background:rgba(0,0,0,0.5);">
<span id="mainVideo_html5_api_span"></span>
</div>
<video id="mainVideo" style="width: 100%; height: 100%; object-fit: fill;" playsinline autoplay data-setup='{}' >
</video>
</div>
</div>
</div>
</el-aside>
<el-main style="margin-top: 15px;">
<div style="background-color: #000000;height: 23%;width: 100%;" @click="videoClick('sideVideo1_html5_api');" align="center">
<div style="color:#FEBB35;position:absolute;z-index:100;
font-size:18px;cursor:default;margin-top: 0.5%;left: 78%;width:110px;background:rgba(0,0,0,0.5);">
<span id="sideVideo1_html5_api_span"></span>
</div>
<video id="sideVideo1" style="width: 100%; height: 100%; object-fit: fill;" playsinline autoplay data-setup='{}'>
</video>
</div>
<p style="margin-top: 5px;">
<div style="background-color: #000000;height: 23%;width: 100%;" @click="videoClick('sideVideo2_html5_api');" align="center">
<div style="color:#FEBB35;position:absolute;z-index:100;font-size:18px;cursor:default;margin-top: 0.5%;left: 78%;width:110px;background:rgba(0,0,0,0.5);">
<span id="sideVideo2_html5_api_span"></span>
</div>
<video id="sideVideo2" style="width: 100%; height: 100%; object-fit: fill;" playsinline autoplay data-setup='{}' >
</video>
</div>
<!-- v-loading="true" element-loading-background="rgba(0, 0, 0, 0.8)" -->
</p>
<p style="margin-top: 5px;">
<div style="background-color: #000000;height: 23%;width: 100%;" @click="videoClick('sideVideo3_html5_api');" align="center">
<div style="color:#FEBB35;position:absolute;z-index:100;font-size:18px;cursor:default;margin-top: 0.5%;left: 78%;width:110px;background:rgba(0,0,0,0.5);">
<span id="sideVideo3_html5_api_span"></span>
</div>
<video id="sideVideo3" style="width: 100%; height: 100%; object-fit: fill;" playsinline autoplay data-setup='{}' >
</video>
</div>
</p>
<p style="margin-top: 5px;">
<div style="background-color: #000000;height: 23%;width: 100%;" @click="videoClick('sideVideo4_html5_api');" align="center">
<div style="color:#FEBB35;position:absolute;z-index:100;font-size:18px;cursor:pointer;margin-top: 0.5%;left: 78%;width:110px;background:rgba(0,0,0,0.5);">
<span id="sideVideo4_html5_api_span"></span>
</div>
<video id="sideVideo4" style="width: 100%; height: 100%; object-fit: fill;" playsinline autoplay data-setup='{}' >
</video>
</div>
</p>
</el-main>
</el-container>
</el-main>
<el-footer>
<el-row style="text-align: center;">
<el-col :span="4"><div class="grid-content"></div></el-col>
<el-col :span="16">
<div class="grid-content">
<el-row>
<el-col :span="4" v-for="(i,index) in iconList" :key="index">
<el-button v-if="index == 5" type='danger' class="icon-stop" @click="myOption(index);" :id="forId(index)">
<svg t="1586230534534" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1952" width="200" height="200"><path d="M934.528 554.325c-14.507 54.23-51.925 69.675-113.493 60.971-72.363-10.24-133.59-29.653-129.11-92.16 0 0 5.718-67.285-170.325-72.405-205.44-5.291-196.693 74.41-196.693 74.41-0.086 73.387-50.774 77.44-122.966 88.192-72.234 10.752-116.394-7.168-125.269-87.381-17.152-154.624 265.387-194.944 389.333-196.48 0 0 189.014-2.859 279.595 23.765l48.768 13.867c67.968 21.973 128.981 61.952 143.147 118.827 0 0 8.362 25.898-2.987 68.394z" fill="#ffffff" p-id="1953"></path></svg>
</el-button>
<el-button v-else type='info' class="icon-area" @click="myOption(index);" :id="forId(index)" style="line-height: -10px;">
<svg class="icon" aria-hidden="true"><use :xlink:href="i.sign"></use></svg>
</el-button>
</el-col>
</el-row>
</div>
</el-col>
<el-col :span="4"><div class="grid-content"></div></el-col>
</el-row>
<el-row style="margin-bottom: 50px;text-align: center;">
<el-col :span="4"><div class="grid-content"></div></el-col>
<el-col :span="16">
<div class="grid-content">
<el-row>
<el-col :span="4" v-for="(i,index) in iconList" :key="index"><el-button type="text" style="color: #FFFFFF;"> {{ i.name }}</el-button></el-col>
</el-row>
</div>
</el-col>
<el-col :span="4"><div class="grid-content"></div></el-col>
</el-row>
</el-footer>
</el-container>
</div>
</body>
<script type="text/javascript" src="js/home.js"></script>
<script type="text/javascript" src="js/operate.js"></script>
</html>