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 1 <template>
2 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 4 <el-aside width="300px" style="background-color: #ffffff">
5   - <DeviceTree :clickEvent="clickEvent" :contextMenuEvent="contextMenuEvent" ></DeviceTree>
  5 + <DeviceTree :clickEvent="clickEvent" :contextMenuEvent="contextMenuEvent"></DeviceTree>
6 6 </el-aside>
7 7 <el-container>
8 8 <el-header height="5vh" style="text-align: left;font-size: 17px;line-height:5vh">
... ... @@ -17,9 +17,8 @@
17 17 :style="liveStyle" :class="{redborder:playerIdx == (i-1)}"
18 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 22 </div>
24 23 </div>
25 24 </el-main>
... ... @@ -29,296 +28,301 @@
29 28 </template>
30 29  
31 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 227 </script>
229 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 254 </style>
252 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 328 </style>
... ...