Merge pull request #22 from Temasys/development

Release 0.4.3.
Temasys · Dec 14, 2017 · 76b37bd · 76b37bd
2 parents f05da88 + cabcb33
commit 76b37bd
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 48 deletions.
diff --git a/README.md b/README.md
@@ -16,6 +16,7 @@ getaroom.io
 | `turnNode` | Configure custom Temasys TURN server URL (e.g. `turn:turn.temasys.io:3478`) |
 | `appkeyId` | Configure custom App key ID for testing purposes on `getaroom.io`. |
 | `appkeySecret` | Configure custom App key secret for the configured `appkeyId` for testing purposes on `getaroom.io`. |
+| `res` | Set to `fhd` to fetch FHD resolution, `hd` to fetch HD resolution, `vga` to fetch VGA resolution and `qvga` to fetch QVGA resolution. *If local video appears black, it means it failed to retrieve the resolution because it is not available.* |
 
 Setup / Development
 ----

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "getaroomio",
   "description": "FREE and hassle free audio/video real-time chat for desktop and mobile.",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "homepage": "http://github.com/serrynaimo/getaroom",
   "author": {
     "name": "Thomas Gorissen",

diff --git a/source/index.html b/source/index.html
@@ -55,7 +55,7 @@
       window.location.protocol = 'https:';
     }
 
