Merge pull request #157 from grey-software/60FpsVideoStream

60 FPS Video Streaming
grey-software · Feb 7, 2020 · a4742c3 · a4742c3
2 parents cee22c5 + f18a38d
commit a4742c3
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 5 deletions.
diff --git a/extension/src/HomeView.vue b/extension/src/HomeView.vue
@@ -15,18 +15,26 @@
       @keydown.enter="startShare"
     ></v-text-field>
 
-    <v-checkbox 
+      <v-checkbox 
       style="margin-bottom: 0%; margin-top: -5%; margin-left: 5%;"
       label="Share Screen"
       color="primary"
       @change="toggleScreenShare"
       >
       </v-checkbox>
+
+      <v-switch
+      label="60 FPS"
+      style="margin-bottom: 0%; margin-left: 5%; margin-top: -5%;"
+      color="primary"
+      @change="toggle60FpsVideo"
+      >
+      </v-switch>
 
       <v-checkbox 
       style="margin-bottom: 0%; margin-top: -5%; margin-left: 5%;"
-      label="Distributed Streaming System (Experimental)"
-      color="primary"
+      label="Distributed Streaming (Experimental)"
+      color="red"
       @change="toggleDistributedStreaming"
       >
       </v-checkbox>
@@ -56,7 +64,7 @@ export default {
     ...mapState(["roomName", "roomNameValid", "roomNameInputErrorMessages"])
   },
   methods: {
-    ...mapActions(["randomRoomName", "startShare", "toggleScreenShare", "toggleDistributedStreaming"]),
+    ...mapActions(["randomRoomName", "startShare", "toggleScreenShare", "toggleDistributedStreaming", "toggle60FpsVideo"]),
     ...mapMutations(["setRoomName"])
   }
 };

diff --git a/extension/src/app.js b/extension/src/app.js
@@ -157,6 +157,11 @@ const store = new Vuex.Store({
             if(this.state.state === States.HOME) {
                 port.postMessage({ type: 'toggleDistributedStreaming', useDistributedStreaming: checked });
             }
+        },
+        toggle60FpsVideo(context, value) {
+            if(this.state.state === States.HOME) {
+                port.postMessage({ type: "toggle60Fps", selected: value });
+            }
         }
     }
 })
@@ -186,10 +191,13 @@ chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
         store.commit("setState", request.data);
         if(store.state.state === States.HOME) { 
             router.push({name: 'home'}).catch((err) => {});
+            // reset states of media variables to match state of selection controls
             store.dispatch("toggleScreenShare", false);
+            store.dispatch("toggle60FpsVideo", false);
         }
         else if(store.state.state === States.SHARING) { 
             router.push({name: "sharing"}).catch((err) => {});
+            app.$el.getElementsByClassName('v-application--wrap')[0].style.minHeight = "50vH"
         }
     }
 });
diff --git a/extension/src/js/background/index.js b/extension/src/js/background/index.js
@@ -1,6 +1,7 @@
 // used by client.
 import opus from './opus';
 
+var lastFPSSetting = 30;
 // ATTN: Uncomment accordingly for local/remote dev
 const ENDPOINT = "https://www.toonin.ml:8443/";
 const socket = io(ENDPOINT, { secure: true });
@@ -11,7 +12,12 @@ var remoteDestination,
     gainNode;
 const constraints = {
     video: false,
-    audio: true
+    audio: true,
+    videoConstraints: {
+        mandatory: {
+            minFrameRate: 60
+        }
+    }
 };
 // keep track of tab on which the extension is active.
 var state = "HOME";
@@ -75,10 +81,21 @@ chrome.runtime.onConnect.addListener(function (p) {
         }
         if(msg.type === "toggleScreenShare") {
             constraints.video = msg.isSharing;
+            if(!msg.isSharing) {
+                lastFPSSetting = constraints.videoConstraints.mandatory.minFrameRate;
+                constraints.videoConstraints = null;
+            } else {
+                constraints.videoConstraints = { mandatory: { minFrameRate: lastFPSSetting } }
+            }
         }
         if(msg.type === "toggleDistributedStreaming") {
             useDistributedStreaming = msg.useDistributedStreaming;
         }
+        if(msg.type === "toggle60Fps") {
+            if(constraints.videoConstraints !== null) {
+                constraints.videoConstraints.mandatory.minFrameRate = msg.selected ? 60 : 30;
+            }
+        }
     });
 });
 chrome.tabs.onRemoved.addListener(function (tabId, removed) {