guzijian / wvp-GB28181-pro · Commits

Commit 6e7cd084ee0b9f4e2238fd4c142c0a6fb9682ed3

Authored by xiaoxie
1 parent 44b7f67a

live页面适配palyer组件的修改

Inline Side-by-side
Showing 1 changed file with 271 additions and 267 deletions
web_src/src/components/live.vue
  View file @6e7cd08
1 <template> 1 <template>
2 <div id="devicePosition" style="width:100vw; height: 91vh"> 2 <div id="devicePosition" style="width:100vw; height: 91vh">
3 - <el-container v-loading="loading" style="height: 91vh;" element-loading-text="拼命加载中" > 3 + <el-container v-loading="loading" style="height: 91vh;" element-loading-text="拼命加载中">
4 <el-aside width="300px" style="background-color: #ffffff"> 4 <el-aside width="300px" style="background-color: #ffffff">
5 - <DeviceTree :clickEvent="clickEvent" :contextMenuEvent="contextMenuEvent" ></DeviceTree> 5 + <DeviceTree :clickEvent="clickEvent" :contextMenuEvent="contextMenuEvent"></DeviceTree>
6 </el-aside> 6 </el-aside>
7 <el-container> 7 <el-container>
8 <el-header height="5vh" style="text-align: left;font-size: 17px;line-height:5vh"> 8 <el-header height="5vh" style="text-align: left;font-size: 17px;line-height:5vh">
@@ -17,9 +17,8 @@ @@ -17,9 +17,8 @@
17 :style="liveStyle" :class="{redborder:playerIdx == (i-1)}" 17 :style="liveStyle" :class="{redborder:playerIdx == (i-1)}"
18 @click="playerIdx = (i-1)" 18 @click="playerIdx = (i-1)"
19 > 19 >
20 - <div v-if="!videoUrl[i-1]" style="color: #ffffff;font-size: 30px;font-weight: bold;">{{i}}</div>  
21 - <player v-else :ref="'player'+i" :videoUrl="videoUrl[i-1]" fluent autoplay :height="true"  
22 - :containerId="'player'+i" @screenshot="shot" @destroy="destroy"></player> 20 + <div v-if="!videoUrl[i-1]" style="color: #ffffff;font-size: 30px;font-weight: bold;">{{ i }}</div>
  21 + <player v-else :videoUrl="videoUrl[i-1]" fluent autoplay @screenshot="shot" @destroy="destroy"/>
23 </div> 22 </div>
24 </div> 23 </div>
25 </el-main> 24 </el-main>
@@ -29,296 +28,301 @@ @@ -29,296 +28,301 @@
29 </template> 28 </template>
30 29
31 <script> 30 <script>
32 - import uiHeader from "../layout/UiHeader.vue";  
33 - import player from './common/jessibuca.vue'  
34 - import DeviceTree from './common/DeviceTree.vue' 31 +import uiHeader from "../layout/UiHeader.vue";
  32 +import player from './common/jessibuca.vue'
  33 +import DeviceTree from './common/DeviceTree.vue'
