From ea7e98b3b4f61268811a956d9d9e20a398673728 Mon Sep 17 00:00:00 2001
From: Ylian Saint-Hilaire <ysainthilaire@hotmail.com>
Date: Wed, 8 Jun 2022 10:47:23 -0700
Subject: [PATCH] Added BREACH attack mittigation, #4084

---
 MeshCentralServer.njsproj       |    1 +
 meshcentral-config-schema.json  |    1 +
 public/translate.bat            |    4 +-
 views/agentinvite.handlebars    |    2 +
 views/default-mobile.handlebars |    1 +
 views/default.handlebars        |    1 +
 views/download.handlebars       |    1 +
 views/download2.handlebars      |    1 +
 views/error404.handlebars       |    1 +
 views/invite.handlebars         |    1 +
 views/login-mobile.handlebars   |    1 +
 views/login.handlebars          |    1 +
 views/login2.handlebars         |    1 +
 views/message.handlebars        |    1 +
 views/message2.handlebars       |    1 +
 views/messenger.handlebars      | 1397 ++++++++++++++++---------------
 views/mstsc.handlebars          |    1 +
 views/player.handlebars         |    1 +
 views/sharing-mobile.handlebars |    1 +
 views/sharing.handlebars        |    1 +
 views/ssh.handlebars            |    1 +
 views/terms.handlebars          |    1 +
 views/xterm.handlebars          |    1 +
 webserver.js                    |    4 +
 24 files changed, 727 insertions(+), 700 deletions(-)

diff --git a/MeshCentralServer.njsproj b/MeshCentralServer.njsproj
index 45fa3f15..7cbdaf20 100644
--- a/MeshCentralServer.njsproj
+++ b/MeshCentralServer.njsproj
@@ -613,6 +613,7 @@
     <Content Include="views\messenger.handlebars" />
     <Content Include="views\mstsc.handlebars" />
     <Content Include="views\player.handlebars" />
+    <Content Include="views\sharing-mobile.handlebars" />
     <Content Include="views\sharing.handlebars" />
     <Content Include="views\ssh.handlebars" />
     <Content Include="views\terms-mobile.handlebars" />
diff --git a/meshcentral-config-schema.json b/meshcentral-config-schema.json
index 4f33a665..528883bf 100644
--- a/meshcentral-config-schema.json
+++ b/meshcentral-config-schema.json
@@ -120,6 +120,7 @@
         "amtManager": { "type": "boolean", "default": true, "description": "When enabled, MeshCentral will automatically monitor and manage Intel AMT devices." },
         "orphanAgentUser": { "type": "string", "default": null, "description": "If an agent attempts to connect to a unknown device group, automatically create a new device group and grant access to the specified user. Example: admin" },
         "agentIdleTimeout": { "type": "integer", "minimum": 1, "default": 150 ,"description": "How much time in seconds with no traffic from an agent before dropping the agent connection." },
+        "webPageLengthRandomization": { "type": "boolean", "default": true, "description": "Adds a random length string to generated web pages to mitigate a BREACH attack." },
         "compression": { "type": "boolean", "default": true, "description": "Enables GZIP compression for web requests." },
         "wsCompression": { "type": "boolean", "default": false, "description": "Enables server-side, websocket per-message deflate compression." },
         "agentWsCompression": { "type": "boolean", "default": true, "description": "Enables agent-side, websocket per-message deflate compression. wscompression must also be true for this to work." },
diff --git a/public/translate.bat b/public/translate.bat
index 2b94c869..6b064b3f 100644
--- a/public/translate.bat
+++ b/public/translate.bat
@@ -1,7 +1,7 @@
 @ECHO OFF
 CD ..\translate
 %LOCALAPPDATA%\..\Roaming\nvm\v12.13.0\node translate.js minifyall
-%LOCALAPPDATA%\..\Roaming\nvm\v12.13.0\node translate.js translateall
-%LOCALAPPDATA%\..\Roaming\nvm\v12.13.0\node translate.js extractall
+REM %LOCALAPPDATA%\..\Roaming\nvm\v12.13.0\node translate.js translateall
+REM %LOCALAPPDATA%\..\Roaming\nvm\v12.13.0\node translate.js extractall
 DEL ..\emails\translations\*-min_*
 Pause
\ No newline at end of file
diff --git a/views/agentinvite.handlebars b/views/agentinvite.handlebars
index e03bd6ec..902a7df8 100644
--- a/views/agentinvite.handlebars
+++ b/views/agentinvite.handlebars
@@ -167,6 +167,8 @@
     </div>
     <script>
         'use strict';
+
+        var random = '{{{randomlength}}}' // Random length string for BREACH mitigation
         var uiMode = parseInt(getstore('uiMode', 1));
         var webPageStackMenu = false;
         var webPageFullScreen = true;
diff --git a/views/default-mobile.handlebars b/views/default-mobile.handlebars
index 642c2a4a..6f469ea4 100644
--- a/views/default-mobile.handlebars
+++ b/views/default-mobile.handlebars
@@ -1192,6 +1192,7 @@
     <iframe name="fileUploadFrame" style=display:none></iframe>
     <script>
         'use strict';
+        var random = '{{{randomlength}}}' // Random length string for BREACH mitigation
 
         // Process server-side web state
         var webState = '{{{webstate}}}';
diff --git a/views/default.handlebars b/views/default.handlebars
index 2a98a866..4bba8c7a 100644
--- a/views/default.handlebars
+++ b/views/default.handlebars
@@ -1402,6 +1402,7 @@
     </div>
     <script type="text/javascript">
         'use strict';
+        var random = '{{{randomlength}}}' // Random length string for BREACH mitigation
 
         // Process server-side web state
         var webState = '{{{webstate}}}';
diff --git a/views/download.handlebars b/views/download.handlebars
index 54d01e50..db1ed07b 100644
--- a/views/download.handlebars
+++ b/views/download.handlebars
@@ -43,6 +43,7 @@
         </div>
     </div>
     <script>
+        var random = '{{{randomlength}}}' // Random length string for BREACH mitigation
         var messageid = parseInt('{{{messageid}}}');
         var fileurl = '{{{fileurl}}}';
         var filename = '{{{filename}}}';
diff --git a/views/download2.handlebars b/views/download2.handlebars
index f9e0f5bd..6633f248 100644
--- a/views/download2.handlebars
+++ b/views/download2.handlebars
@@ -57,6 +57,7 @@
         </tr>
     </table>
     <script>
+        var random = '{{{randomlength}}}' // Random length string for BREACH mitigation
         var messageid = parseInt('{{{messageid}}}');
         var fileurl = '{{{fileurl}}}';
         var filename = '{{{filename}}}';
diff --git a/views/error404.handlebars b/views/error404.handlebars
index 1e019ed7..a44e724d 100644
--- a/views/error404.handlebars
+++ b/views/error404.handlebars
@@ -148,6 +148,7 @@
     </div>
     <script nonce="{{{cspNonce}}}">
         'use strict';
+        var random = '{{{randomlength}}}' // Random length string for BREACH mitigation
         var uiMode = parseInt(getstore('uiMode', 1));
         var webPageStackMenu = false;
         var webPageFullScreen = true;
diff --git a/views/invite.handlebars b/views/invite.handlebars
index 984c7fc5..9a93f36b 100644
--- a/views/invite.handlebars
+++ b/views/invite.handlebars
@@ -103,6 +103,7 @@
     </div>
     <script>
         'use strict';
+        var random = '{{{randomlength}}}' // Random length string for BREACH mitigation
         var urlargs = parseUriArgs();
         if (urlargs.key && (isAlphaNumeric(urlargs.key) == false)) { delete urlargs.key; }
         var uiMode = parseInt(getstore('uiMode', 1));
diff --git a/views/login-mobile.handlebars b/views/login-mobile.handlebars
index d2d1dcf7..dbef92ab 100644
--- a/views/login-mobile.handlebars
+++ b/views/login-mobile.handlebars
@@ -311,6 +311,7 @@
     </div>
     <script>
         'use strict';
+        var random = '{{{randomlength}}}' // Random length string for BREACH mitigation
         var loginMode = '{{{loginmode}}}';
         var newAccount = '{{{newAccount}}}';
         var passhint = '{{{passhint}}}';
diff --git a/views/login.handlebars b/views/login.handlebars
index ab41e945..e364cd78 100644
--- a/views/login.handlebars
+++ b/views/login.handlebars
@@ -305,6 +305,7 @@
     </div>
     <script>
         'use strict';
+        var random = '{{{randomlength}}}' // Random length string for BREACH mitigation
         var passlogin = '{{{passlogin}}}';
         var passhint = '{{{passhint}}}';
         var loginMode = '{{{loginmode}}}';
diff --git a/views/login2.handlebars b/views/login2.handlebars
index 969db815..de42ce39 100644
--- a/views/login2.handlebars
+++ b/views/login2.handlebars
@@ -361,6 +361,7 @@
     </div>
     <script>
         'use strict';
+        var random = '{{{randomlength}}}' // Random length string for BREACH mitigation
         var welcomePictureFullScreen = (decodeURIComponent('{{{welcomePictureFullScreen}}}') === 'true');
         var passlogin = '{{{passlogin}}}';
         var passhint = '{{{passhint}}}';
diff --git a/views/message.handlebars b/views/message.handlebars
index 18429818..82caf372 100644
--- a/views/message.handlebars
+++ b/views/message.handlebars
@@ -43,6 +43,7 @@
         </div>
     </div>
     <script>
+        var random = '{{{randomlength}}}' // Random length string for BREACH mitigation
         var titleid = parseInt('{{{titleid}}}');
         var msgid = parseInt('{{{msgid}}}');
         var domainurl = decodeURIComponent('{{{domainurl}}}');
diff --git a/views/message2.handlebars b/views/message2.handlebars
index 7f59f8f5..20227f21 100644
--- a/views/message2.handlebars
+++ b/views/message2.handlebars
@@ -44,6 +44,7 @@
         </tr>
     </table>
     <script>
+        var random = '{{{randomlength}}}' // Random length string for BREACH mitigation
         var titleid = parseInt('{{{titleid}}}');
         var msgid = parseInt('{{{msgid}}}');
         var domainurl = decodeURIComponent('{{{domainurl}}}');
diff --git a/views/messenger.handlebars b/views/messenger.handlebars
index 9bf4cb53..84f824aa 100644
--- a/views/messenger.handlebars
+++ b/views/messenger.handlebars
@@ -60,745 +60,746 @@
     <canvas width="256" height="256" id="remoteImage" style="position:absolute;right:24px;top:45px;width:200px;height:200px;background-color:gray;border-radius:12px 12px 12px 12px;box-shadow:3px 3px 10px gray;display:none" />
     <input id="uploadFileInput" type="file" multiple style="display:none">
     <script type="text/javascript" onunload="onUnLoad()">
