From c291f5d139d4b65316e9fc6424878a49fc3ce485 Mon Sep 17 00:00:00 2001
From: qiushui <wangyiming1031@aliyun.com>
Date: Tue, 28 Dec 2021 20:53:59 +0800
Subject: [PATCH] video

---
 public/antd_color.less                        |   2 +-
 public/index.html                             |   2 +
 public/video_play_plugins/webrtcplayer.js     | 121 ++++++++++++++
 src/views/realTimeMonitoring/VideoPlayer.vue  |   2 +-
 .../realTimeMonitoring/VideoPlayerBak.vue     | 157 ++++++++++++++++++
 src/views/realTimeMonitoring/index.vue        |  36 ++--
 src/views/realTimeMonitoring/webrtcplayer.js  | 122 ++++++++++++++
 7 files changed, 428 insertions(+), 14 deletions(-)
 create mode 100644 public/video_play_plugins/webrtcplayer.js
 create mode 100644 src/views/realTimeMonitoring/VideoPlayerBak.vue
 create mode 100644 src/views/realTimeMonitoring/webrtcplayer.js

diff --git a/public/antd_color.less b/public/antd_color.less
index b746b9c..bdf6854 100644
--- a/public/antd_color.less
+++ b/public/antd_color.less
@@ -1389,7 +1389,7 @@ tr.ant-table-expanded-row:hover {background: #fbfbfb;}
 .ant-tag-gold-inverse {color: #fff;background: #faad14;border-color: #faad14;}
 .ant-tag-cyan {color: #13c2c2;background: #e6fffb;border-color: #87e8de;}
 .ant-tag-cyan-inverse {color: #fff;background: #13c2c2;border-color: #13c2c2;}
-.ant-tag-lime {color: #a0d911;background: #fcffe6;border-color: #eaff8f;}
+.ant-tag-lime {color: #a0d911;background: color(~`colorPalette("@{text-color}", 1)`);border-color: #eaff8f;}
 .ant-tag-lime-inverse {color: #fff;background: #a0d911;border-color: #a0d911;}
 .ant-tag-green {color: #52c41a;background: #f6ffed;border-color: #b7eb8f;}
 .ant-tag-green-inverse {color: #fff;background: #52c41a;border-color: #52c41a;}
diff --git a/public/index.html b/public/index.html
index bb29b1d..b0c00e3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -10,6 +10,8 @@
     <link href="/video_play_plugins/video-js-cdn.min.css" rel="stylesheet">
     <script src="/video_play_plugins/video.js"></script>
     <script src="/video_play_plugins/videojs-contrib-hls.min.js"></script>
+    <script src="/video_play_plugins/videojs-contrib-hls.min.js"></script>
+    
     <title>垛机视觉系统</title>
 </head>
 
diff --git a/public/video_play_plugins/webrtcplayer.js b/public/video_play_plugins/webrtcplayer.js
new file mode 100644
index 0000000..f5282c8
--- /dev/null
+++ b/public/video_play_plugins/webrtcplayer.js
@@ -0,0 +1,121 @@
+class WebRtcPlayer {
+  static server = '127.0.0.1:8083';
+  webrtc = null;
+  video = null;
+  server = null;
+  codecLink = null;
+  rsdpLink = null;
+  stream = new MediaStream();
+  uuid = null;
+  options={
+    onStatusChange:null 
+  };
+
+  constructor(id, uuid, options={}) {
+    this.server = WebRtcPlayer.server;
+    this.video = document.getElementById(id);
+    this.uuid = uuid;
+    Object.assign(this.options, options);
+    this.createLinks();
+    this.play();
+  }
+
+  createLinks() {
+    this.codecLink = "//" + this.server + "/stream/codec/" + this.uuid
+    this.rsdpLink = "//" + this.server + "/stream/receiver/" + this.uuid
+  }
+
+  play() {
+    this.webrtc = new RTCPeerConnection({
+      iceServers: [{
+        urls: ["stun:stun.l.google.com:19302"]
+      }]
+    });
+    if(this.webrtc){
+
+    }else{
+      console.log("no")
+    }
+    this.webrtc.onnegotiationneeded = this.handleNegotiationNeeded.bind(this);
+    this.webrtc.ontrack = this.onTrack.bind(this);
+    fetch(this.codecLink)
+      .then((response) => {
+        response.json().then((data) => {
+          data.forEach((item, i) => {
+            this.webrtc.addTransceiver(item.Type, {
+              'direction': 'sendrecv'
+            });
+          });
+        });
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+
+    this.webrtc.onconnectionstatechange = () => {
+	   if(this.webrtc.connectionState == 'connected' || this.webrtc.connectionState == 'connecting'){
+		   
+	   }else{
+		   console.log(this.webrtc.connectionState)
+		   this.load(this.uuid);
+	   }
+      
+    }
+  }
+
+  async handleNegotiationNeeded() {
+    let offer = await this.webrtc.createOffer();
+    await this.webrtc.setLocalDescription(offer);
+    let formData = new FormData();
+    formData.append('suuid', this.uuid);
+    formData.append('data', btoa(this.webrtc.localDescription.sdp));
+    fetch(this.rsdpLink, {
+        method: 'POST',
+        body: formData
+      })
+      .then((response) => {
+        response.text().then((data) => {
+          this.webrtc.setRemoteDescription(new RTCSessionDescription({
+            type: 'answer',
+            sdp: atob(data)
+          }))
+        });
+      })
+      .catch((err) => {})
+  }
+
+  onTrack(event) {
+    this.stream.addTrack(event.track);
+    this.video.srcObject = this.stream;
+    this.video.play();
+  }
+
+  load(uuid) {
+    this.destroy();
+    this.uuid = uuid;
+    this.createLinks();
+    this.play();
+  }
+
+  destroy() {
+
+    this.webrtc.close();
+    this.webrtc = null;
+    this.video.srcObject = null;
+    this.stream = new MediaStream();
+  }
+
+  getImageUrl() {
+    let canvas = document.createElement("canvas");
+    canvas.width = this.video.videoWidth;
+    canvas.height = this.video.videoHeight;
+    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
+    let dataURL = canvas.toDataURL();
+    canvas.remove();
+    return dataURL;
+  }
+
+  static setServer(serv) {
+    this.server = serv;
+  }
+}
diff --git a/src/views/realTimeMonitoring/VideoPlayer.vue b/src/views/realTimeMonitoring/VideoPlayer.vue
index cb3313b..ac04300 100644
--- a/src/views/realTimeMonitoring/VideoPlayer.vue
+++ b/src/views/realTimeMonitoring/VideoPlayer.vue
@@ -17,7 +17,7 @@
 
 <script>
 import 'vue-video-player/src/custom-theme.css'
-import { videoPlayer } from 'vue-video-player'
+
 
 export default {
     name: 'VideoPlayer',
diff --git a/src/views/realTimeMonitoring/VideoPlayerBak.vue b/src/views/realTimeMonitoring/VideoPlayerBak.vue
new file mode 100644
index 0000000..cb3313b
--- /dev/null
+++ b/src/views/realTimeMonitoring/VideoPlayerBak.vue
@@ -0,0 +1,157 @@
+<template>
+    <video-player
+        v-if="showVideo"
+        ref="video-player"
+        class="vjs-custom-skin"
+        :options="playerOptions"
+        @pause="onPlayerPause"
+        @playing="onPlayerPlaying"
+        @timeupdate="onPlayerTimeupdate"
+        @ended="onPlayerEnded"
+        @error="onError"
+        @emptied="onEmptied"
+        @statechanged="playerStateChanged"
+        @loadeddata="onPlayerLoadeddata"
+    />
+</template>
+
+<script>
+import 'vue-video-player/src/custom-theme.css'
+import { videoPlayer } from 'vue-video-player'
+
+export default {
+    name: 'VideoPlayer',
+    props: {
+        src: {
+            type: String,
+            // default: 'http://cctvalih5ca.v.myalicdn.com/live/cctv6_1/index.m3u8',
+            required: true
+        }
+    },
+    components: {
+        videoPlayer
+    },
+    data() {
+        return {
+            timer: null, // 识别是否正常播放
+            currentTime: 0, // 当前播放时间
+            showVideo: true,
+            isPlay: false, // 是否正在播放
+            playerOptions: {
+                sources: [{
+                    type: 'application/x-mpegURL',
+                    withCredentials: false,
+                    src: this.src
+                }],
+                height: '100%',
+                language: 'zh-CN',
+                preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
+                techOrder: ['html5'],
+                flash: { hls: { withCredentials: false }},
+                html5: { hls: { withCredentials: false }},
+                autoplay: true, // 自动播放
+                muted: true,  // 默认情况下将会消除任何音频。
+                controls: true,
+                notSupportedMessage: '不支持的视频格式',
+                controlBar: {
+                    timeDivider: false, // 当前时间和持续时间的分隔符
+                    durationDisplay: false, // 显示持续时间
+                    remainingTimeDisplay: false, // 是否显示剩余时间功能
+                    fullscreenToggle: true // 是否显示全屏按钮
+                }
+            }
+        }
+    },
+    mounted() {
+        this.$nextTick(()=> {
+            const videoRef = this.$refs['video-player'];
+            // videoRef.player.play();
+            console.log(videoRef);
+        })
+    },
+    methods: {
+        // 暂停回调
+        onPlayerPause() {
+            this.isPlay && this.$emit('showModel');
+            // this.isPlay = false;
+            console.log('onPlayerPause');
+        },
+        // 已开始播放回调
+        onPlayerPlaying(...args) {
+            this.isPlay = true;
+            console.log('onPlayerPlaying');
+        },
+        // 视频播完回调
+        onPlayerEnded($event) {
+            this.isPlay = false;
+            console.log('onPlayerEnded');
+        },
+        onTimer() {
+            this.timer && clearTimeout(this.timer);
+            this.timer = setTimeout(() => {
+                this.onloadVideo();
+            }, 8 * 1000)
+        },
+        onloadVideo() {
+            console.log('重新加载了');
+            const videoRef = this.$refs['video-player'];
+            console.log(videoRef);
+            this.showVideo = false;
+            this.$nextTick(() => {
+                this.showVideo = true;
+            })
+        },
+        onError(data) {
+            console.log('onError');
+            console.log(data);
+        },
+        onEmptied(data) {
+            console.log('onEmptied');
+            console.log(data);
+        },
+        onPlayerLoadeddata($event) {
+            console.log('onPlayerLoadeddata')
+        },
+        playerStateChanged(playerCurrentState) {
+            // 视频正在等待中
+            if(playerCurrentState.waiting) {
+                // this.onTimer();
+            }else {
+                this.timer && clearTimeout(this.timer);
+            }
+            // console.log('player current update state', playerCurrentState)
+        },
+
+        // 播放
+        onPlayerTimeupdate($event) {
+            // 已经加载了多长时间的视频
+            const bufferedEnd = $event.bufferedEnd();
+            // 已经播放了多久
+            const currentTime = $event.currentTime();
+            this.currentTime = currentTime;
+            // this.onTimer();
+            // 还剩多少时间可以播放
+            const differTime = bufferedEnd - currentTime;
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.vjs-custom-skin /deep/{
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    .video-player, .video-js {
+        height: 100% !important;
+    }
+    // 屏蔽视频操作栏
+    .vjs-control-bar {
+        display: none !important;
+    }
+    // 加载中转圈
+    .vjs-loading-spinner {
+        // display: none;
+    }
+}
+</style>
diff --git a/src/views/realTimeMonitoring/index.vue b/src/views/realTimeMonitoring/index.vue
index d3fcc42..2d551cd 100644
--- a/src/views/realTimeMonitoring/index.vue
+++ b/src/views/realTimeMonitoring/index.vue
@@ -14,11 +14,12 @@
                         marginBottom: ((selectTab.videoStyleRow * selectTab.videoStyleColumn - index - 1) >= selectTab.videoStyleColumn) ? '20px': 0
                     }"
             >
-                <video-player
+                <video :id=item.id autoplay controls muted ></video>
+                <!-- <video-player
                     v-if="showVideo"
                     @showModel="showModel(item)"
                     :src="item.m3u8">
-                </video-player>
+                </video-player> -->
             </a-col>
         </a-row>
     </div>
@@ -26,11 +27,11 @@
 
 <script>
 
-import VideoPlayer from "./VideoPlayer";
+import WebRtcPlayer from "./webrtcplayer"
 export default {
     name: "historyMonitoring",
     components: {
-        VideoPlayer
+        //VideoPlayer
     },
     data() {
         return {
@@ -64,6 +65,7 @@ export default {
         }
         this.tabKey = sessionStorage.getItem('tabKey');
         this.getClientHeight();
+        
         // 监听界面尺寸变化
         // window.onresize = () => {
         //     this.getClientHeight();
@@ -84,19 +86,13 @@ export default {
                 if(res.code == 200) {
                     this.realTimeListData = res.data.reverse();
                     this.showVideo = true;
+                    this.autoPlay()
                 }
             }).catch(err => {
                 console.log(err)
             })
         },
-        playVideo(id, rtsp) {
-            // 设置url 播放 ---添加到事件队列在下一个tick执行，避免 TypeError: t.module.postMessage is not a function
-            this.$nextTick(() => {
-                this.$refs.video.forEach(video=> {
-                    video.play();
-                })
-            })
-        },
+        
         tabsChange(key) {
             sessionStorage.setItem('tabKey', key)
             this.reload()
@@ -106,6 +102,22 @@ export default {
                 this.$router.push({name: "realTimeMonitoringModel", query: {modelData: item}});
             })
         },
+        autoPlay(){
+            //WebRtcPlayer.setServer('localhost:8083');
+            console.log("here")
+            console.log(this.realTimeListData)
+            for(var a of this.realTimeListData){
+                console.log(a)
+                for (let b of a.cameras){
+                    console.log("www")
+                    console.log(b.id)
+                    let player = new WebRtcPlayer(b.id.toString(),'H264_AAC');
+                    player.load('H264_AAC');
+                }
+                
+            }
+        
+        }   
     },
 };
 </script>
diff --git a/src/views/realTimeMonitoring/webrtcplayer.js b/src/views/realTimeMonitoring/webrtcplayer.js
new file mode 100644
index 0000000..db142a6
--- /dev/null
+++ b/src/views/realTimeMonitoring/webrtcplayer.js
@@ -0,0 +1,122 @@
+class WebRtcPlayer {
+  static server = '127.0.0.1:8083';
+  webrtc = null;
+  video = null;
+  server = null;
+  codecLink = null;
+  rsdpLink = null;
+  stream = new MediaStream();
+  uuid = null;
+  options={
+    onStatusChange:null 
+  };
+
+  constructor(id, uuid, options={}) {
+    this.server = WebRtcPlayer.server;
+    this.video = document.getElementById(id);
+    this.uuid = uuid;
+    Object.assign(this.options, options);
+    this.createLinks();
+    this.play();
+  }
+
+  createLinks() {
+    this.codecLink = "//" + this.server + "/stream/codec/" + this.uuid
+    this.rsdpLink = "//" + this.server + "/stream/receiver/" + this.uuid
+  }
+
+  play() {
+    this.webrtc = new RTCPeerConnection({
+      iceServers: [{
+        urls: ["stun:stun.l.google.com:19302"]
+      }]
+    });
+    if(this.webrtc){
+
+    }else{
+      console.log("no")
+    }
+    this.webrtc.onnegotiationneeded = this.handleNegotiationNeeded.bind(this);
+    this.webrtc.ontrack = this.onTrack.bind(this);
+    fetch(this.codecLink)
+      .then((response) => {
+        response.json().then((data) => {
+          data.forEach((item, i) => {
+            this.webrtc.addTransceiver(item.Type, {
+              'direction': 'sendrecv'
+            });
+          });
+        });
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+
+    this.webrtc.onconnectionstatechange = () => {
+	   if(this.webrtc.connectionState == 'connected' || this.webrtc.connectionState == 'connecting'){
+		   
+	   }else{
+		   console.log(this.webrtc.connectionState)
+		   this.load(this.uuid);
+	   }
+      
+    }
+  }
+
+  async handleNegotiationNeeded() {
+    let offer = await this.webrtc.createOffer();
+    await this.webrtc.setLocalDescription(offer);
+    let formData = new FormData();
+    formData.append('suuid', this.uuid);
+    formData.append('data', btoa(this.webrtc.localDescription.sdp));
+    fetch(this.rsdpLink, {
+        method: 'POST',
+        body: formData
+      })
+      .then((response) => {
+        response.text().then((data) => {
+          this.webrtc.setRemoteDescription(new RTCSessionDescription({
+            type: 'answer',
+            sdp: atob(data)
+          }))
+        });
+      })
+      .catch((err) => {})
+  }
+
+  onTrack(event) {
+    this.stream.addTrack(event.track);
+    this.video.srcObject = this.stream;
+    this.video.play();
+  }
+
+  load(uuid) {
+    this.destroy();
+    this.uuid = uuid;
+    this.createLinks();
+    this.play();
+  }
+
+  destroy() {
+
+    this.webrtc.close();
+    this.webrtc = null;
+    this.video.srcObject = null;
+    this.stream = new MediaStream();
+  }
+
+  getImageUrl() {
+    let canvas = document.createElement("canvas");
+    canvas.width = this.video.videoWidth;
+    canvas.height = this.video.videoHeight;
+    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
+    let dataURL = canvas.toDataURL();
+    canvas.remove();
+    return dataURL;
+  }
+
+  static setServer(serv) {
+    this.server = serv;
+  }
+}
+export default WebRtcPlayer;