35 34
36 - export default {  
37 - name: "live",  
38 - components: {  
39 - uiHeader, player, DeviceTree  
40 - },  
41 - data() {  
42 - return {  
43 - showVideoDialog: true,  
44 - hasAudio: false,  
45 - videoUrl:[''],  
46 - spilt:1,//分屏  
47 - playerIdx:0,//激活播放器 35 +export default {
  36 + name: "live",
  37 + components: {
  38 + uiHeader, player, DeviceTree
  39 + },
  40 + data() {
  41 + return {
  42 + showVideoDialog: true,
  43 + hasAudio: false,
  44 + videoUrl: [''],
  45 + spilt: 1,//分屏
  46 + playerIdx: 0,//激活播放器
48 47
49 - deviceList: [], //设备列表  
50 - currentDevice: {}, //当前操作设备对象 48 + deviceList: [], //设备列表
  49 + currentDevice: {}, //当前操作设备对象
51 50
52 - videoComponentList: [],  
53 - updateLooper: 0, //数据刷新轮训标志  
54 - currentDeviceChannelsLenth:0,  
55 - winHeight: window.innerHeight - 200,  
56 - currentPage:1,  
57 - count:15,  
58 - total:0,  
59 - getDeviceListLoading: false, 51 + videoComponentList: [],
  52 + updateLooper: 0, //数据刷新轮训标志
  53 + currentDeviceChannelsLenth: 0,
  54 + winHeight: window.innerHeight - 200,
  55 + currentPage: 1,
  56 + count: 15,
  57 + total: 0,
  58 + getDeviceListLoading: false,
60 59
61 - //channel  
62 - searchSrt: "",  
63 - channelType: "",  
64 - online: "",  
65 - channelTotal:0,  
66 - deviceChannelList:[],  
67 - loading:false  
68 - };  
69 - },  
70 - mounted() { 60 + //channel
  61 + searchSrt: "",
  62 + channelType: "",
  63 + online: "",
  64 + channelTotal: 0,
  65 + deviceChannelList: [],
  66 + loading: false
  67 + };
  68 + },
  69 + mounted() {
71 70
72 - },  
73 - created(){  
74 - this.checkPlayByParam()  
75 - }, 71 + },
  72 + created() {
  73 + this.checkPlayByParam()
  74 + },
76 75
77 - computed:{  
78 - liveStyle(){  
79 - if(this.spilt==1){  
80 - return {width:'100%',height:'100%'}  
81 - }else if(this.spilt==4){  
82 - return {width:'49%',height:'49%'}  
83 - }else if(this.spilt==9){  
84 - return {width:'32%',height:'32%'}  
85 - } 76 + computed: {
  77 + liveStyle() {
  78 + if (this.spilt == 1) {
  79 + return {width: '100%', height: '100%'}
  80 + } else if (this.spilt == 4) {
  81 + return {width: '49%', height: '49%'}
  82 + } else if (this.spilt == 9) {
  83 + return {width: '32%', height: '32%'}
86 } 84 }
87 - },  
88 - watch:{  
89 - spilt(newValue){  
90 - console.log("切换画幅;"+newValue)  
91 - let that = this  
92 - for (let i = 1; i <= newValue; i++) {  
93 - if(!that.$refs['player'+i]){  
94 - continue 85 + }
  86 + },
  87 + watch: {
  88 + spilt(newValue) {
  89 + console.log("切换画幅;" + newValue)
  90 + let that = this
  91 + for (let i = 1; i <= newValue; i++) {
  92 + if (!that.$refs['player' + i]) {
  93 + continue
  94 + }
  95 + this.$nextTick(() => {
  96 + if (that.$refs['player' + i] instanceof Array) {
  97 + that.$refs['player' + i][0].resize()
  98 + } else {
  99 + that.$refs['player' + i].resize()
95 } 100 }
96 - this.$nextTick(()=>{  
97 - if(that.$refs['player'+i] instanceof Array){  
98 - that.$refs['player'+i][0].resize()  
99 - }else {  
100 - that.$refs['player'+i].resize()  
101 - }  
102 - }) 101 + })
103 102
104 - }  
105 - window.localStorage.setItem('split',newValue)  
106 - },  
107 - '$route.fullPath':'checkPlayByParam' 103 + }
  104 + window.localStorage.setItem('split', newValue)
  105 + },
  106 + '$route.fullPath': 'checkPlayByParam'
  107 + },
  108 + destroyed() {
  109 + clearTimeout(this.updateLooper);
  110 + },
  111 + methods: {
  112 + destroy(idx) {
  113 + console.log(idx);
  114 + this.clear(idx.substring(idx.length - 1))
108 }, 115 },
109 - destroyed() {  
110 - clearTimeout(this.updateLooper); 116 + clickEvent: function (data) {
  117 + if (data.channelId && data.subCount == 0) {
  118 + this.sendDevicePush(data)
  119 + }
  120 + },
  121 + contextMenuEvent: function (data) {
  122 +
111 }, 123 },
112 - methods: {  
113 - destroy(idx) {  
114 - console.log(idx);  
115 - this.clear(idx.substring(idx.length-1))  
116 - },  
117 - clickEvent: function (data) {  
118 - if (data.channelId && data.subCount == 0) {  
119 - this.sendDevicePush(data) 124 + //通知设备上传媒体流
  125 + sendDevicePush: function (itemData) {
  126 + if (itemData.status === 0) {
  127 + this.$message.error('设备离线!');
  128 + return
  129 + }
  130 + this.save(itemData)
  131 + let deviceId = itemData.deviceId;
  132 + // this.isLoging = true;
  133 + let channelId = itemData.channelId;
  134 + console.log("通知设备推流1：" + deviceId + " : " + channelId);
  135 + let idxTmp = this.playerIdx
  136 + let that = this;
  137 + this.loading = true
  138 + this.$axios({
  139 + method: 'get',
  140 + url: '/api/play/start/' + deviceId + '/' + channelId
  141 + }).then(function (res) {
  142 + // that.isLoging = false;
  143 + console.log('=====----=====')
  144 + console.log(res)
  145 + if (res.data.code == 0 && res.data.data) {
  146 + itemData.playUrl = res.data.data.httpsFlv
  147 + that.setPlayUrl(res.data.data.ws_flv, idxTmp)
  148 + } else {
  149 + that.$message.error(res.data.msg);
120 } 150 }
121 - },  
122 - contextMenuEvent: function (data) { 151 + }).catch(function (e) {
  152 + }).finally(() => {
  153 + that.loading = false
  154 + });
  155 + },
  156 + setPlayUrl(url, idx) {
  157 + this.$set(this.videoUrl, idx, url)
  158 + let _this = this
  159 + setTimeout(() => {
  160 + window.localStorage.setItem('videoUrl', JSON.stringify(_this.videoUrl))
  161 + }, 100)
123 162
124 - },  
125 - //通知设备上传媒体流  
126 - sendDevicePush: function (itemData) {  
127 - if(itemData.status===0){  
128 - this.$message.error('设备离线!');  
129 - return 163 + },
  164 + checkPlayByParam() {
  165 + let {deviceId, channelId} = this.$route.query
  166 + if (deviceId && channelId) {
  167 + this.sendDevicePush({deviceId, channelId})
  168 + }
  169 + },
  170 + convertImageToCanvas(image) {
  171 + var canvas = document.createElement("canvas");
  172 + canvas.width = image.width;
  173 + canvas.height = image.height;
  174 + canvas.getContext("2d").drawImage(image, 0, 0);
  175 + return canvas;
  176 + },
  177 + shot(e) {
  178 + // console.log(e)
  179 + // send({code:'image',data:e})
  180 + var base64ToBlob = function (code) {
  181 + let parts = code.split(';base64,');
  182 + let contentType = parts[0].split(':')[1];
  183 + let raw = window.atob(parts[1]);
  184 + let rawLength = raw.length;
  185 + let uInt8Array = new Uint8Array(rawLength);
  186 + for (let i = 0; i < rawLength; ++i) {
  187 + uInt8Array[i] = raw.charCodeAt(i);
130 } 188 }
131 - this.save(itemData)  
132 - let deviceId = itemData.deviceId;  
133 - // this.isLoging = true;  
134 - let channelId = itemData.channelId;  
135 - console.log("通知设备推流1：" + deviceId + " : " + channelId );  
136 - let idxTmp = this.playerIdx  
137 - let that = this;  
138 - this.loading = true  
139 - this.$axios({  
140 - method: 'get',  
141 - url: '/api/play/start/' + deviceId + '/' + channelId  
142 - }).then(function (res) {  
143 - // that.isLoging = false;  
144 - console.log('=====----=====')  
145 - console.log(res)  
146 - if (res.data.code == 0 && res.data.data) {  
147 - itemData.playUrl = res.data.data.httpsFlv  
148 - that.setPlayUrl(res.data.data.ws_flv,idxTmp)  
149 - }else {  
150 - that.$message.error(res.data.msg);  
151 - }  
152 - }).catch(function (e) {  
153 - }).finally(()=>{  
154 - that.loading = false 189 + return new Blob([uInt8Array], {
  190 + type: contentType
155 }); 191 });
156 - },  
157 - setPlayUrl(url,idx){  
158 - this.$set(this.videoUrl,idx,url)  
159 - let _this = this  
160 - setTimeout(()=>{  
161 - window.localStorage.setItem('videoUrl',JSON.stringify(_this.videoUrl))  
162 - },100) 192 + };
  193 + let aLink = document.createElement('a');
  194 + let blob = base64ToBlob(e); //new Blob([content]);
  195 + let evt = document.createEvent("HTMLEvents");
  196 + evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错 事件类型，是否冒泡，是否阻止浏览器的默认行为
  197 + aLink.download = '截图';
  198 + aLink.href = URL.createObjectURL(blob);
  199 + aLink.click();
  200 + },
  201 + save(item) {
  202 + let dataStr = window.localStorage.getItem('playData') || '[]'
  203 + let data = JSON.parse(dataStr);
  204 + data[this.playerIdx] = item
  205 + window.localStorage.setItem('playData', JSON.stringify(data))
  206 + },
  207 + clear(idx) {
  208 + let dataStr = window.localStorage.getItem('playData') || '[]'
  209 + let data = JSON.parse(dataStr);
  210 + data[idx - 1] = null;
  211 + console.log(data);
  212 + window.localStorage.setItem('playData', JSON.stringify(data))
  213 + },
  214 + loadAndPlay() {
  215 + let dataStr = window.localStorage.getItem('playData') || '[]'
  216 + let data = JSON.parse(dataStr);
163 217
164 - },  
165 - checkPlayByParam(){  
166 - let {deviceId,channelId} = this.$route.query  
167 - if(deviceId && channelId){  
168 - this.sendDevicePush({deviceId,channelId}) 218 + data.forEach((item, i) => {
  219 + if (item) {
  220 + this.playerIdx = i
  221 + this.sendDevicePush(item)
169 } 222 }
170 - },  
171 - convertImageToCanvas(image) {  
172 - var canvas = document.createElement("canvas");  
173 - canvas.width = image.width;  
174 - canvas.height = image.height;  
175 - canvas.getContext("2d").drawImage(image, 0, 0);  
176 - return canvas;  
177 - },  
178 - shot(e){  
179 - // console.log(e)  
180 - // send({code:'image',data:e})  
181 - var base64ToBlob = function(code) {  
182 - let parts = code.split(';base64,');  
183 - let contentType = parts[0].split(':')[1];  
184 - let raw = window.atob(parts[1]);  
185 - let rawLength = raw.length;  
186 - let uInt8Array = new Uint8Array(rawLength);  
187 - for(let i = 0; i < rawLength; ++i) {  
188 - uInt8Array[i] = raw.charCodeAt(i);  
189 - }  
190 - return new Blob([uInt8Array], {  
191 - type: contentType  
192 - });  
193 - };  
194 - let aLink = document.createElement('a');  
195 - let blob = base64ToBlob(e); //new Blob([content]);  
196 - let evt = document.createEvent("HTMLEvents");  
197 - evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错 事件类型，是否冒泡，是否阻止浏览器的默认行为  
198 - aLink.download = '截图';  
199 - aLink.href = URL.createObjectURL(blob);  
200 - aLink.click();  
201 - },  
202 - save(item){  
203 - let dataStr = window.localStorage.getItem('playData') || '[]'  
204 - let data = JSON.parse(dataStr);  
205 - data[this.playerIdx] = item  
206 - window.localStorage.setItem('playData',JSON.stringify(data))  
207 - },  
208 - clear(idx) {  
209 - let dataStr = window.localStorage.getItem('playData') || '[]'  
210 - let data = JSON.parse(dataStr);  
211 - data[idx-1] = null;  
212 - console.log(data);  
213 - window.localStorage.setItem('playData',JSON.stringify(data))  
214 - },  
215 - loadAndPlay(){  
216 - let dataStr = window.localStorage.getItem('playData') || '[]'  
217 - let data = JSON.parse(dataStr);  
218 -  
219 - data.forEach((item,i)=>{  
220 - if(item){  
221 - this.playerIdx = i  
222 - this.sendDevicePush(item)  
223 - }  
224 - })  
225 - } 223 + })
226 } 224 }
227 - }; 225 + }
  226 +};
