serve tls traffic and static files to view webcam locally and open websocket conn

2020-05-03 23:09:46 -06:00
parent dda64da85e
commit 2388723fa5
7 changed files with 267 additions and 0 deletions
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
+    <script src="webrtc.js"></script>
+    <style>
+      video {
+         max-width: 100%;
+         min-width: 100%;
+         border: 1px solid black;
+      }
+    </style>
+  </head>
+
+  <body>
+    <video id="localVideo" autoplay muted ></video>
+    <video id="remoteVideo" autoplay ></video>
+
+    <br />
+
+    <input type="button" id="start" onclick="start(true)" value="Start Video"></input>
+
+    <script type="text/javascript">
+        pageReady();
+    </script>
+  </body>
+</html>
--- a/public/webrtc.js
+++ b/public/webrtc.js
@@ -0,0 +1,103 @@
+var localVideo;
+var localStream;
+var remoteVideo;
+var peerConnection;
+var uuid;
+var serverConnection;
+
+var peerConnectionConfig = {
+  'iceServers': [
+    {'urls': 'stun:stun.stunprotocol.org:3478'},
+    {'urls': 'stun:stun.l.google.com:19302'},
+  ]
+};
+
+function pageReady() {
+  uuid = createUUID();
+
+  localVideo = document.getElementById('localVideo');
+  remoteVideo = document.getElementById('remoteVideo');
+
+  serverConnection = new WebSocket('wss://' + window.location.hostname + '/abc');
+  serverConnection.onmessage = gotMessageFromServer;
+
+  var constraints = {
+    video: true,
+    audio: true,
+  };
+
+  if(navigator.mediaDevices.getUserMedia) {
+    navigator.mediaDevices.getUserMedia(constraints).then(getUserMediaSuccess).catch(errorHandler);
+  } else {
+    alert('Your browser does not support getUserMedia API');
+  }
+}
+
+function getUserMediaSuccess(stream) {
+  localStream = stream;
+  localVideo.srcObject = stream;
+}
+
+function start(isCaller) {
+  peerConnection = new RTCPeerConnection(peerConnectionConfig);
+  peerConnection.onicecandidate = gotIceCandidate;
+  peerConnection.ontrack = gotRemoteStream;
+  peerConnection.addStream(localStream);
+
+  if(isCaller) {
+    peerConnection.createOffer().then(createdDescription).catch(errorHandler);
+  }
+}
+
+function gotMessageFromServer(message) {
+  if(!peerConnection) start(false);
+
+  var signal = JSON.parse(message.data);
+
+  // Ignore messages from ourself
+  if(signal.uuid == uuid) return;
+
+  if(signal.sdp) {
+    peerConnection.setRemoteDescription(new RTCSessionDescription(signal.sdp)).then(function() {
+      // Only create answers in response to offers
+      if(signal.sdp.type == 'offer') {
+        peerConnection.createAnswer().then(createdDescription).catch(errorHandler);
+      }
+    }).catch(errorHandler);
+  } else if(signal.ice) {
+    peerConnection.addIceCandidate(new RTCIceCandidate(signal.ice)).catch(errorHandler);
+  }
+}
+
+function gotIceCandidate(event) {
+  if(event.candidate != null) {
+    serverConnection.send(JSON.stringify({'ice': event.candidate, 'uuid': uuid}));
+  }
+}
+
+function createdDescription(description) {
+  console.log('got description');
+
+  peerConnection.setLocalDescription(description).then(function() {
+    serverConnection.send(JSON.stringify({'sdp': peerConnection.localDescription, 'uuid': uuid}));
+  }).catch(errorHandler);
+}
+
+function gotRemoteStream(event) {
+  console.log('got remote stream');
+  remoteVideo.srcObject = event.streams[0];
+}
+
+function errorHandler(error) {
+  console.log(error);
+}
+
+// Taken from http://stackoverflow.com/a/105074/515584
+// Strictly speaking, it's not a real UUID, but it gets the job done here
+function createUUID() {
+  function s4() {
+    return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
+  }
+
+  return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
+}