beyhan
/
MeshCentral-Dokploy


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808
							<!DOCTYPE html>
<html lang="en" style=height:100%>
<head>
    <title>{{{title}}} - Messenger</title>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta content="text/html;charset=utf-8" http-equiv=Content-Type>
    <meta name="viewport" content="user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
    <meta name=format-detection content="telephone=no">
    <meta name="robots" content="noindex,nofollow">
    <link type="text/css" href="styles/style.css" media="screen" rel="stylesheet" title="CSS" />
    <link type="text/css" href="styles/messenger.css" media="screen" rel="stylesheet" title="CSS" />
    {{{customCSSTags}}}
    <link rel="apple-touch-icon" href="/favicon-303x303.png" />
    <script type="text/javascript" src="scripts/common-0.0.1{{min}}.js"></script>
    <script type="text/javascript" src="scripts/filesaver.min.js"></script>
    {{{customJSTags}}}
</head>
<body style="font-family:Arial,Helvetica,sans-serif">
    <div id="xtop" style="position:absolute;left:0;right:0;top:0;height:38px;background-color:#036;color:#EEE;box-shadow:3px 3px 10px gray">
        <img style="float:left" height="38" src="messenger.png" />
        <div style="position:absolute;background-color:#036;right:0;height:38px">
            <div id="saveButton" class="icon15 topButton" style="margin-right:4px" title="Save conversation" onclick="saveChatSession()"></div>
            <div id="notifyButton" class="icon13 topButton" style="display:none" title="Enable browser notification" onclick="enableNotificationsButtonClick()"></div>
            <div id="fileButton" class="icon4 topButton" title="Share a file" style="display:none" onclick="fileButtonClick()"></div>
            <div id="camButton" class="icon2 topButton" title="Activate camera & microphone" style="display:none" onclick="camButtonClick()"></div>
            <div id="micButton" class="icon6 topButton" title="Activate microphone" style="display:none" onclick="micButtonClick()"></div>
            <div id="hangupButton" class="icon11 topRedButton" title="Hang up" style="display:none" onclick="hangUpButtonClick(1)"></div>
            <div id="recordIcon" class='deskareaicon' title="Server is recording this session" style="background-color:red;margin:6px;margin-top:7px;border-radius:12px;height:24px;width:24px;float:right;display:none"></div>
        </div>
        <div style="padding-top:9px;padding-left:6px;font-size:20px;display:inline-block"><b><span id="xtitle"></span></b></div>
    </div>
    <div id="xmiddle" style="position:absolute;left:0;right:0;top:38px;bottom:36px;font-size:18px">
        <div id="xmsgparent" style="position:absolute;left:0;right:0;bottom:0;max-height:100%;overflow-y:auto">
            <div id="xmsg" style="padding:5px"></div>
            <div id="typingIndicator" style="display:none;margin-left:5px;clear:both"><img src="images/3dots-24.gif" srcset="images/3dots-48.gif 2x" /></div>
        </div>
    </div>
    <div id="xbottom" style="position:absolute;left:0;right:0;bottom:0px;height:36px;background-color:#036;font-size:18px">
        <table style="width:100%">
            <tr>
                <td>
                    <input id="xouttext" type="text" style="box-sizing:border-box;width:100%;font-size:18px" onfocus=onUserInputFocus(1) onblur=onUserInputFocus(0) onkeyup="updateLocalOutText()" />
                </td>
                <td style="width:1px">
                    <input type="button" id="sendButton" value="Send" style="box-sizing: border-box;float:right;font-size:18px" onclick="xsend(event)" />
                </td>
                <td style="width:1px">
                    <input type="button" id="clearButton" value="Clear" style="box-sizing: border-box;float:right;font-size:18px" onclick="displayClear()" />
                </td>
            </tr>
        </table>
    </div>
    <div id="remoteVideo" style="position:absolute;right:24px;top:45px;width:320px;height:calc(240px + 30px);background-color:gray;border-radius:12px 12px 12px 12px;box-shadow:3px 3px 10px gray;display:none">
        <div style="position:absolute;right:0;left:0;top:2.5px;text-align:center">Remote</div>
        <video id="remoteVideoCanvas" autoplay style="position:absolute;top:20px;left:0;width:100%;height:calc(100% - 30px);background-color:black" onclick="remotePlay(event)"></video>
        <div id="remoteClickToView" style="position:absolute;top:20px;left:0;width:100%;height:calc(100% - 30px);color:white;text-align:center;padding-top:20px;display:none" onclick="remotePlay(event)">Click here to view.</div>
    </div>
    <div id="localVideo" style="position:absolute;right:24px;top:320px;width:160px;height:calc(120px + 30px);background-color:gray;border-radius:12px 12px 12px 12px;box-shadow:3px 3px 10px gray;display:none">
        <div style="position:absolute;right:0;left:0;top:2.5px;text-align:center">Local</div>
        <video id="localVideoCanvas" autoplay muted style="position:absolute;top:20px;left:0;right:100%;height:calc(100% - 30px);background-color:black"></video>
    </div>
    <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 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 = '{{{webrtcconfig}}}';
        if (webrtcconfiguration == '') { webrtcconfiguration = null; } else { try { webrtcconfiguration = JSON.parse(decodeURIComponent(webrtcconfiguration)); } catch (ex) { console.log('Invalid WebRTC config: "' + webrtcconfiguration + '".'); webrtcconfiguration = null; } }
        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;

        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; }

        // 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 {
                    // 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>');
            Q('xmsgparent').scrollTop = Q('xmsgparent').scrollHeight;

            // If web notifications are granted, use it.
            if (notificationSupport) {
                if (Notification) { QV('notifyButton', Notification.permission != 'granted'); }
                if (Notification && (document.visibilityState === 'hidden') && (Notification.permission == 'granted')) {
                    if (notification != null) { notification.close(); notification = null; }
                    notification = new Notification(Q('xtitle').innerHTML.split('&nbsp;').join(' '), { body: msg });
                    notification.onclick = function(event) {
                        event.preventDefault();
                        if (document.visibilityState === 'hidden') window.focus();
                        notification.close();
                    };
                }
            }
        }

        // 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'); }
            }
            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 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]);
                    }
                }
            }
        }

        // 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); }
        }

    </script>
</body>
</html>