-            var userInputFocus = 0;
-            var socket = null;                  // Websocket object
-            var state = 0;                      // Connection state. 0 = Disconnected, 1 = Connecting, 2 = Connected.
-            var args = XparseUriArgs();
-            if (args.key && (isAlphaNumeric(args.key) == false)) { delete args.key; }
-            if (args.locale && (isAlphaNumeric(args.locale) == false)) { delete args.locale; }
-            var pushMessaging = (args.pmt == 1);
+        var random = '{{{randomlength}}}' // Random length string for BREACH mitigation
+        var userInputFocus = 0;
+        var socket = null;                  // Websocket object
+        var state = 0;                      // Connection state. 0 = Disconnected, 1 = Connecting, 2 = Connected.
+        var args = XparseUriArgs();
+        if (args.key && (isAlphaNumeric(args.key) == false)) { delete args.key; }
+        if (args.locale && (isAlphaNumeric(args.locale) == false)) { delete args.locale; }
+        var pushMessaging = (args.pmt == 1);
 
-            // WebRTC sessions and data, audio and video channels
-            var random = Math.random();         // Selected random, larger value initiates WebRTC.
-            var webrtcSessions = { };           // WebRTC objects: 0 for data, 1 for outbound audio/video, 2 for inbound audio/video
-            var webchannel = null;              // WebRTC data channel
-            var localStream = null;
-            var remoteStream = null;
-            var multiWebRtc = true;             // if set to true, multiple WebRTC sessions will be setup. If false, everything uses one session.
-            var userMediaSupport = 0;
-            var notification = null;
-            getUserMediaSupport(function (x) { userMediaSupport = x; })
-            var meshMessengerTitle = '{{{meshMessengerTitle}}}';
-            var meshMessengerImage = '{{{meshMessengerImage}}}';
-            var remoteUserName = '{{{username}}}';
-            var remoteUserId = '{{{userid}}}';
-            var webrtcconfiguration = '{{{webrtconfig}}}';
-            if (webrtcconfiguration == '') { webrtcconfiguration = null; } else { try { webrtcconfiguration = JSON.parse(decodeURIComponent(webrtcconfiguration)); } catch (ex) { console.log('Invalid WebRTC config: "' + webrtcconfiguration + '".'); webrtcconfiguration = null; } }
-            var windowFocus = true;
-            var chatTextSession = new Date().toString() + '\r\n';
-            var localOutText = false;
-            var remoteOutText = false;
-            var remoteImage = false;
-            var serverRecording = false;
-            var notificationSupport = true;
+        // WebRTC sessions and data, audio and video channels
+        var random = Math.random();         // Selected random, larger value initiates WebRTC.
+        var webrtcSessions = { };           // WebRTC objects: 0 for data, 1 for outbound audio/video, 2 for inbound audio/video
+        var webchannel = null;              // WebRTC data channel
+        var localStream = null;
+        var remoteStream = null;
+        var multiWebRtc = true;             // if set to true, multiple WebRTC sessions will be setup. If false, everything uses one session.
+        var userMediaSupport = 0;
+        var notification = null;
+        getUserMediaSupport(function (x) { userMediaSupport = x; })
+        var meshMessengerTitle = '{{{meshMessengerTitle}}}';
+        var meshMessengerImage = '{{{meshMessengerImage}}}';
+        var remoteUserName = '{{{username}}}';
+        var remoteUserId = '{{{userid}}}';
+        var webrtcconfiguration = '{{{webrtconfig}}}';
+        if (webrtcconfiguration == '') { webrtcconfiguration = null; } else { try { webrtcconfiguration = JSON.parse(decodeURIComponent(webrtcconfiguration)); } catch (ex) { console.log('Invalid WebRTC config: "' + webrtcconfiguration + '".'); webrtcconfiguration = null; } }
+        var windowFocus = true;
+        var chatTextSession = new Date().toString() + '\r\n';
+        var localOutText = false;
+        var remoteOutText = false;
+        var remoteImage = false;
+        var serverRecording = false;
+        var notificationSupport = true;
 
-            // File transfer state
-            var fileUploads = [];
-            var fileDownloads = {};
-            var currentFileUpload = null;
-            var currentFileDownload = null;
+        // File transfer state
+        var fileUploads = [];
+        var fileDownloads = {};
+        var currentFileUpload = null;
+        var currentFileDownload = null;
 