-    window.location.searchParameters = (function () {
+    window.location.searchParameters = function () {
       var queries = {};
       var arr = (window.location.search || '').replace('?', '').split('&');
 
@@ -66,7 +66,7 @@
       }
 
       return queries;
-    })();
+    };
 
     if (!(window.history && window.history.pushState)) {
       window.historyNotSupported = true;

diff --git a/source/jsx/components/controls.jsx b/source/jsx/components/controls.jsx
@@ -41,6 +41,15 @@ define([
       this.props.state.room.flags.forceTurn = e.target.checked === true;
     },
 
+    /**
+     * Handles the select HD Resolution toggle checkbox.
+     * @method handleHDClick
+     * @for Controls
+     */
+    handleHDClick: function(e) {
+      this.props.state.room.flags.res = e.target.checked === true ? 'hd' : 'vga';
+    },
+
     /**
      * Handles when "Start a Call" button is clicked.
      * @method handleStartRoom
@@ -59,6 +68,10 @@ define([
         url += (url.indexOf('?') === -1 ? '?' : '&') + 'forceTurn=1';
       }
 
+      if (app.props.state.room.flags.res !== 'vga') {
+        url += (url.indexOf('?') === -1 ? '?' : '&') + 'res=' + app.props.state.room.flags.res;
+      }
+
       // Redirect instead for IE case if HTML5 history is not supported.
       if (window.historyNotSupported) {
         window.location.href = url;
@@ -226,6 +239,7 @@ define([
       var app = this;
       var mcuDom = document.getElementById('mcu');
       var forceTurnDom = document.getElementById('forceTurn');
+      var hdDom = document.getElementById('useHD');
 
       // Enable MCU toggle.
       if (mcuDom) {
@@ -236,6 +250,11 @@ define([
       if (forceTurnDom) {
         forceTurnDom.checked = app.props.state.room.flags.forceTurn;
       }
+
+      // Use HD toggle.
+      if (hdDom) {
+        hdDom.checked = app.props.state.room.flags.res === 'hd';
+      }
     },
 
     render: function() {
@@ -263,31 +282,37 @@ define([
           // Push description.
           outputHTML.push(
             <div className="description">
-                <p>
-                    Start a FREE call<br />with up to {Configs.maxUsers} people
-                </p>
-                <p>
-                    Just hit the &quot;Start a new call&quot; button below and share the link.<br /><br />
-                    This app is a <a href="https://temasys.io/platform" target="_blank">SkylinkJS</a> tech demo and you can fork the <a href="https://github.com/Temasys/getaroom" target="_blank">code on github</a>.
-                </p>
+              <p>
+                <small>A SkylinkJS Tech Demo</small><br /><br />
+                Start a FREE call<br />with up to {Configs.maxUsers} people
+              </p>
+              <p>
+                Just hit the &quot;Start a new call&quot; button below and share the link.<br /><br />
+                This app is a <a href="https://temasys.io/platform" target="_blank">SkylinkJS</a> tech demo and you can <a href="https://github.com/Temasys/getaroom" target="_blank">fork it on github</a>.
+              </p>
             </div>
           );
 
           // Push select MCU toggle checkbox.
           outputHTML.push(
             <div className="link top">
-                <input type="checkbox" id="mcu" name="mcu" onClick={app.handleMCUClick} /> <label for="mcu">Use Skylink Media Relay</label>
+              <input type="checkbox" id="mcu" name="mcu" onClick={app.handleMCUClick} /> <label for="mcu">Use Skylink Media Relay</label>
             </div>
           );
 
           // Push select force TURN toggle checkbox.
-          if (!app.props.state.room.flags.mcu) {
-            outputHTML.push(
-              <div className="link">
-                  <input type="checkbox" id="forceTurn" name="forceTurn" onClick={app.handleForceTURNClick} /> <label for="forceTurn">Force Skylink TURN Connections</label>
-              </div>
-            );
-          }
+          outputHTML.push(
+            <div className="link">
+              <input type="checkbox" id="forceTurn" name="forceTurn" onClick={app.handleForceTURNClick} /> <label for="forceTurn">Force Skylink TURN</label>
+            </div>
+          );
+
+          // Push select force TURN toggle checkbox.
+          outputHTML.push(
+            <div className="link">
+                <input type="checkbox" id="useHD" name="useHD" onClick={app.handleHDClick} /> <label for="useHD">Use HD Resolution</label>
+            </div>
+          );
           break;
 
         // -----------------------------
@@ -296,15 +321,15 @@ define([
           // Push "Leave Room" button.
           outputHTML.push(
             <button className="leaveRoom mainControl" onClick={app.handleLeaveRoom}>
-                Leave this call
+              Leave this call
             </button>
           );
 
           // Push share link textbox.
           outputHTML.push(
-            <div className="link">
-                Invite others to join this call at this link:<br />
-                <input type="text" value={location.toString()} onClick={app.handleLinkClick} readOnly />
+            <div className="link joinRoom">
+              Invite others to join this call at this link:<br />
+              <input type="text" value={location.toString()} onClick={app.handleLinkClick} readOnly />
             </div>
           );
 
@@ -356,9 +381,9 @@ define([
             // Push display name textbox.
             outputHTML.push(
               <div className="displayName">
-                  <span>Display Name</span>
-                  <input id="displayName" type="text" value={app.props.state.users.self.name} placeholder="Display Name"
-                      title="Your Display Name in Chat" onChange={app.handleDisplayName} />
+                <span>Display Name</span>
+                <input id="displayName" type="text" value={app.props.state.users.self.name} placeholder="Display Name"
+                  title="Your Display Name in Chat" onChange={app.handleDisplayName} />
               </div>
             );
           }
@@ -367,9 +392,9 @@ define([
       return (
         <section id="controls">
             <nav>
-                <button onClick={app.handleClose} className={app.props.state.state === Constants.AppState.IN_ROOM ? 'close' : ''}></button>
-                <button></button>
-                <button></button>
+              <button onClick={app.handleClose} className={app.props.state.state === Constants.AppState.IN_ROOM ? 'close' : ''}></button>
+              <button></button>
+              <button></button>
             </nav>
             <div>{outputHTML}</div>
         </section>

diff --git a/source/jsx/main.jsx b/source/jsx/main.jsx
@@ -96,7 +96,7 @@ define([
           index++;
         }
 
-        switch (window.location.searchParameters.media) {
+        switch (window.location.searchParameters().media) {
           case 'a':
             videoSources = false;
             break;
@@ -113,8 +113,14 @@ define([
         }
 
         Skylink.getUserMedia({
-          audio: audioSources ? { stereo: true, echoCancellation: true } : false,
-          video: videoSources
+          useExactConstraints: true,
+          audio: audioSources ? {
+            stereo: true,
+            echoCancellation: true
+          } : false,
+          video: videoSources ? (app.state.room.flags.res ? {
+            resolution: Skylink.VIDEO_RESOLUTION[app.state.room.flags.res.toUpperCase()] || {}
+          } : true) : false
         }, fn);
       });
     },
@@ -132,19 +138,21 @@ define([
       }
 
       room = room.toString();
+      var res = window.location.searchParameters().res;
 
       app.state.state = Constants.AppState.IN_ROOM;
       app.state.room.status = Constants.RoomState.IDLE;
       app.state.room.states.screensharing = false;
-      app.state.room.flags.mcu = ['1', 'true'].indexOf(window.location.searchParameters.mcu) > -1;
-      app.state.room.flags.forceTurn = ['1', 'true'].indexOf(window.location.searchParameters.forceTurn) > -1;
+      app.state.room.flags.mcu = ['1', 'true'].indexOf(window.location.searchParameters().mcu) > -1;
+      app.state.room.flags.forceTurn = ['1', 'true'].indexOf(window.location.searchParameters().forceTurn) > -1;
+      app.state.room.flags.res = ['hd', 'qvga', 'fhd'].indexOf(res) > -1 ? res : 'vga';
       app.state.show.controls = true;
       app.state.users.self.name = 'User ' + (new Date ()).getTime();
 
       app.setState(app.state);
 
       var config = {
-        appKey: window.location.searchParameters.appkeyId || (app.state.room.flags.mcu ? Configs.Skylink.apiMCUKey : Configs.Skylink.apiNoMCUKey),
+        appKey: window.location.searchParameters().appkeyId || (app.state.room.flags.mcu ? Configs.Skylink.apiMCUKey : Configs.Skylink.apiNoMCUKey),
         defaultRoom: room,
         forceTURN: !app.state.room.flags.mcu && app.state.room.flags.forceTurn,
         useEdgeWebRTC: true,
@@ -155,19 +163,19 @@ define([
           getUserMedia: 0,
           refreshConnection: 0
         },
-        socketServer: window.location.searchParameters.signalingNode || null,
-        iceServer: window.location.searchParameters.turnNode || null
+        socketServer: window.location.searchParameters().signalingNode || null,
+        iceServer: window.location.searchParameters().turnNode || null
       };
 
-      if (window.location.searchParameters.appkeyId && window.location.searchParameters.appkeySecret) {
+      if (window.location.searchParameters().appkeyId && window.location.searchParameters().appkeySecret) {
         var duration = 24;
         var start = (new Date ()).toISOString();
 
         config.credentials = {
           duration: duration,
           startDateTime: start,
           credentials: encodeURIComponent(CryptoJS.HmacSHA1(config.defaultRoom + '_' + duration + '_' + start,
-            window.location.searchParameters.appkeySecret).toString(CryptoJS.enc.Base64))
+            window.location.searchParameters().appkeySecret).toString(CryptoJS.enc.Base64))
         };
       }
 
@@ -241,7 +249,8 @@ define([
           },
           flags: {
             mcu: false,
-            forceTurn: false
+            forceTurn: false,
+            res: 'vga'
           },
           prevent: {
             screensharing: false,

diff --git a/source/styles/app.styl b/source/styles/app.styl
@@ -184,26 +184,27 @@ body > a {
         text-align center
         font-family Lobster
         font-size 4.2em
-        padding 140px 25px 5px
+        padding 100px 25px 5px
         text-shadow -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 2px 2px 0 #fff, 3px 3px 0 #fff, 4px 4px 0 #fff, 5px 5px 0 #fff
-        transition all .15s ease-in
+        transition all .25s ease-in
 
-        &.joinRoom 
+        &.joinRoom
             padding-top 160px
 
         &.recording
             padding-top 80px
-        
+
     p
         margin 0
-        padding 0 55px 35px
+        padding 0 55px 25px
 
     a
         color darken(color2, 20%)
 
     p:nth-child(2)
         font-weight 200
-        padding-top 40px
+        padding-top 10px
+        padding-bottom 25px
 
     .statusMessage
         padding 5px 15px!important
@@ -212,14 +213,20 @@ body > a {
 
     .displayName,
     .link
-        position absolute
-        bottom 90px
+        margin 15px 0 0 25%
         left 0
         right 0
         font-weight 200
+        text-align left
 
         &.top
-            bottom 120px
+            //bottom 120px
+
+        &.joinRoom
+            position absolute
+            bottom 90px
+            margin 0 auto
+            text-align center
 
         input[type=text]
             width 330px
@@ -241,6 +248,8 @@ body > a {
         left 25px
         right 25px
         border-radius 4px
+        position absolute
+        margin-left 0
 
         span,
         input[type=text]