init

4 years ago · 3d70ecb6ea
parent 0c7cb22456
commit 3d70ecb6ea
4 changed files with 170 additions and 0 deletions
--- a/config.json
+++ b/config.json
@ -0,0 +1,4 @@
+{
+    "serverIp": "http://localhost:9007",
+    "webRtcIp": "192.168.8.140:8083"
+}
--- a/index.html
+++ b/index.html
@ -0,0 +1,47 @@
+<html>
+	<script src="webrtcplayer.js"></script>
+	<script src="jquery.min.js"></script>
+	<body>
+		<!-- <video id="camera1" class="camera" autoplay controls muted style="width:700px;"></video>
+		<video id="camera2" class="camera" autoplay controls muted style="width:700px;"></video> -->
+	</body>
+	<script>
+		  
+        var body = document.querySelector('body');
+        $(function(){
+          let ip ;
+          $.getJSON("config.json", function (data){
+            console.log(data)
+            ip = data["serverIp"]
+            let webRtc = data["webRtcIp"]
+            WebRtcPlayer.setServer(webRtc);
+            $.ajax({
+            url:ip+'/api/realTime/allCameras',
+            type:'get',
+            data:{},
+            dataType:'json',
+            success:function(data){
+              for(camera of data.data){
+                var video = document.createElement('video')
+                video.setAttribute('id',camera.id)
+                video.autoplay = true
+                video.controls = true
+                video.muted = true
+                video.style = 'width:700px;'
+                video.setAttribute('class','video')
+                body.appendChild(video)
+                let player = new WebRtcPlayer(camera.id,'camera'+camera.id);
+                player.load('camera'+camera.id)
+              }
+            },
+            error:function(){
+                console.log('请求出错！');
+            }
+          })
+          });
+          
+          
+        });
+		
+	</script>
+</html>
--- a/jquery.min.js
+++ b/jquery.min.js
--- a/webrtcplayer.js
+++ b/webrtcplayer.js
@ -0,0 +1,115 @@
+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"]
+      }]
+    });
+    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'){
+        console.log("uuid:"+this.uuid+" status:" + this.webrtc.connectionState)
+      }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;
+  }
+}