Merge pull request #3 from mmalmi/master

Typo fix, arrow functions instead of "placeholder = this"

README.md

@@ -14,7 +14,7 @@ For an example use the index.html and the .js folder. If you use the cdn method
   <script src="https://cdn.jsdelivr.net/gh/QVDev/GunStreamer@0.0.3/js/GunRecorder.js"></script>
   <script src="https://cdn.jsdelivr.net/gh/QVDev/GunStreamer@0.0.3/js/GunStreamer.js"></script>
   <script src="https://cdn.jsdelivr.net/gh/QVDev/GunStreamer@0.0.3/js/GunViewer.js"></script>
-  <script src="https://cdn.jsdelivr.net/gh/QVDev/GunStreamer@0.0.3/js/GunViewer.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/QVDev/GunStreamer@0.0.3/js/mediabuffer.js"></script>
  ... 
 </head>
 ```
@@ -85,7 +85,7 @@ const gunStreamer = new GunStreamer(streamer_config)
 var onRecordStateChange = function (state) {
   var recordButton = document.getElementById("record_button");
   switch (state) {
-    case recordSate.RECORDING:
+    case recordState.RECORDING:
       recordButton.innerText = "Stop recording";
       break;
     default:

bower.json

@@ -0,0 +1,13 @@
+{
+  "name": "gunstreamer",
+  "description": "Streaming component for GunDB",
+  "main": "js/GunViewer.js",
+  "authors": [
+    "QVDev"
+  ],
+  "license": "GPL v3",
+  "homepage": "https://github.com/QVDev/GunStreamer",
+  "ignore": [
+    "**/.*"
+  ]
+}

js/GunRecorder.js

@@ -1,4 +1,4 @@
-var recordSate = {
+var recordState = {
   STOPPED: 1,
   RECORDING: 2,
   NOT_AVAILABLE: 3,
@@ -20,17 +20,17 @@ class GunRecorder {
     this.cameraOptions = config.cameraOptions
     this.experimental = config.experimental;
     this.debug = config.debug;
-    this.setRecordingState(recordSate.UNKNOWN);
+    this.setRecordingState(recordState.UNKNOWN);
   }
 
   record() {
-    if (this.recordSate == recordSate.RECORDING) {
+    if (this.recordState == recordState.RECORDING) {
       this.mediaRecorder.stop();
       clearInterval(this.experimentalTimerId);
       this.changeRecordState();
-    } else if (this.recordSate == recordSate.STOPPED) {
-      this.mediaRecorder = new MediaRecorder(gunRecorder.video.captureStream(), this.recorderOptions);
-      this.mediaRecorder.ondataavailable = gunRecorder.onDataAvailable;
+    } else if (this.recordState == recordState.STOPPED) {
+      this.mediaRecorder = new MediaRecorder(this.video.captureStream(), this.recorderOptions);
+      this.mediaRecorder.ondataavailable = this.onDataAvailable;
       if (this.experimental) {
         this.experimentalTimerId = setInterval(this.experimentalTimer, this.recordInterval);
         this.mediaRecorder.start();
@@ -45,73 +45,71 @@ class GunRecorder {
 
   //This will use a custom timer to make intervals witb start and stop recorder decrease latency test
   experimentalTimer() {
-    if (gunRecorder.experimental) {
+    if (this.experimental) {
       // mediaRecorder.requestData() can we parse this manually?
-      gunRecorder.mediaRecorder.stop()
-      gunRecorder.mediaRecorder.start();
+      this.mediaRecorder.stop()
+      this.mediaRecorder.start();
     }
   }
 
   startCamera() {
-    if (this.recordSate == recordSate.RECORDING || this.recordSate == recordSate.STOPPED) {
+    if (this.recordState == recordState.RECORDING || this.recordState == recordState.STOPPED) {
       this.debugLog("Camera already started no need to do again");
       return;
     }
-    var gunRecorder = this;
     if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
-      navigator.mediaDevices.getUserMedia(this.cameraOptions).then(function (stream) {
-        gunRecorder.video.srcObject = stream;
-        gunRecorder.video.play();
+      navigator.mediaDevices.getUserMedia(this.cameraOptions).then(stream => {
+        this.video.srcObject = stream;
+        this.video.play();
       });
-      this.setRecordingState(recordSate.STOPPED);
+      this.setRecordingState(recordState.STOPPED);
     } else {
-      this.setRecordingState(recordSate.NOT_AVAILABLE);
+      this.setRecordingState(recordState.NOT_AVAILABLE);
     }
   }
 
   startScreenCapture() {
-    if (this.recordSate == recordSate.RECORDING || this.recordSate == recordSate.STOPPED) {
+    if (this.recordState == recordState.RECORDING || this.recordState == recordState.STOPPED) {
       this.debugLog("ScreenCast already started no need to do again");
       return;
     }
-    var gunRecorder = this;
     if (navigator.mediaDevices.getDisplayMedia && navigator.mediaDevices.getDisplayMedia) {
-      navigator.mediaDevices.getDisplayMedia(this.cameraOptions).then(function (desktopStream) {
-        navigator.mediaDevices.getUserMedia({ video: false, audio: true }).then(function (voiceStream) {
+      navigator.mediaDevices.getDisplayMedia(this.cameraOptions).then(desktopStream => {
+        navigator.mediaDevices.getUserMedia({ video: false, audio: true }).then(voiceStream => {
           let tracks = [desktopStream.getVideoTracks()[0], voiceStream.getAudioTracks()[0]]
           var stream = new MediaStream(tracks);
-          gunRecorder.video.srcObject = stream;
-          gunRecorder.video.play();
+          this.video.srcObject = stream;
+          this.video.play();
         });
       });
-      this.setRecordingState(recordSate.STOPPED);
+      this.setRecordingState(recordState.STOPPED);
     } else {
-      this.setRecordingState(recordSate.NOT_AVAILABLE);
+      this.setRecordingState(recordState.NOT_AVAILABLE);
     }
   }
 
   changeRecordState() {
-    switch (this.recordSate) {
-      case recordSate.STOPPED:
-        this.setRecordingState(recordSate.RECORDING);
+    switch (this.recordState) {
+      case recordState.STOPPED:
+        this.setRecordingState(recordState.RECORDING);
         break;
-      case recordSate.NOT_AVAILABLE:
+      case recordState.NOT_AVAILABLE:
         this.debugLog("Sorry camera not available")
         break;
-      case recordSate.UNKNOWN:
+      case recordState.UNKNOWN:
         this.debugLog("State is unknown check if camera is intialized")
         break;
       default:
-        this.setRecordingState(recordSate.STOPPED);
+        this.setRecordingState(recordState.STOPPED);
         break;
     }
   }
 
-  setRecordingState(recordSate) {
-    this.debugLog("STATE BEFORE::" + this.recordSate);
-    this.recordSate = recordSate;
-    this.onRecordStateChange(this.recordSate);
-    this.debugLog("STATE AFTER::" + this.recordSate);
+  setRecordingState(recordState) {
+    this.debugLog("STATE BEFORE::" + this.recordState);
+    this.recordState = recordState;
+    this.onRecordStateChange(this.recordState);
+    this.debugLog("STATE AFTER::" + this.recordState);
   }
 
   debugLog(logData) {

js/GunStreamer.js

@@ -29,14 +29,13 @@ class GunStreamer {
   }
 
   startWorker(url) {
-    var gunwriter = this;
     if (typeof (Worker) !== "undefined") {
       if (typeof (parseWorker) == "undefined") {
-        this.getRemoteWorker(url, function (worker) {
+        this.getRemoteWorker(url, worker => {
           parseWorker = worker;
           parseWorker.onmessage = e => {
             const message = e.data;
-            gunwriter.writeToGun(message);
+            this.writeToGun(message);
           };
         });
       }
@@ -80,10 +79,10 @@ class GunStreamer {
       var n = base64data.indexOf("H0O2dQH");
       this.debugLog("RAW::" + n + "::" + base64data);
     }
-    if (this.gunDB !== null && this.gunDB !== undefined) {
+    if (this.gunDB) {
       //Probably has to be changed to different data structure
-      user = gunDB.get(this.streamId).put({ initial: initialData, data: base64data, id: this.streamId, timestamp: lastUpdate, isSpeaking: false });
-      gunDB.get(this.dbRecord).set(user);
+      user = this.gunDB.get(this.streamId).put({ initial: initialData, data: base64data, id: this.streamId, timestamp: lastUpdate, isSpeaking: false });
+      this.gunDB.get(this.dbRecord).set(user);
     } else if (this.onStreamerData !== null && this.onStreamerData !== undefined) {
       this.onStreamerData({ initial: initialData, data: base64data, id: this.streamId, timestamp: lastUpdate, isSpeaking: false });
     }

js/GunViewer.js

@@ -14,11 +14,12 @@ class GunViewer {
         if (this.video !== null) {
             this.mediaBuffer.load();
             this.video.src = window.URL.createObjectURL(this.mediaSource);
-            this.mediaSource.addEventListener('sourceopen', function () {
-                this.sourceBuffer = this.addSourceBuffer(gunViewer.mimeType);
-                this.sourceBuffer.mode = 'sequence';
+            this.mediaSource.addEventListener('sourceopen', (event) => {
+                const mediaSource = event.target;
+                mediaSource.sourceBuffer = mediaSource.addSourceBuffer(this.mimeType);
+                mediaSource.sourceBuffer.mode = 'sequence';
                 // Get video segments and append them to sourceBuffer.
-                gunViewer.debugLog("Source is open and ready to append to sourcebuffer");
+                this.debugLog("Source is open and ready to append to sourcebuffer");
             });
         } else {
             this.debugLog("There is no video present with this ID");
@@ -27,40 +28,40 @@ class GunViewer {
 
     showDelay() {
         let currentTime = new Date().getTime();
-        if (gunViewer.lastTime != 0) {
-            var delay = (currentTime - gunViewer.lastTime) / 1000;
-            gunViewer.debugLog("current delay::" + delay);
-            gunViewer.mediaBuffer.addDelay(delay);
-            gunViewer.debugLog("Average Media delay::" + gunViewer.mediaBuffer.getAverageDelay());
+        if (this.lastTime != 0) {
+            var delay = (currentTime - this.lastTime) / 1000;
+            this.debugLog("current delay::" + delay);
+            this.mediaBuffer.addDelay(delay);
+            this.debugLog("Average Media delay::" + this.mediaBuffer.getAverageDelay());
         }
-        gunViewer.lastTime = currentTime;
+        this.lastTime = currentTime;
     }
 
     onStreamerData(userData) {
-        gunViewer.showDelay()
-        gunViewer.debugLog(userData);
-        if (gunViewer.video.readyState != 0) {
-            gunViewer.debugLog("regular data")
-            gunViewer.appendBuffer(userData.data);
+        this.showDelay()
+        this.debugLog(userData);
+        if (this.video.readyState != 0) {
+            this.debugLog("regular data")
+            this.appendBuffer(userData.data);
         } else {
-            gunViewer.debugLog("initial data")
-            gunViewer.appendBuffer(userData.initial);
+            this.debugLog("initial data")
+            this.appendBuffer(userData.initial);
         }
 
-        if (gunViewer.video.readyState >= 2 && gunViewer.video.paused) {
-            gunViewer.video.play();
+        if (this.video.readyState >= 2 && this.video.paused) {
+            this.video.play();
         }
     }
 
     appendBuffer(base64Data) {
         let byteCharacters = atob(base64Data);
-        let byteArray = gunViewer.str2ab(byteCharacters);
+        let byteArray = this.str2ab(byteCharacters);
 
-        if (!gunViewer.mediaSource.sourceBuffer.updating) {
-            gunViewer.debugLog("append to buffer")
-            gunViewer.mediaSource.sourceBuffer.appendBuffer(byteArray);
+        if (!this.mediaSource.sourceBuffer.updating) {
+            this.debugLog("append to buffer")
+            this.mediaSource.sourceBuffer.appendBuffer(byteArray);
         } else {
-            gunViewer.debugLog("BUFFER STILL BUSY")
+            this.debugLog("BUFFER STILL BUSY")
         }
 
         byteCharacters = null;
@@ -82,4 +83,4 @@ class GunViewer {
             console.log(logData);
         }
     }
-}
+}

js/integration.js

@@ -44,7 +44,7 @@ var streamer_config = {
   gun: gunDB,//Gun instance
   debug: false,//For debug logs
   onStreamerData: gunViewer.onStreamerData,//If you want manually handle the data manually
-  url: "https://cdn.jsdelivr.net/gh/QVDev/GunStreamer@0.0.6/js/parser_worker.js"//webworker load remote
+  url: "./parser_worker.js"
 }
 
 //GUN Streamer is the data side. It will convert data and write to GUN db
@@ -58,7 +58,7 @@ const gunStreamer = new GunStreamer(streamer_config)
 var onRecordStateChange = function (state) {
   var recordButton = document.getElementById("record_button");
   switch (state) {
-    case recordSate.RECORDING:
+    case recordState.RECORDING:
       recordButton.innerText = "Stop recording";
       break;
     default: