splittening

public/index.html

@@ -22,7 +22,7 @@
     <div>Video<label class="switch"><input onclick="toggle('video', this)" type="checkbox"><span class="slider round"></span></label></div>
     <div>Audio<label class="switch"><input onclick="toggle('audio', this)" type="checkbox"><span class="slider round"></span></label></div>
 
-    <video id="localVideo" autoplay muted ></video>
+    <video id="preview" autoplay muted ></video>
     <video id="remoteVideo" autoplay ></video>
 
     <br />

public/webrtc.js

@@ -72,28 +72,40 @@ class View {
    }
 }
 
+class Remote {
+   element = null;
+
+   constructor(id, stream) {
+      this.element = document.getElementById(id);
+      this.element.srcObject = stream;
+   }
+}
+
+class Preview {
+   element = null;
+
+   constructor(id, stream) {
+      this.element = document.getElementById(id);
+      this.element.srcObject = stream;
+   }
+}
+
 class Controller {
    static serverConnection;
 
-   constructor(address) {
+   constructor(address, cb) {
       Controller.serverConnection = new WebSocket(address);
+      Controller.serverConnection.onmessage = cb;
    }
 }
 
 class Entropy {
-   static localVideo = null;
+   static preview = null;
    static localStream = null;
-   static remoteVideo = null;
    static peerConnection = null;
+   static remote = null;
    
    static pageReady() {
-     Config.getUUID();
-   
-     Entropy.localVideo = document.getElementById('localVideo');
-     Entropy.remoteVideo = document.getElementById('remoteVideo');
-   
-     new Controller('wss://' + window.location.hostname + '/abc');
-     Controller.serverConnection.onmessage = Entropy.gotMessageFromServer;
    
      var constraints = {
        video: true,
@@ -101,21 +113,21 @@ class Entropy {
      };
    
      if(navigator.mediaDevices.getUserMedia) {
-       navigator.mediaDevices.getUserMedia(constraints).then(Entropy.getUserMediaSuccess).catch(View.error);
+       navigator.mediaDevices.getUserMedia(constraints)
+         .then((stream) => {
+            new Preview('preview', stream);
+            Entropy.localStream = stream;
+         })
+         .catch(View.error);
      } else {
        alert('Your browser does not support getUserMedia API');
      }
    }
    
-   static getUserMediaSuccess(stream) {
-     Entropy.localStream = stream;
-     Entropy.localVideo.srcObject = stream;
-   }
-   
    static start(isCaller) {
      Entropy.peerConnection = new RTCPeerConnection(Config.peerConnectionConfig);
      Entropy.peerConnection.onicecandidate = Entropy.gotIceCandidate;
-     Entropy.peerConnection.ontrack = Entropy.gotRemoteStream;
+     Entropy.peerConnection.ontrack = (event) => new Remote('remoteVideo', event.streams[0]);
      Entropy.peerConnection.addStream(Entropy.localStream);
    
      if(isCaller) {
@@ -168,31 +180,27 @@ class Entropy {
        })
        .catch(View.error);
    }
+}
 
-   static gotRemoteStream(event) {
+class Local {
-     View.log('got remote stream');
+   type = null;
-     Entropy.remoteVideo.srcObject = event.streams[0];
+
+   constructor(type) {
+      this.type = type;
    }
+
+   start() {}
+
+   stop() {}
 }
 
-function pageReady() {
+class Audio extends Local {
-   Entropy.pageReady();
 }
 
-function start(b, type = null) {
+class Video extends Local {
-   Entropy.start(b);
 }
 
-function toggle(type, caller) {
+class Text extends Local {
-      //start(true, type);
-   View.log(type, caller.checked, streams);
-   if (caller.checked && ! type in streams) {
-      View.log("start", type);
-      streams[type] = null;
-   } else if (type in streams) {
-      View.log("stop", type);
-      delete streams[type];
-   }
 }
 
 var streams = {}
@@ -202,3 +210,31 @@ for (var i in ["log", "info", "warn", "error"]) {
    console[i] = View[i];
 }
 window.console = console;
+
+function pageReady() {
+   Config.getUUID();
+   new Controller('wss://' + window.location.hostname + '/abc', Entropy.gotMessageFromServer);
+   Entropy.pageReady();
+}
+
+function start(b, type = null) {
+   Entropy.start(b);
+}
+
+function toggle(type, caller) {
+      //start(true, type);
+   var exists = Object.keys(streams);
+   if (caller.checked && ! (type in exists)) {
+      switch(type) {
+         case "audio":  streams[type] = new Audio(); break;
+         case "video":  streams[type] = new Video(); break;
+         case "text":   streams[type] = new Text(); break;
+         default:       View.error("unknown type", type); return;
+      }
+      streams[type].start();
+   } else if (type in exists) {
+      streams[type].stop();
+      delete streams[type];
+   }
+}
+