228 </script> 227 </script>
229 <style> 228 <style>
230 - .btn{  
231 - margin: 0 10px; 229 +.btn {
  230 + margin: 0 10px;
232 231
233 - }  
234 - .btn:hover{  
235 - color: #409EFF;  
236 - }  
237 - .btn.active{  
238 - color: #409EFF; 232 +}
239 233
240 - }  
241 - .redborder{  
242 - border: 2px solid red !important;  
243 - }  
244 - .play-box{  
245 - background-color: #000000;  
246 - border: 2px solid #505050;  
247 - display: flex;  
248 - align-items: center;  
249 - justify-content: center;  
250 - } 234 +.btn:hover {
  235 + color: #409EFF;
  236 +}
  237 +
  238 +.btn.active {
  239 + color: #409EFF;
  240 +
  241 +}
  242 +
  243 +.redborder {
  244 + border: 2px solid red !important;
  245 +}
  246 +
  247 +.play-box {
  248 + background-color: #000000;
  249 + border: 2px solid #505050;
  250 + display: flex;
  251 + align-items: center;
  252 + justify-content: center;
  253 +}
251 </style> 254 </style>
252 <style> 255 <style>
253 - .videoList {  
254 - display: flex;  
255 - flex-wrap: wrap;  
256 - align-content: flex-start;  
257 - } 256 +.videoList {
  257 + display: flex;
  258 + flex-wrap: wrap;
  259 + align-content: flex-start;
  260 +}
258 261
259 - .video-item {  
260 - position: relative;  
261 - width: 15rem;  
262 - height: 10rem;  
263 - margin-right: 1rem;  
264 - background-color: #000000;  
265 - } 262 +.video-item {
  263 + position: relative;
  264 + width: 15rem;
  265 + height: 10rem;
  266 + margin-right: 1rem;
  267 + background-color: #000000;
  268 +}
266 269
267 - .video-item-img {  
268 - position: absolute;  
269 - top: 0;  
270 - bottom: 0;  
271 - left: 0;  
272 - right: 0;  
273 - margin: auto;  
274 - width: 100%;  
275 - height: 100%;  
276 - } 270 +.video-item-img {
  271 + position: absolute;
  272 + top: 0;
  273 + bottom: 0;
  274 + left: 0;
  275 + right: 0;
  276 + margin: auto;
  277 + width: 100%;
  278 + height: 100%;
  279 +}
277 280
278 - .video-item-img:after {  
279 - content: "";  
280 - display: inline-block;  
281 - position: absolute;  
282 - z-index: 2;  
283 - top: 0;  
284 - bottom: 0;  
285 - left: 0;  
286 - right: 0;  
287 - margin: auto;  
288 - width: 3rem;  
289 - height: 3rem;  
290 - background-image: url("../assets/loading.png");  
291 - background-size: cover;  
292 - background-color: #000000;  
293 - } 281 +.video-item-img:after {
  282 + content: "";
  283 + display: inline-block;
  284 + position: absolute;
  285 + z-index: 2;
  286 + top: 0;
  287 + bottom: 0;
  288 + left: 0;
  289 + right: 0;
  290 + margin: auto;
  291 + width: 3rem;
  292 + height: 3rem;
  293 + background-image: url("../assets/loading.png");
  294 + background-size: cover;
  295 + background-color: #000000;
  296 +}
294 297
295 - .video-item-title {  
296 - position: absolute;  
297 - bottom: 0;  
298 - color: #000000;  
299 - background-color: #ffffff;  
300 - line-height: 1.5rem;  
301 - padding: 0.3rem;  
302 - width: 14.4rem;  
303 - } 298 +.video-item-title {
  299 + position: absolute;
  300 + bottom: 0;
  301 + color: #000000;
  302 + background-color: #ffffff;
  303 + line-height: 1.5rem;
  304 + padding: 0.3rem;
  305 + width: 14.4rem;
  306 +}
304 307
305 - .baidumap {  
306 - width: 100%;  
307 - height: 100%;  
308 - border: none;  
309 - position: absolute;  
310 - left: 0;  
311 - top: 0;  
312 - right: 0;  
313 - bottom: 0;  
314 - margin: auto;  
315 - } 308 +.baidumap {
  309 + width: 100%;
  310 + height: 100%;
  311 + border: none;
  312 + position: absolute;
  313 + left: 0;
  314 + top: 0;
  315 + right: 0;
  316 + bottom: 0;
  317 + margin: auto;
  318 +}
316 319
317 - /* 去除百度地图版权那行字 和 百度logo */  
318 - .baidumap > .BMap_cpyCtrl {  
319 - display: none !important;  
320 - }  
321 - .baidumap > .anchorBL {  
322 - display: none !important;  
323 - } 320 +/* 去除百度地图版权那行字 和 百度logo */
  321 +.baidumap > .BMap_cpyCtrl {
  322 + display: none !important;
  323 +}
  324 +
  325 +.baidumap > .anchorBL {
  326 + display: none !important;
  327 +}
324 </style> 328 </style>