-            setInterval(resizeVideos, 1000);
-            function resizeVideos() {
-                var rheight = 0;
-                if (remoteStream != null) {
-                    rheight = ((320 * Q('remoteVideoCanvas').videoHeight) / Q('remoteVideoCanvas').videoWidth);
-                    QS('remoteVideo').height = 'calc(' + rheight + 'px + 30px)';
+        setInterval(resizeVideos, 1000);
+        function resizeVideos() {
+            var rheight = 0;
+            if (remoteStream != null) {
+                rheight = ((320 * Q('remoteVideoCanvas').videoHeight) / Q('remoteVideoCanvas').videoWidth);
+                QS('remoteVideo').height = 'calc(' + rheight + 'px + 30px)';
+            } else {
+                if (remoteImage == true) { rheight += 200; }
+            }
+            if (localStream != null) {
+                QS('localVideo').height = 'calc(' + ((160 * Q('localVideoCanvas').videoHeight) / Q('localVideoCanvas').videoWidth) + 'px + 30px)';
+                QS('localVideo').top = (rheight + 50 + ((remoteStream != null)?30:0)) + 'px';
+            }
+        }
+
+        // Set the title
+        var newTitle = '';
+        if (args.title) { newTitle = decodeURIComponent(args.title); document.title = document.title + ' - ' + decodeURIComponent(args.title); }
+        else if (meshMessengerTitle == '!') { newTitle = "MeshMessenger"; } else { newTitle = decodeURIComponent(meshMessengerTitle); }
+        newTitle = newTitle.split('{0}').join(decodeURIComponent(remoteUserName)).split('{1}').join(decodeURIComponent(remoteUserId));
+        QH('xtitle', EscapeHtml(newTitle).split(' ').join('&nbsp'));
+
+        // Setup web notifications
+        try { if (Notification) { QV('notifyButton', Notification.permission != 'granted'); } } catch (ex) { notificationSupport = false; }
+
+        // Track window focus
+        window.addEventListener('focus', function (event) { windowFocus = true; }, false);
+        window.addEventListener('blur', function (event) { windowFocus = false; }, false);
+
+        // Listen to drag & drop events
+        document.addEventListener('dragover', haltEvent, false);
+        document.addEventListener('dragleave', haltEvent, false);
+        document.addEventListener('drop', fileDrop, false);
+
+        document.onclick = function (e) {
+            if (notificationSupport) {
+                if (Notification) { QV('notifyButton', Notification.permission != 'granted'); }
+                if (notification != null) { notification.close(); notification = null; }
+            }
+        }
+
+        // Trap document key up events
+        document.onkeyup = function ondockeypress(e) {
+            if (notificationSupport) {
+                if (Notification) { QV('notifyButton', Notification.permission != 'granted'); }
+                if (notification != null) { notification.close(); notification = null; }
+            }
+            if (state == 2) {
+                if ((e.keyCode == 8) && (userInputFocus == 0)) {
+                    // Backspace
+                    var outtext = Q('xouttext').value;
+                    if (outtext.length > 0) { Q('xouttext').value = outtext.substring(0, outtext.length - 1); }
+                    updateLocalOutText();
+                }
+            }
+            if (userInputFocus == 0) { haltEvent(e); return false; }
+        }
+
+        // Trap document key presses
+        document.onkeypress = function ondockeypress(e) {
+            if (notificationSupport) {
+                if (Notification) { QV('notifyButton', Notification.permission != 'granted'); }
+                if (notification != null) { notification.close(); notification = null; }
+            }
+            if ((state == 2) || pushMessaging) {
+                if (e.keyCode == 13) {
+                    // Return
+                    xsend(e);
                 } else {
-                    if (remoteImage == true) { rheight += 200; }
-                }
-                if (localStream != null) {
-                    QS('localVideo').height = 'calc(' + ((160 * Q('localVideoCanvas').videoHeight) / Q('localVideoCanvas').videoWidth) + 'px + 30px)';
-                    QS('localVideo').top = (rheight + 50 + ((remoteStream != null)?30:0)) + 'px';
+                    // Any other key
+                    if ((userInputFocus == 0) && (e.key.length == 1)) { Q('xouttext').value = Q('xouttext').value + e.key; updateLocalOutText(); }
                 }
             }
+            if (userInputFocus == 0) { haltEvent(e); return false; }
+        }
 
-            // Set the title
-            var newTitle = '';
-            if (args.title) { newTitle = decodeURIComponent(args.title); document.title = document.title + ' - ' + decodeURIComponent(args.title); }
-            else if (meshMessengerTitle == '!') { newTitle = "MeshMessenger"; } else { newTitle = decodeURIComponent(meshMessengerTitle); }
-            newTitle = newTitle.split('{0}').join(decodeURIComponent(remoteUserName)).split('{1}').join(decodeURIComponent(remoteUserId));
-            QH('xtitle', EscapeHtml(newTitle).split(' ').join('&nbsp'));
+        function onUserInputFocus(x) { userInputFocus = x; }
+        function displayClear() { chatTextSession = new Date().toString() + '\r\n'; QH('xmsg', ''); cancelAllFileTransfers(); fileUploads = [], fileDownloads = {}; }
 
-            // Setup web notifications
-            try { if (Notification) { QV('notifyButton', Notification.permission != 'granted'); } } catch (ex) { notificationSupport = false; }
+        // Polyfill FileReader if needed
+        if (!FileReader.prototype.readAsBinaryString) {
+            FileReader.prototype.readAsBinaryString = function (fileData) {
+                var binary = '', self = this, reader = new FileReader();
+                reader.onload = function (e) {
+                    var bytes = new Uint8Array(reader.result);
+                    for (var i = 0; i < bytes.byteLength; i++) { binary += String.fromCharCode(bytes[i]); }
+                    self.onload({ target: { result: binary } });
+                }
+                reader.readAsArrayBuffer(fileData);
+            }
+        }
 
-            // Track window focus
-            window.addEventListener('focus', function (event) { windowFocus = true; }, false);
-            window.addEventListener('blur', function (event) { windowFocus = false; }, false);
+        // Detect if microphone & camera are present
+        // 0 = nomedia, 1 = miconly, 2 = mic&cam
+        function getUserMediaSupport(func) {
+            try {
+                navigator.mediaDevices.enumerateDevices().then(function (devices) {
+                    try {
+                        var mic = 0, cam = 0;
+                        devices.forEach(function (device) {
+                            if (device.kind === 'audioinput') { mic = 1; }
+                            if (device.kind === 'videoinput') { cam = 1; }
+                        });
+                        if (mic == 0) { func(0); }
+                        func(mic + cam);
+                    } catch (ex) { }
+                })
+            } catch (ex) { }
+        }
 
-            // Listen to drag & drop events
-            document.addEventListener('dragover', haltEvent, false);
-            document.addEventListener('dragleave', haltEvent, false);
-            document.addEventListener('drop', fileDrop, false);
+        // Display a control message
+        function displayControl(msg) {
+            chatTextSession += ((new Date()).toLocaleTimeString() + ' - ' + "Control" + '> ' + msg + '\r\n');
+            QA('xmsg', '<div style="clear:both"><div style="color:gray;float:left;margin-bottom:2px">' + EscapeHtml(msg) + '</div><div></div></div>');
+            Q('xmsgparent').scrollTop = Q('xmsgparent').scrollHeight;//Q('xmsg').scrollHeight;
+        }
 
-            document.onclick = function (e) {
-                if (notificationSupport) {
-                    if (Notification) { QV('notifyButton', Notification.permission != 'granted'); }
+        function displayLocalVideo(active) { QV('localVideo', active); adjustVideoWindows(); }
+        function displayRemoteVideo(active) { QV('remoteVideo', active); adjustVideoWindows(); }
+        function adjustVideoWindows() {
+            var lv = (QS('localVideo')['display'] != 'none');
+            var rv = (QS('remoteVideo')['display'] != 'none');
+            QV('remoteImage', (remoteImage == true) && (rv == false))
+            if (rv) { QS('localVideo')['top'] = '320px'; }
+            else if (remoteImage) { QS('localVideo')['top'] = '320px'; }
+            else { QS('localVideo')['top'] = '45px'; }
+            resizeVideos();
+        }
+
+        // Display a message from the remote user
+        function displayRemote(msg) {
+            chatTextSession += ((new Date()).toLocaleTimeString() + ' - ' + "Remote" + '> ' + msg + '\r\n');
+            QA('xmsg', '<div style="clear:both"><div class="remoteBubble">' + EscapeHtml(msg) + '</div><div></div></div>');
+            Q('xmsgparent').scrollTop = Q('xmsgparent').scrollHeight;
+
+            // If web notifications are granted, use it.
+            if (notificationSupport) {
+                if (Notification) { QV('notifyButton', Notification.permission != 'granted'); }
+                if (Notification && (windowFocus == false) && (Notification.permission == 'granted')) {
                     if (notification != null) { notification.close(); notification = null; }
+                    notification = new Notification(Q('xtitle').innerHTML.split('&nbsp;').join(' '), { body: msg });
                 }
             }
+        }
 
-            // Trap document key up events
-            document.onkeyup = function ondockeypress(e) {
-                if (notificationSupport) {
-                    if (Notification) { QV('notifyButton', Notification.permission != 'granted'); }
-                    if (notification != null) { notification.close(); notification = null; }
-                }
-                if (state == 2) {
-                    if ((e.keyCode == 8) && (userInputFocus == 0)) {
-                        // Backspace
-                        var outtext = Q('xouttext').value;
-                        if (outtext.length > 0) { Q('xouttext').value = outtext.substring(0, outtext.length - 1); }
-                        updateLocalOutText();
-                    }
-                }
-                if (userInputFocus == 0) { haltEvent(e); return false; }
+        // Display and send a message from the local user
+        function xsend(event) {
+            if (notificationSupport) {
+                if (notification != null) { notification.close(); notification = null; }
+                if (Notification) { QV('notifyButton', Notification.permission != 'granted'); }
             }
-
-            // Trap document key presses
-            document.onkeypress = function ondockeypress(e) {
-                if (notificationSupport) {
-                    if (Notification) { QV('notifyButton', Notification.permission != 'granted'); }
-                    if (notification != null) { notification.close(); notification = null; }
-                }
-                if ((state == 2) || pushMessaging) {
-                    if (e.keyCode == 13) {
-                        // Return
-                        xsend(e);
-                    } else {
-                        // Any other key
-                        if ((userInputFocus == 0) && (e.key.length == 1)) { Q('xouttext').value = Q('xouttext').value + e.key; updateLocalOutText(); }
-                    }
-                }
-                if (userInputFocus == 0) { haltEvent(e); return false; }
-            }
-
-            function onUserInputFocus(x) { userInputFocus = x; }
-            function displayClear() { chatTextSession = new Date().toString() + '\r\n'; QH('xmsg', ''); cancelAllFileTransfers(); fileUploads = [], fileDownloads = {}; }
-
-            // Polyfill FileReader if needed
-            if (!FileReader.prototype.readAsBinaryString) {
-                FileReader.prototype.readAsBinaryString = function (fileData) {
-                    var binary = '', self = this, reader = new FileReader();
-                    reader.onload = function (e) {
-                        var bytes = new Uint8Array(reader.result);
-                        for (var i = 0; i < bytes.byteLength; i++) { binary += String.fromCharCode(bytes[i]); }
-                        self.onload({ target: { result: binary } });
-                    }
-                    reader.readAsArrayBuffer(fileData);
-                }
-            }
-
-            // Detect if microphone & camera are present
-            // 0 = nomedia, 1 = miconly, 2 = mic&cam
-            function getUserMediaSupport(func) {
-                try {
-                    navigator.mediaDevices.enumerateDevices().then(function (devices) {
-                        try {
-                            var mic = 0, cam = 0;
-                            devices.forEach(function (device) {
-                                if (device.kind === 'audioinput') { mic = 1; }
-                                if (device.kind === 'videoinput') { cam = 1; }
-                            });
-                            if (mic == 0) { func(0); }
-                            func(mic + cam);
-                        } catch (ex) { }
-                    })
-                } catch (ex) { }
-            }
-
-            // Display a control message
-            function displayControl(msg) {
-                chatTextSession += ((new Date()).toLocaleTimeString() + ' - ' + "Control" + '> ' + msg + '\r\n');
-                QA('xmsg', '<div style="clear:both"><div style="color:gray;float:left;margin-bottom:2px">' + EscapeHtml(msg) + '</div><div></div></div>');
-                Q('xmsgparent').scrollTop = Q('xmsgparent').scrollHeight;//Q('xmsg').scrollHeight;
-            }
-
-            function displayLocalVideo(active) { QV('localVideo', active); adjustVideoWindows(); }
-            function displayRemoteVideo(active) { QV('remoteVideo', active); adjustVideoWindows(); }
-            function adjustVideoWindows() {
-                var lv = (QS('localVideo')['display'] != 'none');
-                var rv = (QS('remoteVideo')['display'] != 'none');
-                QV('remoteImage', (remoteImage == true) && (rv == false))
-                if (rv) { QS('localVideo')['top'] = '320px'; }
-                else if (remoteImage) { QS('localVideo')['top'] = '320px'; }
-                else { QS('localVideo')['top'] = '45px'; }
-                resizeVideos();
-            }
-
-            // Display a message from the remote user
-            function displayRemote(msg) {
-                chatTextSession += ((new Date()).toLocaleTimeString() + ' - ' + "Remote" + '> ' + msg + '\r\n');
-                QA('xmsg', '<div style="clear:both"><div class="remoteBubble">' + EscapeHtml(msg) + '</div><div></div></div>');
+            var outtext = Q('xouttext').value;
+            if (outtext.length > 0) {
+                chatTextSession += ((new Date()).toLocaleTimeString() + ' - ' + "Local" + '> ' + outtext + '\r\n');
+                QA('xmsg', '<div style="clear:both"><div class="localBubble">' + EscapeHtml(outtext) + '</div><div></div></div>');
                 Q('xmsgparent').scrollTop = Q('xmsgparent').scrollHeight;
+                if ((state == 2) || pushMessaging) { send({ action: 'chat', msg: outtext }); }
+                Q('xouttext').value = '';
+                Q('xouttext').focus();
+                localOutText = false;
+            }
+        }
 
-                // If web notifications are granted, use it.
-                if (notificationSupport) {
-                    if (Notification) { QV('notifyButton', Notification.permission != 'granted'); }
-                    if (Notification && (windowFocus == false) && (Notification.permission == 'granted')) {
-                        if (notification != null) { notification.close(); notification = null; }
-                        notification = new Notification(Q('xtitle').innerHTML.split('&nbsp;').join(' '), { body: msg });
+        function haltEvent(e) { if (e.preventDefault) e.preventDefault(); if (e.stopPropagation) e.stopPropagation(); return false; }
+
+        // Update user controls
+        function updateControls() {
+            QE('sendButton', (state == 2) || pushMessaging);
+            QE('clearButton', (state == 2) || pushMessaging);
+            QE('xouttext', (state == 2) || pushMessaging);
+            QV('fileButton', state == 2);
+            QV('camButton', webchannel && webchannel.ok && !localStream && (userMediaSupport == 2));
+            QV('micButton', webchannel && webchannel.ok && !localStream && (userMediaSupport > 0));
+            QV('hangupButton', webchannel && webchannel.ok && localStream);
+            updateLocalOutText();
+        }
+
+        // This is the WebRTC setup
+        function startWebRTC(id, startDataChannel) {
+            if ((webrtcSessions[0] != null) && (multiWebRtc == false)) { return webrtcSessions[0]; };
+
+            // Setup the WebRTC object
+            var webrtc = null;
+            if (typeof RTCPeerConnection !== 'undefined') { webrtc = new RTCPeerConnection(webrtcconfiguration); }
+            else if (typeof webkitRTCPeerConnection !== 'undefined') { webrtc = new webkitRTCPeerConnection(webrtcconfiguration); }
+            if (webrtc == null) return null; // No WebRTC support.
+
+            webrtc.id = id;
+            webrtc.onicecandidate = function (e) { try { if (e.candidate != null) { sendws({ action: 'webRtcIce', ice: e.candidate, id: this.id }); } } catch (ex) { } }
+            webrtc.oniceconnectionstatechange = function () { if (webrtc && webrtc.iceConnectionState == 'failed') { webrtc.close(); if (webrtcSessions[webrtc.id]) { delete webrtcSessions[webrtc.id]; } } }
+            webrtc.ondatachannel = function (ev) {
+                //console.log('ondatachannel');
+                webchannel = ev.channel;
+                webchannel.onmessage = function (event) { processMessage(event.data, 2); };
+                webchannel.onopen = function () { webchannel.ok = true; updateControls(); if (serverRecording == false) { sendws({ action: 'rtcSwitch', v: 0 }); } };
+                webchannel.onclose = function (event) { if (webchannel && webchannel.ok) { disconnect(); } else { hangUpButtonClick(0); } }
+            }
+            webrtc.onnegotiationneeded = function (event) {
+                if (webrtc.holdTimer != null) return;
+                webrtc.holdTimer = setTimeout(function () { // This time is needed to keep Chrome from being to excited. Wait until we add all tracks before kicking this off.
+                    //console.log('onnegotiationneeded', id);
+                    webrtc.holdTimer = null;
+                    webrtc.createOffer(function (offer) { /*console.log('offer', offer.sdp.length);*/ webrtc.setLocalDescription(offer, function () { sendws({ action: 'webRtcSdp', sdp: offer, id: id }); }, function () { hangUpButtonClick(id); }); }, function () { hangUpButtonClick(id); });
+                }, 20);
+            }
+            webrtc.ontrack = function (event) {
+                //console.log('ontrack', id);
+                QV('remoteClickToView', false);
+                var video = Q('remoteVideoCanvas');
+                video.srcObject = remoteStream = event.streams[0];
+                video.onloadedmetadata = function (e) {
+                    var promise = video.play();
+                    if (promise !== undefined) {
+                        promise.then(function() {
+                            // Video start ok
+                        }).catch(function(err) {
+                            // Video start error, display a play button
+                            QV('remoteClickToView', true);
+                        })
+                    }
+                };
+                displayRemoteVideo(true);
+            }
+            //webrtc.onremovetrack = function (event) { console.log('onremovetrack'); }
+            //webrtc.onicegatheringstatechange = function (event) { console.log('onicegatheringstatechange', event); }
+            //webrtc.onsignalingstatechange = function (event) { console.log('onsignalingstatechange', event); }
+
+            // Initiate the WebRTC offer or handle the offer from the peer.
+            if (startDataChannel == true) {
+                webchannel = webrtc.createDataChannel('DataChannel', {}); // { ordered: false, maxRetransmits: 2 }
+                webchannel.onmessage = function (event) { processMessage(event.data, 2); };
+                webchannel.onopen = function () { webchannel.ok = true; updateControls(); if (serverRecording == false) { sendws({ action: 'rtcSwitch', v: 0 }); } };
+                webchannel.onclose = function (event) { if (webchannel && webchannel.ok) { disconnect(); } else { hangUpButtonClick(0); } }
+            }
+
+            webrtcSessions[id] = webrtc;
+            return webrtc;
+        }
+
+        function remotePlay() { QV('remoteClickToView', false); Q('remoteVideoCanvas').play(); }
+
+        function webRtcHandleOffer(id, description) {
+            //console.log('webRtcHandleOffer', description.sdp.length);
+            var webrtc = webrtcSessions[id];
+            if (webrtc) {
+                webrtc.setRemoteDescription(new RTCSessionDescription(description), function () {
+                    if (description.type == 'offer') {
+                        webrtc.createAnswer(function (answer) {
+                            webrtc.setLocalDescription(answer, function (a, b) {
+                                try { sendws({ action: 'webRtcSdp', sdp: answer, id: id }); } catch (ex) { }
+                            }, function () { hangUpButtonClick(id); });
+                        }, function () { hangUpButtonClick(id); });
+                    }
+                }, function () { hangUpButtonClick(id); });
+            }
+        }
+
+        // Indicate to peer that data traffic will no longer be sent over websocket and start holding traffic.
+        function performWebRtcSwitch() {
+            if (!serverRecording && webchannel && webchannel.ok) { sendws({ action: 'rtcSwitch', v: 1 }); webchannel.xoutBuffer = []; }
+        }
+
+        // Disconnect everything
+        function disconnect() {
+            serverRecording = false;
+            QV('recordIcon', false);
+            if (state > 0) { displayControl("Connection closed."); }
+            if (state > 1) { setTimeout(start, 500); }
+            cancelAllFileTransfers();
+            hangUpButtonClick(0, true); // Data channel
+            hangUpButtonClick(1, true); // Local audio/video
+            hangUpButtonClick(2, true); // Remote audio/video
+            if (socket != null) { socket.close(); socket = null; }
+            updateControls();
+            state = 0;
+            remoteImage = false;
+            QV('remoteImage', false);
+            updateLocalOutText();
+            updateRemoteOutText();
+        }
+
+        // Send data over the current transport (WebRTC first)
+        function send(data) {
+            if ((state != 2) && (pushMessaging == false)) return; // If not in connected state, ignore this.
+            if (typeof data == 'object') { data = JSON.stringify(data); } // If this is an object, convert it to a string.
+            if (!serverRecording && webchannel && webchannel.ok) { if (webchannel.xoutBuffer != null) { webchannel.xoutBuffer.push(data); } else { webchannel.send(data); } } // If WebRTC channel is possible, use it or hold until we can use it.
+            else { if (socket != null) { try { socket.send(data); } catch (ex) { } } } // If a websocket channel is present, use that.
+        }
+
+        // Send data over the websocket transport (WebSocket only)
+        function sendws(data) {
+            if (state != 2) return;
+            //console.log('SEND', data);
+            if (typeof data == 'object') { data = JSON.stringify(data); }
+            if (socket != null) { socket.send(data); }
+        }
+
+        // WebRTC id switcher (0 -> 0, 1 -> 2, 2 -> 1)
+        function webRtcIdSwitch(id) { if (id == 0) { return 0; } return 3 - id; }
+
+        function drawRemoteImage(imageBase64) {
+            var canvas = Q('remoteImage'), context = canvas.getContext('2d'), img = new Image();
+            img.onload = function () { context.drawImage(this, 0, 0, canvas.width, canvas.height); remoteImage = true; adjustVideoWindows(); }
+            img.src = imageBase64;
+        }
+
+        // Process incoming messages
+        function processMessage(data, transport) {
+            if (typeof data == 'string') {
+                try { data = JSON.parse(data); } catch (ex) { console.log('Unable to parse', data); return; }
+                //console.log('RECV', data);
+
+                // Handle control command
+                if (data.ctrlChannel == '102938') {
+                    switch (data.type) {
+                        case 'image': { drawRemoteImage(data.image); break; }
+                        case 'ping': { send({ ctrlChannel: '102938', type: 'pong' }); break; }
+                        case 'pong': { break; }
+                    }
+                    return;
+                }
+
+                // Handle command
+                switch (data.action) {
+                    case 'chat': { displayRemote(data.msg); updateRemoteOutText(false); break; } // Incoming chat message.
+                    case 'outtext': { updateRemoteOutText(data.value); break; }
+                    case 'ctrl': {
+                        if (data.value == 1) { displayControl("Sent as push notification."); }
+                        else if (data.value == 2) { displayControl("Push notification failed."); }
+                        if (data.msg != null) { displayControl(msg); }
+                        break;
+                    }
+                    case 'random': { if (random > data.random) { startWebRTC(0, true); } break; } // If we have a larger random value, we start WebRTC.
+                    case 'webRtcSdp': { if (!webrtcSessions[webRtcIdSwitch(data.id)]) { startWebRTC(webRtcIdSwitch(data.id), false); } webRtcHandleOffer(webRtcIdSwitch(data.id), data.sdp); break; } // Remote WebRTC offer or answer.
+                    case 'webRtcIce': { var webrtc = webrtcSessions[webRtcIdSwitch(data.id)]; if (webrtc) { try { webrtc.addIceCandidate(new RTCIceCandidate(data.ice)); } catch (ex) { } } break; } // Remote ICE candidate
+                    case 'videoStop': { hangUpButtonClick(webRtcIdSwitch(data.id), true); break; }
+                    case 'rtcSwitch': { // WebRTC switch over commands.
+                        switch (data.v) {
+                            case 0: { performWebRtcSwitch(); break; } // Other side is ready for switch over to WebRTC
+                            case 1: { sendws({ action: 'rtcSwitch', v: 2 }); break; } // Other side no longer sending data on websocket, confirm we got the end marker
+                            case 2: { for (var i in webchannel.xoutBuffer) { webchannel.send(webchannel.xoutBuffer[i]); } delete webchannel.xoutBuffer; break; } // Send any pending data over WebRTC and start using WebRTC with all traffic
+                            default: { console.log('Unknown rtcSwitch value: ' + data.action); break; } //
+                        }
+                        break;
+                    }
+                    case 'file': { startFileDownload(data); break; }
+                    case 'fileUploadCancel': { cancelFileTransfer(data.id); break; }
+                    case 'fileUploadStart': {
+                        if (fileDownloads[data.id]) {
+                            currentFileDownload = fileDownloads[data.id];
+                            currentFileDownload.data = '';
+                            changeFileInfo(data.id, 2, 0);
+                            continueFileDownload(data);
+                            send({ action: 'fileUploadAck', id: data.id });
+                        } break;
+                    }
+                    case 'fileUploadEnd': {
+                        if (currentFileDownload && (currentFileDownload.id == data.id)) {
+                            changeFileInfo(data.id, 3, 200);
+                            currentFileDownload.done = 1;
+                            currentFileDownload = null;
+                            send({ action: 'fileUploadAck', id: data.id });
+                        }
+                        currentFileDownload = null;
+                        break;
+                    }
+                    case 'fileUploadAck': {
+                        continueFileUpload();
+                        break;
+                    }
+                    case 'fileData': {
+                        if (currentFileDownload && (currentFileDownload.id == data.id)) {
+                            currentFileDownload.data += data.data;
+                            changeFileInfo(data.id, 2, (currentFileDownload.data.length * 200 / currentFileDownload.size));
+                            send({ action: 'fileUploadAck', id: data.id });
+                        }
+                        break;
+                    }
+                    default: { console.log('Unhandled object data', data); break; }
+                }
+            } else {
+                console.log('Unhandled data', typeof data, data);
+            }
+        }
+
+        // File sharing button
+        function fileButtonClick() {
+            var chooser = Q('uploadFileInput');
+            if (chooser.getAttribute('eventset') != 1) {
+                chooser.setAttribute('eventset', '1');
+                chooser.addEventListener('change', fileSelect, false);
+            }
+            chooser.value = null;
+            chooser.click();
+        }
+
+        // User selected one or more files to upload to remote user.
+        function fileSelect() {
+            if (state != 2) return;
+            var x = Q('uploadFileInput');
+            if (x.files.length > 10) {
+                displayControl("Limit of 10 file uploads at the same time.");
+            } else {
+                for (var i = 0; i < x.files.length; i++) {
+                    if (x.files[i].size > 0) {
+                        var reader = new FileReader();
+                        reader.onload = function (e) { this.xfile.data = e.target.result; startFileUpload(this.xfile); };
+                        reader.xfile = x.files[i];
+                        reader.readAsBinaryString(x.files[i]);
                     }
                 }
             }
+        }
 
-            // Display and send a message from the local user
-            function xsend(event) {
-                if (notificationSupport) {
-                    if (notification != null) { notification.close(); notification = null; }
-                    if (Notification) { QV('notifyButton', Notification.permission != 'granted'); }
+        // User drag & droped one or more files to upload to remote user.
+        function fileDrop(e) {
+            haltEvent(e);
+            if ((state != 2) || (e.dataTransfer == null)) return;
+            if (e.dataTransfer.files.length > 10) {
+                displayControl("Limit of 10 file uploads at the same time.");
+            } else {
+                for (var i = 0; i < e.dataTransfer.files.length; i++) {
+                    if (e.dataTransfer.files[i].size > 0) {
+                        var reader = new FileReader();
+                        reader.onload = function (e) { this.xfile.data = e.target.result; startFileUpload(this.xfile); };
+                        reader.xfile = e.dataTransfer.files[i];
+                        reader.readAsBinaryString(e.dataTransfer.files[i]);
+                    }
                 }
-                var outtext = Q('xouttext').value;
-                if (outtext.length > 0) {
-                    chatTextSession += ((new Date()).toLocaleTimeString() + ' - ' + "Local" + '> ' + outtext + '\r\n');
-                    QA('xmsg', '<div style="clear:both"><div class="localBubble">' + EscapeHtml(outtext) + '</div><div></div></div>');
-                    Q('xmsgparent').scrollTop = Q('xmsgparent').scrollHeight;
-                    if ((state == 2) || pushMessaging) { send({ action: 'chat', msg: outtext }); }
-                    Q('xouttext').value = '';
-                    Q('xouttext').focus();
-                    localOutText = false;
+            }
+        }
+
+        function startFileUpload(file) {
+            if (state != 2) return;
+            file.id = Math.random();
+            fileUploads.push(file);
+            chatTextSession += ((new Date()).toLocaleTimeString() + ' - ' + "Upload" + '> ' + file.name + ' (' + file.size + ' ' + "bytes" + ')\r\n');
+            QA('xmsg', '<div style="clear:both"></div><div id="FILEUP-' + file.id + '" class="localBubble" style="font-size:14px;width:240px;cursor:pointer" onclick="cancelFileTransfer(\'' + file.id + '\')"><div id="FILEUP-ICON-' + file.id + '" class="fileicon" style="float:left;width:32px;height:32px"></div><div><div id="FILEUP-NAME-' + file.id + '" style="height:20px;overflow:hidden;white-space:nowrap;" title="' + file.name + '">' + file.name + '</div><div style="width:200px;background-color:lightgray;margin-left:32px;border-radius:3px;margin-top:3px;height:11px"><div id="FILEUP-PROGRESS-' + file.id + '" style="width:0px;background-color:green;border-radius:3px;height:11px">&nbsp;</div></div></div></div>');
+            Q('xmsgparent').scrollTop = Q('xmsgparent').scrollHeight;
+            send({ action: 'file', size: file.size, id: file.id, type: file.type, name: file.name });
+            if (currentFileUpload == null) continueFileUpload();
+        }
+
+        function startFileDownload(file) {
+            if (state != 2) return;
+            fileDownloads[file.id] = file;
+            chatTextSession += ((new Date()).toLocaleTimeString() + ' - ' + "Download" + '> ' + file.name + ' (' + file.size + ' ' + "bytes" + ')\r\n');
+            QA('xmsg', '<div style="clear:both"></div><div id="FILEUP-' + file.id + '" class="remoteBubble" style="font-size:14px;width:240px;cursor:pointer" onclick="saveFileTransfer(\'' + file.id + '\')"><div id="FILEUP-ICON-' + file.id + '" class="fileicon" style="float:left;width:32px;height:32px"></div><div><div id="FILEUP-NAME-' + file.id + '" style="height:20px;overflow:hidden;white-space:nowrap;" title="' + file.name + '">' + file.name + '</div><div style="width:200px;background-color:lightgray;margin-left:32px;border-radius:3px;margin-top:3px;height:11px"><div id="FILEUP-PROGRESS-' + file.id + '" style="width:0px;background-color:green;border-radius:3px;height:11px">&nbsp;</div></div></div></div>');
+            Q('xmsgparent').scrollTop = Q('xmsgparent').scrollHeight;
+        }
+
+        // Change the file icon and progress
+        function changeFileInfo(id, icon, progress, progressColor) {
+            if (icon) {
+                Q('FILEUP-ICON-' + id).classList.remove('fileicon');
+                Q('FILEUP-ICON-' + id).classList.remove('fileiconx');
+                Q('FILEUP-ICON-' + id).classList.remove('fileicontransfer');
+                Q('FILEUP-ICON-' + id).classList.remove('fileicondone');
+                Q('FILEUP-ICON-' + id).classList.add(['fileicon', 'fileiconx', 'fileicontransfer', 'fileicondone'][icon]);
+            }
+            if (progress) { QS('FILEUP-PROGRESS-' + id)['width'] = progress + 'px'; }
+            if (progressColor) { QS('FILEUP-PROGRESS-' + id)['background-color'] = progressColor; }
+        }
+
+        // Convert a string into a blob
+        function data2blob(data) {
+            var bytes = new Array(data.length);
+            for (var i = 0; i < data.length; i++) bytes[i] = data.charCodeAt(i);
+            return new Blob([new Uint8Array(bytes)]);
+        };
+
+        function saveFileTransfer(id) {
+            var f = fileDownloads[id];
+            if (f && f.done == 1) { saveAs(data2blob(f.data), f.name); }
+        }
+
+        function cancelFileTransfer(id) {
+            if ((currentFileUpload != null) && (currentFileUpload.id == id)) { currentFileUpload = null; }
+            if ((currentFileDownload != null) && (currentFileDownload.id == id)) { currentFileDownload = null; }
+
+            var found = false;
+            if (fileDownloads[id] && (fileDownloads[id].done != 1)) {
+                delete fileDownloads[id];
+                found = true;
+            } else {
+                for (var i in fileUploads) {
+                    if (fileUploads[i].id == id) {
+                        send({ action: 'fileUploadCancel', id: id });
+                        fileUploads.splice(i, 1);
+                        found = true;
+                        break;
+                    }
+                }
+            }
+            if (found) { changeFileInfo(id, 1, 200, 'gray'); } // Only cancel a file if it was in the file queue.
+        }
+
+        function cancelAllFileTransfers() {
+            for (var i in fileDownloads) { cancelFileTransfer(fileDownloads[i].id); }
+            for (var i in fileUploads) { cancelFileTransfer(fileUploads[i].id); }
+        }
+
+        function continueFileUpload() {
+            if (currentFileUpload == null) {
+                // Select the next file to upload
+                if (fileUploads.length == 0) { return; } // Nothing to do
+                currentFileUpload = fileUploads[0];
+                currentFileUpload.ptr = 0;
+
+                // Indicate that we are sending this file
+                send({ action: 'fileUploadStart', size: currentFileUpload.size, id: currentFileUpload.id, type: currentFileUpload.type, name: currentFileUpload.name });
+            } else {
+                if (currentFileUpload.size <= currentFileUpload.ptr) {
+                    // If we are done, send the end marker
+                    send({ action: 'fileUploadEnd', size: currentFileUpload.size, id: currentFileUpload.id, type: currentFileUpload.type, name: currentFileUpload.name });
+                    changeFileInfo(currentFileUpload.id, 3, 200);
+                    fileUploads.splice(0, 1);
+                    currentFileUpload = null;
+                    continueFileUpload(); // Send the next file
+                } else {
+                    // Send the next block
+                    var nextBlockLen = Math.min(4000, currentFileUpload.data.length - currentFileUpload.ptr);
+                    var data = currentFileUpload.data.substring(currentFileUpload.ptr, currentFileUpload.ptr + nextBlockLen);
+                    send({ action: 'fileData', id: currentFileUpload.id, data: data });
+                    currentFileUpload.ptr += nextBlockLen;
+                    changeFileInfo(currentFileUpload.id, 0, (currentFileUpload.ptr * 200 / currentFileUpload.size));
+                }
+            }
+        }
+
+        function continueFileDownload(msg) {
+            send({ action: 'fileUploadAck', id: msg.id });
+        }
+
+        // Toggle notification
+        function enableNotificationsButtonClick() {
+            if (notificationSupport) {
+                if (Notification) { Notification.requestPermission().then(function (permission) { QV('notifyButton', permission != 'granted'); }); }
+            }
+            return false;
+        }
+
+        // Camera button
+        function camButtonClick() {
+            if (localStream == null) { startLocalStream({ video: true, audio: true }); }
+        }
+
+        // Microphone
+        function micButtonClick() {
+            if (localStream == null) { startLocalStream({ video: false, audio: true }); }
+        }
+
+        function hangUpButtonClick(id, fromRemote) {
+            //console.log('hangUpButtonClick', id);
+            var localVideo = Q('localVideoCanvas');
+            var remoteVideo = Q('remoteVideoCanvas');
+            var webrtc = webrtcSessions[(multiWebRtc == true)? id : 0];
+
+            if ((id == 0) && (webchannel != null)) { try { webchannel.close(); } catch (e) { } webchannel = null; }
+
+            if (webrtc) {
+                if ((multiWebRtc == true) || (id == 0)) {
+                    webrtc.ontrack = null;
+                    webrtc.onremovetrack = null;
+                    webrtc.onremovestream = null;
+                    webrtc.onnicecandidate = null;
+                    webrtc.oniceconnectionstatechange = null;
+                    webrtc.onsignalingstatechange = null;
+                    webrtc.onicegatheringstatechange = null;
+                    webrtc.onnotificationneeded = null;
+                }
+
+                if ((id == 1) && localStream) { var tracks = localStream.getTracks(); for (var i in tracks) { tracks[i].stop(); } localStream = null; }
+                if ((id == 2) && remoteStream) { var tracks = remoteStream.getTracks(); for (var i in tracks) { tracks[i].stop(); } remoteStream = null; }
+
+                if ((multiWebRtc == true) || (id == 0)) {
+                    webrtc.close();
+                    delete webrtcSessions[id];
                 }
             }
 
-            function haltEvent(e) { if (e.preventDefault) e.preventDefault(); if (e.stopPropagation) e.stopPropagation(); return false; }
-
-            // Update user controls
-            function updateControls() {
-                QE('sendButton', (state == 2) || pushMessaging);
-                QE('clearButton', (state == 2) || pushMessaging);
-                QE('xouttext', (state == 2) || pushMessaging);
-                QV('fileButton', state == 2);
-                QV('camButton', webchannel && webchannel.ok && !localStream && (userMediaSupport == 2));
-                QV('micButton', webchannel && webchannel.ok && !localStream && (userMediaSupport > 0));
-                QV('hangupButton', webchannel && webchannel.ok && localStream);
-                updateLocalOutText();
+            if (id == 1) {
+                localVideo.removeAttribute('src');
+                localVideo.removeAttribute('srcObject');
+                if (localStream != null) { localStream = null; }
+                displayLocalVideo(false);
+            } else if (id == 2) {
+                remoteVideo.removeAttribute('src');
+                remoteVideo.removeAttribute('srcObject');
+                displayRemoteVideo(false);
             }
 
-            // This is the WebRTC setup
-            function startWebRTC(id, startDataChannel) {
-                if ((webrtcSessions[0] != null) && (multiWebRtc == false)) { return webrtcSessions[0]; };
+            if (fromRemote != true) { send({ action: 'videoStop', id: id }); }
+            updateControls();
+        }
 
-                // Setup the WebRTC object
-                var webrtc = null;
-                if (typeof RTCPeerConnection !== 'undefined') { webrtc = new RTCPeerConnection(webrtcconfiguration); }
-                else if (typeof webkitRTCPeerConnection !== 'undefined') { webrtc = new webkitRTCPeerConnection(webrtcconfiguration); }
-                if (webrtc == null) return null; // No WebRTC support.
-
-                webrtc.id = id;
-                webrtc.onicecandidate = function (e) { try { if (e.candidate != null) { sendws({ action: 'webRtcIce', ice: e.candidate, id: this.id }); } } catch (ex) { } }
-                webrtc.oniceconnectionstatechange = function () { if (webrtc && webrtc.iceConnectionState == 'failed') { webrtc.close(); if (webrtcSessions[webrtc.id]) { delete webrtcSessions[webrtc.id]; } } }
-                webrtc.ondatachannel = function (ev) {
-                    //console.log('ondatachannel');
-                    webchannel = ev.channel;
-                    webchannel.onmessage = function (event) { processMessage(event.data, 2); };
-                    webchannel.onopen = function () { webchannel.ok = true; updateControls(); if (serverRecording == false) { sendws({ action: 'rtcSwitch', v: 0 }); } };
-                    webchannel.onclose = function (event) { if (webchannel && webchannel.ok) { disconnect(); } else { hangUpButtonClick(0); } }
-                }
-                webrtc.onnegotiationneeded = function (event) {
-                    if (webrtc.holdTimer != null) return;
-                    webrtc.holdTimer = setTimeout(function () { // This time is needed to keep Chrome from being to excited. Wait until we add all tracks before kicking this off.
-                        //console.log('onnegotiationneeded', id);
-                        webrtc.holdTimer = null;
-                        webrtc.createOffer(function (offer) { /*console.log('offer', offer.sdp.length);*/ webrtc.setLocalDescription(offer, function () { sendws({ action: 'webRtcSdp', sdp: offer, id: id }); }, function () { hangUpButtonClick(id); }); }, function () { hangUpButtonClick(id); });
-                    }, 20);
-                }
-                webrtc.ontrack = function (event) {
-                    //console.log('ontrack', id);
-                    QV('remoteClickToView', false);
-                    var video = Q('remoteVideoCanvas');
-                    video.srcObject = remoteStream = event.streams[0];
-                    video.onloadedmetadata = function (e) {
-                        var promise = video.play();
-                        if (promise !== undefined) {
-                            promise.then(function() {
-                                // Video start ok
-                            }).catch(function(err) {
-                                // Video start error, display a play button
-                                QV('remoteClickToView', true);
-                            })
-                        }
-                    };
-                    displayRemoteVideo(true);
-                }
-                //webrtc.onremovetrack = function (event) { console.log('onremovetrack'); }
-                //webrtc.onicegatheringstatechange = function (event) { console.log('onicegatheringstatechange', event); }
-                //webrtc.onsignalingstatechange = function (event) { console.log('onsignalingstatechange', event); }
-
-                // Initiate the WebRTC offer or handle the offer from the peer.
-                if (startDataChannel == true) {
-                    webchannel = webrtc.createDataChannel('DataChannel', {}); // { ordered: false, maxRetransmits: 2 }
-                    webchannel.onmessage = function (event) { processMessage(event.data, 2); };
-                    webchannel.onopen = function () { webchannel.ok = true; updateControls(); if (serverRecording == false) { sendws({ action: 'rtcSwitch', v: 0 }); } };
-                    webchannel.onclose = function (event) { if (webchannel && webchannel.ok) { disconnect(); } else { hangUpButtonClick(0); } }
-                }
-
-                webrtcSessions[id] = webrtc;
-                return webrtc;
-            }
-
-            function remotePlay() { QV('remoteClickToView', false); Q('remoteVideoCanvas').play(); }
-
-            function webRtcHandleOffer(id, description) {
-                //console.log('webRtcHandleOffer', description.sdp.length);
-                var webrtc = webrtcSessions[id];
-                if (webrtc) {
-                    webrtc.setRemoteDescription(new RTCSessionDescription(description), function () {
-                        if (description.type == 'offer') {
-                            webrtc.createAnswer(function (answer) {
-                                webrtc.setLocalDescription(answer, function (a, b) {
-                                    try { sendws({ action: 'webRtcSdp', sdp: answer, id: id }); } catch (ex) { }
-                                }, function () { hangUpButtonClick(id); });
-                            }, function () { hangUpButtonClick(id); });
-                        }
-                    }, function () { hangUpButtonClick(id); });
-                }
-            }
-
-            // Indicate to peer that data traffic will no longer be sent over websocket and start holding traffic.
-            function performWebRtcSwitch() {
-                if (!serverRecording && webchannel && webchannel.ok) { sendws({ action: 'rtcSwitch', v: 1 }); webchannel.xoutBuffer = []; }
-            }
-
-            // Disconnect everything
-            function disconnect() {
-                serverRecording = false;
-                QV('recordIcon', false);
-                if (state > 0) { displayControl("Connection closed."); }
-                if (state > 1) { setTimeout(start, 500); }
-                cancelAllFileTransfers();
-                hangUpButtonClick(0, true); // Data channel
-                hangUpButtonClick(1, true); // Local audio/video
-                hangUpButtonClick(2, true); // Remote audio/video
-                if (socket != null) { socket.close(); socket = null; }
+        // Setup local audio/video
+        function startLocalStream(constraints) {
+            var channel = (multiWebRtc == true) ? 1 : 0;
+            if (localStream != null) return;
+            if ((multiWebRtc == true) && (webrtcSessions[1] != null)) return;
+            if (navigator.mediaDevices.getUserMedia) {
+                localStream = 1;
                 updateControls();
-                state = 0;
-                remoteImage = false;
-                QV('remoteImage', false);
-                updateLocalOutText();
-                updateRemoteOutText();
+                navigator.mediaDevices.getUserMedia(constraints)
+                .then(function (stream) {
+                    localStream = stream;
+                    var tracks = localStream.getTracks();
+                    var webrtc = startWebRTC(channel);
+                    if (constraints.video == true) {
+                        var video = Q('localVideoCanvas');
+                        video.srcObject = stream;
+                        video.onloadedmetadata = function (e) { video.play(); };
+                        displayLocalVideo(true);
+                    }
+                    for (var i in tracks) { webrtc.addTrack(tracks[i], localStream); }
+                }, function (err) {
+                    displayControl(err.message + '.');
+                    hangUpButtonClick(1);
+                });
             }
+        }
 
-            // Send data over the current transport (WebRTC first)
-            function send(data) {
-                if ((state != 2) && (pushMessaging == false)) return; // If not in connected state, ignore this.
-                if (typeof data == 'object') { data = JSON.stringify(data); } // If this is an object, convert it to a string.
-                if (!serverRecording && webchannel && webchannel.ok) { if (webchannel.xoutBuffer != null) { webchannel.xoutBuffer.push(data); } else { webchannel.send(data); } } // If WebRTC channel is possible, use it or hold until we can use it.
-                else { if (socket != null) { try { socket.send(data); } catch (ex) { } } } // If a websocket channel is present, use that.
-            }
-
-            // Send data over the websocket transport (WebSocket only)
-            function sendws(data) {
-                if (state != 2) return;
-                //console.log('SEND', data);
-                if (typeof data == 'object') { data = JSON.stringify(data); }
-                if (socket != null) { socket.send(data); }
-            }
-
-            // WebRTC id switcher (0 -> 0, 1 -> 2, 2 -> 1)
-            function webRtcIdSwitch(id) { if (id == 0) { return 0; } return 3 - id; }
-
-            function drawRemoteImage(imageBase64) {
-                var canvas = Q('remoteImage'), context = canvas.getContext('2d'), img = new Image();
-                img.onload = function () { context.drawImage(this, 0, 0, canvas.width, canvas.height); remoteImage = true; adjustVideoWindows(); }
-                img.src = imageBase64;
-            }
-
-            // Process incoming messages
-            function processMessage(data, transport) {
-                if (typeof data == 'string') {
-                    try { data = JSON.parse(data); } catch (ex) { console.log('Unable to parse', data); return; }
-                    //console.log('RECV', data);
-
-                    // Handle control command
-                    if (data.ctrlChannel == '102938') {
-                        switch (data.type) {
-                            case 'image': { drawRemoteImage(data.image); break; }
-                            case 'ping': { send({ ctrlChannel: '102938', type: 'pong' }); break; }
-                            case 'pong': { break; }
-                        }
+        // This is the main start
+        function start() {
+            // Get started
+            updateControls();
+            if ((typeof args.id == 'string') && (args.id.length > 0)) {
+                var url = window.location.protocol.replace('http', 'ws') + '//' + window.location.host + window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/')) + '/meshrelay.ashx?id=' + args.id;
+                if ((args.auth != null) && (args.auth != '')) { url += '&auth=' + args.auth; }
+                socket = new WebSocket(url);
+                socket.onopen = function () { state = 1; displayControl("Waiting for other user..."); }
+                socket.onerror = function (e) { /*console.error(e);*/ }
+                socket.onclose = function () { disconnect(); }
+                socket.onmessage = function (msg) {
+                    if ((state < 2) && (typeof msg.data == 'string') && ((msg.data == 'c') || (msg.data == 'cr'))) {
+                        serverRecording = (msg.data == 'cr');
+                        QV('recordIcon', serverRecording);
+                        hangUpButtonClick(0, true);
+                        hangUpButtonClick(1, true);
+                        hangUpButtonClick(2, true);
+                        displayControl("Connected.");
+                        state = 2;
+                        updateControls();
+                        sendws({ action: 'random', random: random }); // Send a random number. Higher number starts the WebRTC session.
+                        updateLocalOutText();
+                        updateRemoteOutText();
                         return;
                     }
-
-                    // Handle command
-                    switch (data.action) {
-                        case 'chat': { displayRemote(data.msg); updateRemoteOutText(false); break; } // Incoming chat message.
-                        case 'outtext': { updateRemoteOutText(data.value); break; }
-                        case 'ctrl': {
-                            if (data.value == 1) { displayControl("Sent as push notification."); }
-                            else if (data.value == 2) { displayControl("Push notification failed."); }
-                            if (data.msg != null) { displayControl(msg); }
-                            break;
-                        }
-                        case 'random': { if (random > data.random) { startWebRTC(0, true); } break; } // If we have a larger random value, we start WebRTC.
-                        case 'webRtcSdp': { if (!webrtcSessions[webRtcIdSwitch(data.id)]) { startWebRTC(webRtcIdSwitch(data.id), false); } webRtcHandleOffer(webRtcIdSwitch(data.id), data.sdp); break; } // Remote WebRTC offer or answer.
-                        case 'webRtcIce': { var webrtc = webrtcSessions[webRtcIdSwitch(data.id)]; if (webrtc) { try { webrtc.addIceCandidate(new RTCIceCandidate(data.ice)); } catch (ex) { } } break; } // Remote ICE candidate
-                        case 'videoStop': { hangUpButtonClick(webRtcIdSwitch(data.id), true); break; }
-                        case 'rtcSwitch': { // WebRTC switch over commands.
-                            switch (data.v) {
-                                case 0: { performWebRtcSwitch(); break; } // Other side is ready for switch over to WebRTC
-                                case 1: { sendws({ action: 'rtcSwitch', v: 2 }); break; } // Other side no longer sending data on websocket, confirm we got the end marker
-                                case 2: { for (var i in webchannel.xoutBuffer) { webchannel.send(webchannel.xoutBuffer[i]); } delete webchannel.xoutBuffer; break; } // Send any pending data over WebRTC and start using WebRTC with all traffic
-                                default: { console.log('Unknown rtcSwitch value: ' + data.action); break; } //
-                            }
-                            break;
-                        }
-                        case 'file': { startFileDownload(data); break; }
-                        case 'fileUploadCancel': { cancelFileTransfer(data.id); break; }
-                        case 'fileUploadStart': {
-                            if (fileDownloads[data.id]) {
-                                currentFileDownload = fileDownloads[data.id];
-                                currentFileDownload.data = '';
-                                changeFileInfo(data.id, 2, 0);
-                                continueFileDownload(data);
-                                send({ action: 'fileUploadAck', id: data.id });
-                            } break;
-                        }
-                        case 'fileUploadEnd': {
-                            if (currentFileDownload && (currentFileDownload.id == data.id)) {
-                                changeFileInfo(data.id, 3, 200);
-                                currentFileDownload.done = 1;
-                                currentFileDownload = null;
-                                send({ action: 'fileUploadAck', id: data.id });
-                            }
-                            currentFileDownload = null;
-                            break;
-                        }
-                        case 'fileUploadAck': {
-                            continueFileUpload();
-                            break;
-                        }
-                        case 'fileData': {
-                            if (currentFileDownload && (currentFileDownload.id == data.id)) {
-                                currentFileDownload.data += data.data;
-                                changeFileInfo(data.id, 2, (currentFileDownload.data.length * 200 / currentFileDownload.size));
-                                send({ action: 'fileUploadAck', id: data.id });
-                            }
-                            break;
-                        }
-                        default: { console.log('Unhandled object data', data); break; }
-                    }
-                } else {
-                    console.log('Unhandled data', typeof data, data);
+                    if (msg.data[0] == '{') { processMessage(msg.data, 1); }
                 }
+            } else {
+                displayControl("Error: No connection key specified.");
             }
+        }
 
-            // File sharing button
-            function fileButtonClick() {
-                var chooser = Q('uploadFileInput');
-                if (chooser.getAttribute('eventset') != 1) {
-                    chooser.setAttribute('eventset', '1');
-                    chooser.addEventListener('change', fileSelect, false);
-                }
-                chooser.value = null;
-                chooser.click();
+        function saveChatSession() {
+            saveAs(data2blob(chatTextSession), "ChatSession");
+        }
+
+        start();
+
+        function onUnLoad() {
+            for (var i = 0; i < 3; i++) { if (webrtcSessions[i]) { try { webrtcSessions[i].close(); delete webrtcSessions[i]; } catch (ex) { } } }
+            if (webchannel != null) { try { webchannel.close(); } catch (ex) { } webchannel = null; }
+            if (socket != null) { try { socket.close(); } catch (ex) { } socket = null; }
+        }
+
+        function isSafeString3(str) { return ((typeof str == 'string') && (str.indexOf('<') == -1) && (str.indexOf('>') == -1) && (str.indexOf('&') == -1) && (str.indexOf('"') == -1) && (str.indexOf('\'') == -1) && (str.indexOf('+') == -1) && (str.indexOf('(') == -1) && (str.indexOf(')') == -1) && (str.indexOf('#') == -1) && (str.indexOf(':') == -1)) };
+
+        // Parse URL arguments, only keep safe values
+        function XparseUriArgs() {
+            var href = window.document.location.href;
+            if (href.endsWith('#')) { href = href.substring(0, href.length - 1); }
+            var name, r = {}, parsedUri = href.split(/[\?&|]/);
+            parsedUri.splice(0, 1);
+            for (var j in parsedUri) {
+                var arg = parsedUri[j], i = arg.indexOf('=');
+                name = arg.substring(0, i);
+                r[name] = arg.substring(i + 1);
+                if (!isSafeString3(r[name])) { delete r[name]; } else { var x = parseInt(r[name]); if (x == r[name]) { r[name] = x; } }
             }
+            return r;
+        }
 
-            // User selected one or more files to upload to remote user.
-            function fileSelect() {
-                if (state != 2) return;
-                var x = Q('uploadFileInput');
-                if (x.files.length > 10) {
-                    displayControl("Limit of 10 file uploads at the same time.");
-                } else {
-                    for (var i = 0; i < x.files.length; i++) {
-                        if (x.files[i].size > 0) {
-                            var reader = new FileReader();
-                            reader.onload = function (e) { this.xfile.data = e.target.result; startFileUpload(this.xfile); };
-                            reader.xfile = x.files[i];
-                            reader.readAsBinaryString(x.files[i]);
-                        }
-                    }
-                }
+        function updateLocalOutText() {
+            var l = Q('xouttext').value;
+            if (((state != 2) || (l == '')) && (localOutText == true)) {
+                localOutText = false;
+                send({ action: 'outtext', value: false });
+            } else if ((state == 2) && ((l != '') && (localOutText == false))) {
+                localOutText = true;
+                send({ action: 'outtext', value: true });
             }
+        }
 
-            // User drag & droped one or more files to upload to remote user.
-            function fileDrop(e) {
-                haltEvent(e);
-                if ((state != 2) || (e.dataTransfer == null)) return;
-                if (e.dataTransfer.files.length > 10) {
-                    displayControl("Limit of 10 file uploads at the same time.");
-                } else {
-                    for (var i = 0; i < e.dataTransfer.files.length; i++) {
-                        if (e.dataTransfer.files[i].size > 0) {
-                            var reader = new FileReader();
-                            reader.onload = function (e) { this.xfile.data = e.target.result; startFileUpload(this.xfile); };
-                            reader.xfile = e.dataTransfer.files[i];
-                            reader.readAsBinaryString(e.dataTransfer.files[i]);
-                        }
-                    }
-                }
-            }
-
-            function startFileUpload(file) {
-                if (state != 2) return;
-                file.id = Math.random();
-                fileUploads.push(file);
-                chatTextSession += ((new Date()).toLocaleTimeString() + ' - ' + "Upload" + '> ' + file.name + ' (' + file.size + ' ' + "bytes" + ')\r\n');
-                QA('xmsg', '<div style="clear:both"></div><div id="FILEUP-' + file.id + '" class="localBubble" style="font-size:14px;width:240px;cursor:pointer" onclick="cancelFileTransfer(\'' + file.id + '\')"><div id="FILEUP-ICON-' + file.id + '" class="fileicon" style="float:left;width:32px;height:32px"></div><div><div id="FILEUP-NAME-' + file.id + '" style="height:20px;overflow:hidden;white-space:nowrap;" title="' + file.name + '">' + file.name + '</div><div style="width:200px;background-color:lightgray;margin-left:32px;border-radius:3px;margin-top:3px;height:11px"><div id="FILEUP-PROGRESS-' + file.id + '" style="width:0px;background-color:green;border-radius:3px;height:11px">&nbsp;</div></div></div></div>');
-                Q('xmsgparent').scrollTop = Q('xmsgparent').scrollHeight;
-                send({ action: 'file', size: file.size, id: file.id, type: file.type, name: file.name });
-                if (currentFileUpload == null) continueFileUpload();
-            }
-
-            function startFileDownload(file) {
-                if (state != 2) return;
-                fileDownloads[file.id] = file;
-                chatTextSession += ((new Date()).toLocaleTimeString() + ' - ' + "Download" + '> ' + file.name + ' (' + file.size + ' ' + "bytes" + ')\r\n');
-                QA('xmsg', '<div style="clear:both"></div><div id="FILEUP-' + file.id + '" class="remoteBubble" style="font-size:14px;width:240px;cursor:pointer" onclick="saveFileTransfer(\'' + file.id + '\')"><div id="FILEUP-ICON-' + file.id + '" class="fileicon" style="float:left;width:32px;height:32px"></div><div><div id="FILEUP-NAME-' + file.id + '" style="height:20px;overflow:hidden;white-space:nowrap;" title="' + file.name + '">' + file.name + '</div><div style="width:200px;background-color:lightgray;margin-left:32px;border-radius:3px;margin-top:3px;height:11px"><div id="FILEUP-PROGRESS-' + file.id + '" style="width:0px;background-color:green;border-radius:3px;height:11px">&nbsp;</div></div></div></div>');
-                Q('xmsgparent').scrollTop = Q('xmsgparent').scrollHeight;
-            }
-
-            // Change the file icon and progress
-            function changeFileInfo(id, icon, progress, progressColor) {
-                if (icon) {
-                    Q('FILEUP-ICON-' + id).classList.remove('fileicon');
-                    Q('FILEUP-ICON-' + id).classList.remove('fileiconx');
-                    Q('FILEUP-ICON-' + id).classList.remove('fileicontransfer');
-                    Q('FILEUP-ICON-' + id).classList.remove('fileicondone');
-                    Q('FILEUP-ICON-' + id).classList.add(['fileicon', 'fileiconx', 'fileicontransfer', 'fileicondone'][icon]);
-                }
-                if (progress) { QS('FILEUP-PROGRESS-' + id)['width'] = progress + 'px'; }
-                if (progressColor) { QS('FILEUP-PROGRESS-' + id)['background-color'] = progressColor; }
-            }
-
-            // Convert a string into a blob
-            function data2blob(data) {
-                var bytes = new Array(data.length);
-                for (var i = 0; i < data.length; i++) bytes[i] = data.charCodeAt(i);
-                return new Blob([new Uint8Array(bytes)]);
-            };
-
-            function saveFileTransfer(id) {
-                var f = fileDownloads[id];
-                if (f && f.done == 1) { saveAs(data2blob(f.data), f.name); }
-            }
-
-            function cancelFileTransfer(id) {
-                if ((currentFileUpload != null) && (currentFileUpload.id == id)) { currentFileUpload = null; }
-                if ((currentFileDownload != null) && (currentFileDownload.id == id)) { currentFileDownload = null; }
-
-                var found = false;
-                if (fileDownloads[id] && (fileDownloads[id].done != 1)) {
-                    delete fileDownloads[id];
-                    found = true;
-                } else {
-                    for (var i in fileUploads) {
-                        if (fileUploads[i].id == id) {
-                            send({ action: 'fileUploadCancel', id: id });
-                            fileUploads.splice(i, 1);
-                            found = true;
-                            break;
-                        }
-                    }
-                }
-                if (found) { changeFileInfo(id, 1, 200, 'gray'); } // Only cancel a file if it was in the file queue.
-            }
-
-            function cancelAllFileTransfers() {
-                for (var i in fileDownloads) { cancelFileTransfer(fileDownloads[i].id); }
-                for (var i in fileUploads) { cancelFileTransfer(fileUploads[i].id); }
-            }
-
-            function continueFileUpload() {
-                if (currentFileUpload == null) {
-                    // Select the next file to upload
-                    if (fileUploads.length == 0) { return; } // Nothing to do
-                    currentFileUpload = fileUploads[0];
-                    currentFileUpload.ptr = 0;
-
-                    // Indicate that we are sending this file
-                    send({ action: 'fileUploadStart', size: currentFileUpload.size, id: currentFileUpload.id, type: currentFileUpload.type, name: currentFileUpload.name });
-                } else {
-                    if (currentFileUpload.size <= currentFileUpload.ptr) {
-                        // If we are done, send the end marker
-                        send({ action: 'fileUploadEnd', size: currentFileUpload.size, id: currentFileUpload.id, type: currentFileUpload.type, name: currentFileUpload.name });
-                        changeFileInfo(currentFileUpload.id, 3, 200);
-                        fileUploads.splice(0, 1);
-                        currentFileUpload = null;
-                        continueFileUpload(); // Send the next file
-                    } else {
-                        // Send the next block
-                        var nextBlockLen = Math.min(4000, currentFileUpload.data.length - currentFileUpload.ptr);
-                        var data = currentFileUpload.data.substring(currentFileUpload.ptr, currentFileUpload.ptr + nextBlockLen);
-                        send({ action: 'fileData', id: currentFileUpload.id, data: data });
-                        currentFileUpload.ptr += nextBlockLen;
-                        changeFileInfo(currentFileUpload.id, 0, (currentFileUpload.ptr * 200 / currentFileUpload.size));
-                    }
-                }
-            }
-
-            function continueFileDownload(msg) {
-                send({ action: 'fileUploadAck', id: msg.id });
-            }
-
-            // Toggle notification
-            function enableNotificationsButtonClick() {
-                if (notificationSupport) {
-                    if (Notification) { Notification.requestPermission().then(function (permission) { QV('notifyButton', permission != 'granted'); }); }
-                }
-                return false;
-            }
-
-            // Camera button
-            function camButtonClick() {
-                if (localStream == null) { startLocalStream({ video: true, audio: true }); }
-            }
-
-            // Microphone
-            function micButtonClick() {
-                if (localStream == null) { startLocalStream({ video: false, audio: true }); }
-            }
-
-            function hangUpButtonClick(id, fromRemote) {
-                //console.log('hangUpButtonClick', id);
-                var localVideo = Q('localVideoCanvas');
-                var remoteVideo = Q('remoteVideoCanvas');
-                var webrtc = webrtcSessions[(multiWebRtc == true)? id : 0];
-
-                if ((id == 0) && (webchannel != null)) { try { webchannel.close(); } catch (e) { } webchannel = null; }
-
-                if (webrtc) {
-                    if ((multiWebRtc == true) || (id == 0)) {
-                        webrtc.ontrack = null;
-                        webrtc.onremovetrack = null;
-                        webrtc.onremovestream = null;
-                        webrtc.onnicecandidate = null;
-                        webrtc.oniceconnectionstatechange = null;
-                        webrtc.onsignalingstatechange = null;
-                        webrtc.onicegatheringstatechange = null;
-                        webrtc.onnotificationneeded = null;
-                    }
-
-                    if ((id == 1) && localStream) { var tracks = localStream.getTracks(); for (var i in tracks) { tracks[i].stop(); } localStream = null; }
-                    if ((id == 2) && remoteStream) { var tracks = remoteStream.getTracks(); for (var i in tracks) { tracks[i].stop(); } remoteStream = null; }
-
-                    if ((multiWebRtc == true) || (id == 0)) {
-                        webrtc.close();
-                        delete webrtcSessions[id];
-                    }
-                }
-
-                if (id == 1) {
-                    localVideo.removeAttribute('src');
-                    localVideo.removeAttribute('srcObject');
-                    if (localStream != null) { localStream = null; }
-                    displayLocalVideo(false);
-                } else if (id == 2) {
-                    remoteVideo.removeAttribute('src');
-                    remoteVideo.removeAttribute('srcObject');
-                    displayRemoteVideo(false);
-                }
-
-                if (fromRemote != true) { send({ action: 'videoStop', id: id }); }
-                updateControls();
-            }
-
-            // Setup local audio/video
-            function startLocalStream(constraints) {
-                var channel = (multiWebRtc == true) ? 1 : 0;
-                if (localStream != null) return;
-                if ((multiWebRtc == true) && (webrtcSessions[1] != null)) return;
-                if (navigator.mediaDevices.getUserMedia) {
-                    localStream = 1;
-                    updateControls();
-                    navigator.mediaDevices.getUserMedia(constraints)
-                    .then(function (stream) {
-                        localStream = stream;
-                        var tracks = localStream.getTracks();
-                        var webrtc = startWebRTC(channel);
-                        if (constraints.video == true) {
-                            var video = Q('localVideoCanvas');
-                            video.srcObject = stream;
-                            video.onloadedmetadata = function (e) { video.play(); };
-                            displayLocalVideo(true);
-                        }
-                        for (var i in tracks) { webrtc.addTrack(tracks[i], localStream); }
-                    }, function (err) {
-                        displayControl(err.message + '.');
-                        hangUpButtonClick(1);
-                    });
-                }
-            }
-
-            // This is the main start
-            function start() {
-                // Get started
-                updateControls();
-                if ((typeof args.id == 'string') && (args.id.length > 0)) {
-                    var url = window.location.protocol.replace('http', 'ws') + '//' + window.location.host + window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/')) + '/meshrelay.ashx?id=' + args.id;
-                    if ((args.auth != null) && (args.auth != '')) { url += '&auth=' + args.auth; }
-                    socket = new WebSocket(url);
-                    socket.onopen = function () { state = 1; displayControl("Waiting for other user..."); }
-                    socket.onerror = function (e) { /*console.error(e);*/ }
-                    socket.onclose = function () { disconnect(); }
-                    socket.onmessage = function (msg) {
-                        if ((state < 2) && (typeof msg.data == 'string') && ((msg.data == 'c') || (msg.data == 'cr'))) {
-                            serverRecording = (msg.data == 'cr');
-                            QV('recordIcon', serverRecording);
-                            hangUpButtonClick(0, true);
-                            hangUpButtonClick(1, true);
-                            hangUpButtonClick(2, true);
-                            displayControl("Connected.");
-                            state = 2;
-                            updateControls();
-                            sendws({ action: 'random', random: random }); // Send a random number. Higher number starts the WebRTC session.
-                            updateLocalOutText();
-                            updateRemoteOutText();
-                            return;
-                        }
-                        if (msg.data[0] == '{') { processMessage(msg.data, 1); }
-                    }
-                } else {
-                    displayControl("Error: No connection key specified.");
-                }
-            }
-
-            function saveChatSession() {
-                saveAs(data2blob(chatTextSession), "ChatSession");
-            }
-
-            start();
-
-            function onUnLoad() {
-                for (var i = 0; i < 3; i++) { if (webrtcSessions[i]) { try { webrtcSessions[i].close(); delete webrtcSessions[i]; } catch (ex) { } } }
-                if (webchannel != null) { try { webchannel.close(); } catch (ex) { } webchannel = null; }
-                if (socket != null) { try { socket.close(); } catch (ex) { } socket = null; }
-            }
-
-            function isSafeString3(str) { return ((typeof str == 'string') && (str.indexOf('<') == -1) && (str.indexOf('>') == -1) && (str.indexOf('&') == -1) && (str.indexOf('"') == -1) && (str.indexOf('\'') == -1) && (str.indexOf('+') == -1) && (str.indexOf('(') == -1) && (str.indexOf(')') == -1) && (str.indexOf('#') == -1) && (str.indexOf(':') == -1)) };
-
-            // Parse URL arguments, only keep safe values
-            function XparseUriArgs() {
-                var href = window.document.location.href;
-                if (href.endsWith('#')) { href = href.substring(0, href.length - 1); }
-                var name, r = {}, parsedUri = href.split(/[\?&|]/);
-                parsedUri.splice(0, 1);
-                for (var j in parsedUri) {
-                    var arg = parsedUri[j], i = arg.indexOf('=');
-                    name = arg.substring(0, i);
-                    r[name] = arg.substring(i + 1);
-                    if (!isSafeString3(r[name])) { delete r[name]; } else { var x = parseInt(r[name]); if (x == r[name]) { r[name] = x; } }
-                }
-                return r;
-            }
-
-            function updateLocalOutText() {
-                var l = Q('xouttext').value;
-                if (((state != 2) || (l == '')) && (localOutText == true)) {
-                    localOutText = false;
-                    send({ action: 'outtext', value: false });
-                } else if ((state == 2) && ((l != '') && (localOutText == false))) {
-                    localOutText = true;
-                    send({ action: 'outtext', value: true });
-                }
-            }
-
-            function updateRemoteOutText(newState) {
-                //console.log('updateRemoteOutText', newState);
-                if (state != 2) { newState = false; }
-                if (remoteOutText != newState) { remoteOutText = newState; QV('typingIndicator', remoteOutText); }
-            }
+        function updateRemoteOutText(newState) {
+            //console.log('updateRemoteOutText', newState);
+            if (state != 2) { newState = false; }
+            if (remoteOutText != newState) { remoteOutText = newState; QV('typingIndicator', remoteOutText); }
+        }
 
     </script>
 </body>
diff --git a/views/mstsc.handlebars b/views/mstsc.handlebars
index d384e033..8c5ef9b5 100644
--- a/views/mstsc.handlebars
+++ b/views/mstsc.handlebars
@@ -75,6 +75,7 @@
         }
     </style>
     <script language="javascript">
+        var random = '{{{randomlength}}}' // Random length string for BREACH mitigation
         var client = null;
         var canvas = null;
         var urlargs = parseUriArgs();
diff --git a/views/player.handlebars b/views/player.handlebars
index e7af6490..37c43c39 100644
--- a/views/player.handlebars
+++ b/views/player.handlebars
@@ -96,6 +96,7 @@
         </div>
     </div>
     <script>
+        var random = '{{{randomlength}}}' // Random length string for BREACH mitigation
         var recFile = null;
         var recFilePtr = 0;
         var recFileStartTime = 0;
diff --git a/views/sharing-mobile.handlebars b/views/sharing-mobile.handlebars
index 73647bec..87bb00ce 100644
--- a/views/sharing-mobile.handlebars
+++ b/views/sharing-mobile.handlebars
@@ -737,6 +737,7 @@
     <iframe name="fileUploadFrame" style=display:none></iframe>
     <script>
         'use strict';
+        var random = '{{{randomlength}}}' // Random length string for BREACH mitigation
         var args = parseUriArgs();
         var urlargs = args;
         var sessionTime = parseInt('{{{sessiontime}}}');
diff --git a/views/sharing.handlebars b/views/sharing.handlebars
index 12f4407b..ca10d11a 100644
--- a/views/sharing.handlebars
+++ b/views/sharing.handlebars
@@ -283,6 +283,7 @@
         </div>
     </div>
     <script>
+        var random = '{{{randomlength}}}' // Random length string for BREACH mitigation
         var sessionActivity = null;
         var desktop = null;
         var agentPresent = true;
diff --git a/views/ssh.handlebars b/views/ssh.handlebars
index 32c59ce2..407e0489 100644
--- a/views/ssh.handlebars
+++ b/views/ssh.handlebars
@@ -68,6 +68,7 @@
         </div>
     </div>
     <script>
+        var random = '{{{randomlength}}}' // Random length string for BREACH mitigation
         var term = null;
         var termfit = null;
         var resizeTimer = null;
diff --git a/views/terms.handlebars b/views/terms.handlebars
index 0ffa2da7..1434c15c 100644
--- a/views/terms.handlebars
+++ b/views/terms.handlebars
@@ -161,6 +161,7 @@
     </div>
     <script>
         'use strict';
+        var random = '{{{randomlength}}}' // Random length string for BREACH mitigation
         var uiMode = parseInt(getstore('uiMode', 1));
         var webPageStackMenu = false;
         var webPageFullScreen = true;
diff --git a/views/xterm.handlebars b/views/xterm.handlebars
index d472976c..21e41028 100644
--- a/views/xterm.handlebars
+++ b/views/xterm.handlebars
@@ -80,6 +80,7 @@
         </div>
     </div>
     <script>
+        var random = '{{{randomlength}}}' // Random length string for BREACH mitigation
         var term = null;
         var termfit = null;
         var tunnel = null;
diff --git a/webserver.js b/webserver.js
index f54d7f31..08fdea4d 100644
--- a/webserver.js
+++ b/webserver.js
@@ -7696,6 +7696,10 @@ module.exports.CreateWebServer = function (parent, db, args, certificates, doneF
         xargs.domainurl = domain.url;
         xargs.autocomplete = (domain.autocomplete === false)?'x':'autocomplete'; // This option allows autocomplete to be turned off on the login page.
         if (typeof domain.hide == 'number') { xargs.hide = domain.hide; }
+
+        // To mitigate any possible BREACH attack, we generate a random length string here.
+        xargs.randomlength = (args.webpagelengthrandomization !== false) ? parent.crypto.randomBytes(parent.crypto.randomInt(0, 256)).toString('base64') : '';
+
         return xargs;
     }