2018-12-20 17:14:37 -05:00
<!DOCTYPE html> <html style="height:100%"> <head> <title>MeshMessenger</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta name="format-detection" content="telephone=no"> <style>body { margin:0;padding:0;border:0;color:black;font-size:13px;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;background-color:#d3d9d6;}#container { background-color:#fff;width:960px;min-width:960px;margin:0 auto;border-top:0;border-right:1px solid #b7b7b7;border-bottom:0;border-left:1px solid #b7b7b7;padding:0;}#masthead { width:auto;margin:0;padding:0;overflow:auto;text-align:right;background-color:#036;width:960px;}#column_l { position:relative;float:left;width:930px;margin:0;padding:0 15px;background-color:#fff;}#footer { clear:both;overflow:auto;width:100%;text-align:center;background-color:#113962;padding-top:5px;padding-bottom:5px;}#masthead img { float:left;}#masthead p { font-size:11px;color:#fff;margin:10px 10px 0;}#footer a { color:#fff;text-decoration:underline;}#footer a:hover { color:#fff;text-decoration:none;}a { color:#036;text-decoration:underline;}.i1 { background:url(../images/icons50.png) 0px 0px;height:50px;width:50px;cursor:pointer;border:none;}.i2 { background:url(../images/icons50.png) -50px 0px;height:50px;width:50px;cursor:pointer;border:none;}.i3 { background:url(../images/icons50.png) -100px 0px;height:50px;width:50px;cursor:pointer;border:none;}.i4 { background:url(../images/icons50.png) -150px 0px;height:50px;width:50px;cursor:pointer;border:none;}.i5 { background:url(../images/icons50.png) -200px 0px;height:50px;width:50px;cursor:pointer;border:none;}.i6 { background:url(../images/icons50.png) -250px 0px;height:50px;width:50px;cursor:pointer;border:none;}.j1 { background:url(../images/icons16.png) 0px 0px;height:16px;width:16px;cursor:pointer;border:none;}.j2 { background:url(../images/icons16.png) -16px 0px;height:16px;width:16px;cursor:pointer;border:none;}.j3 { background:url(../images/icons16.png) -32px 0px;height:16px;width:16px;cursor:pointer;border:none;}.j4 { background:url(../images/icons16.png) -48px 0px;height:16px;width:16px;cursor:pointer;border:none;}.j5 { background:url(../images/icons16.png) -64px 0px;height:16px;width:16px;cursor:pointer;border:none;}.j6 { background:url(../images/icons16.png) -80px 0px;height:16px;width:16px;cursor:pointer;border:none;}.lbbutton { width:74px;height:74px;border-radius:5px;background-color:white;margin-left:8px;margin-top:8px;position:relative;cursor:pointer;opacity:0.5;}.lbbutton:hover { opacity:1;}.lbbuttonsel { opacity:0.9;}.lbbuttonsel2 { width:82px;border-radius:5px 0px 0px 5px;opacity:1;}.lb1 { background:url(../images/leftbar-62.jpg) -0px 0px;height:62px;width:62px;cursor:pointer;border:none;}.lb2 { background:url(../images/leftbar-62.jpg) -75px 0px;height:62px;width:62px;cursor:pointer;border:none;}.lb3 { background:url(../images/leftbar-62.jpg) -150px 0px;height:62px;width:62px;cursor:pointer;border:none;}.lb4 { background:url(../images/leftbar-62.jpg) -225px 0px;height:62px;width:62px;cursor:pointer;border:none;}.lb5 { background:url(../images/leftbar-62.jpg) -294px 0px;height:62px;width:62px;cursor:pointer;border:none;}.lb6 { background:url(../images/leftbar-62.jpg) -360px 0px;height:62px;width:62px;cursor:pointer;border:none;}.m0 { background :url(../images/images16.png) -32px 0px;height :16px;width :16px;border:none;float:left }.m1 { background :url(../images/images16.png) -16px 0px;height :16px;width :16px;border:none;float:left }.m2 { background :url(../images/images16.png) -96px 0px;height :16px;width :16px;border:none;float:left }.m3 { background :url(../images/images16.png) -112px 0px;height :16px;width :16px;border:none;float:left }.si0 { background :url(../images/icons16.png) 0px 0px;height :16px;width :16px;border:none;float:left }.si1 { background :url(../images/icons16.png) -16px 0px;height :16px;width :16px;border:none;float:left }.si2 { background :url(../images/icons16.png) -32px 0px;height :16px;width :16px;border:none;float:left }.si3 { background :url(../images/icons16.png) -48px 0px;height :16px;width :16px;border:none;fl
2018-12-20 15:12:24 -05:00
* @description Set of short commonly used methods for handling HTML elements
* @author Ylian Saint-Hilaire
* @version v0.0.1b
*/
// Add startsWith for IE browser
if (!String.prototype.startsWith) { String.prototype.startsWith = function (str) { return this.lastIndexOf(str, 0) === 0; }; }
if (!String.prototype.endsWith) { String.prototype.endsWith = function (str) { return this.indexOf(str, this.length - str.length) !== -1; }; }
// Quick UI functions, a bit of a replacement for jQuery
//function Q(x) { if (document.getElementById(x) == null) { console.log('Invalid element: ' + x); } return document.getElementById(x); } // "Q"
function Q(x) { return document.getElementById(x); } // "Q"
function QS(x) { try { return Q(x).style; } catch (x) { } } // "Q" style
function QE(x, y) { try { Q(x).disabled = !y; } catch (x) { } } // "Q" enable
function QV(x, y) { try { QS(x).display = (y ? '' : 'none'); } catch (x) { } } // "Q" visible
function QA(x, y) { Q(x).innerHTML += y; } // "Q" append
function QH(x, y) { Q(x).innerHTML = y; } // "Q" html
// Move cursor to end of input box
function inputBoxFocus(x) { Q(x).focus(); var v = Q(x).value; Q(x).value = ''; Q(x).value = v; }
// Binary encoding and decoding functions
function ReadShort(v, p) { return (v.charCodeAt(p) << 8) + v.charCodeAt(p + 1); }
function ReadShortX(v, p) { return (v.charCodeAt(p + 1) << 8) + v.charCodeAt(p); }
function ReadInt(v, p) { return (v.charCodeAt(p) * 0x1000000) + (v.charCodeAt(p + 1) << 16) + (v.charCodeAt(p + 2) << 8) + v.charCodeAt(p + 3); } // We use "*0x1000000" instead of "<<24" because the shift converts the number to signed int32.
function ReadSInt(v, p) { return (v.charCodeAt(p) << 24) + (v.charCodeAt(p + 1) << 16) + (v.charCodeAt(p + 2) << 8) + v.charCodeAt(p + 3); }
function ReadIntX(v, p) { return (v.charCodeAt(p + 3) * 0x1000000) + (v.charCodeAt(p + 2) << 16) + (v.charCodeAt(p + 1) << 8) + v.charCodeAt(p); }
function ShortToStr(v) { return String.fromCharCode((v >> 8) & 0xFF, v & 0xFF); }
function ShortToStrX(v) { return String.fromCharCode(v & 0xFF, (v >> 8) & 0xFF); }
function IntToStr(v) { return String.fromCharCode((v >> 24) & 0xFF, (v >> 16) & 0xFF, (v >> 8) & 0xFF, v & 0xFF); }
function IntToStrX(v) { return String.fromCharCode(v & 0xFF, (v >> 8) & 0xFF, (v >> 16) & 0xFF, (v >> 24) & 0xFF); }
function MakeToArray(v) { if (!v || v == null || typeof v == 'object') return v; return [v]; }
function SplitArray(v) { return v.split(','); }
function Clone(v) { return JSON.parse(JSON.stringify(v)); }
function EscapeHtml(x) { if (typeof x == "string") return x.replace(/&/g, '&').replace(/>/g, '>').replace(/</g, '<').replace(/"/g, '"').replace(/'/g, '''); if (typeof x == "boolean") return x; if (typeof x == "number") return x; }
function EscapeHtmlBreaks(x) { if (typeof x == "string") return x.replace(/&/g, '&').replace(/>/g, '>').replace(/</g, '<').replace(/"/g, '"').replace(/'/g, ''').replace(/\r/g, '<br />').replace(/\n/g, '').replace(/\t/g, ' '); if (typeof x == "boolean") return x; if (typeof x == "number") return x; }
// Move an element from one position in an array to a new position
function ArrayElementMove(arr, from, to) { arr.splice(to, 0, arr.splice(from, 1)[0]); };
// Print object for HTML
function ObjectToStringEx(x, c) {
var r = "";
if (x != 0 && (!x || x == null)) return "(Null)";
if (x instanceof Array) { for (var i in x) { r += '<br />' + gap(c) + "Item #" + i + ": " + ObjectToStringEx(x[i], c + 1); } }
else if (x instanceof Object) { for (var i in x) { r += '<br />' + gap(c) + i + " = " + ObjectToStringEx(x[i], c + 1); } }
else { r += EscapeHtml(x); }
return r;
}
// Print object for console
function ObjectToStringEx2(x, c) {
var r = "";
if (x != 0 && (!x || x == null)) return "(Null)";
if (x instanceof Array) { for (var i in x) { r += '\r\n' + gap2(c) + "Item #" + i + ": " + ObjectToStringEx2(x[i], c + 1); } }
else if (x instanceof Object) { for (var i in x) { r += '\r\n' + gap2(c) + i + " = " + ObjectToStringEx2(x[i], c + 1); } }
else { r += EscapeHtml(x); }
return r;
}
// Create an ident gap
function gap(c) { var x = ''; for (var i = 0; i < (c * 4) ; i++) { x += ' '; } return x; }
function gap2(c) { var x = ''; for (var i = 0; i < (c * 4) ; i++) { x += ' '; } return x; }
// Print an object in html
function ObjectToString(x) { return ObjectToStringEx(x, 0); }
function ObjectToString2(x) { return ObjectToStringEx2(x, 0); }
// Convert a hex string to a raw string
function hex2rstr(d) {
if (typeof d != "string" || d.length == 0) return '';
var r = '', m = ('' + d).match(/../g), t;
while (t = m.shift()) r += String.fromCharCode('0x' + t);
return r
}
// Convert decimal to hex
function char2hex(i) { return (i + 0x100).toString(16).substr(-2).toUpperCase(); }
// Convert a raw string to a hex string
function rstr2hex(input) { var r = '', i; for (i = 0; i < input.length; i++) { r += char2hex(input.charCodeAt(i)); } return r; }
// UTF-8 encoding & decoding functions
function encode_utf8(s) { return unescape(encodeURIComponent(s)); }
function decode_utf8(s) { return decodeURIComponent(escape(s)); }
// 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);
var blob = new Blob([new Uint8Array(bytes)]);
return blob;
}
// Generate random numbers
function random(max) { return Math.floor(Math.random() * max); }
// Trademarks
function trademarks(x) { return x.replace(/\(R\)/g, '®').replace(/\(TM\)/g, '™'); }
(function (global, factory) {
if (typeof define === "function" && define.amd) {
define([], factory);
} else if (typeof exports !== "undefined") {
factory();
} else {
var mod = {
exports: { }
};
factory();
global.FileSaver = mod.exports;
}
})(this, function () {
"use strict";
/*
* FileSaver.js
* A saveAs() FileSaver implementation.
*
* By Eli Grey, http://eligrey.com
*
* License : https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md (MIT)
* source : http://purl.eligrey.com/github/FileSaver.js
*/
// The one and only way of getting global scope in all environments
// https://stackoverflow.com/q/3277182/1008999
var _global = typeof window === 'object' && window.window === window ? window : typeof self === 'object' && self.self === self ? self : typeof global === 'object' && global.global === global ? global : void 0;
function bom(blob, opts) {
if (typeof opts === 'undefined') opts = {
autoBom: false
};else if (typeof opts !== 'object') {
console.warn('Depricated: Expected third argument to be a object');
opts = {
autoBom: !opts
};
} // prepend BOM for UTF-8 XML and text/* types (including HTML)
// note: your browser will automatically convert UTF-16 U+FEFF to EF BB BF
if (opts.autoBom && /^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)) {
return new Blob([String.fromCharCode(0xFEFF), blob], {
type: blob.type
});
}
return blob;
}
function download(url, name, opts) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.onload = function () {
saveAs(xhr.response, name, opts);
};
xhr.onerror = function () {
console.error('could not download file');
};
xhr.send();
}
function corsEnabled(url) {
var xhr = new XMLHttpRequest(); // use sync to avoid popup blocker
xhr.open('HEAD', url, false);
xhr.send();
return xhr.status >= 200 && xhr.status <= 299;
} // `a.click()` doesn't work for all browsers (#465)
function click(node) {
try {
node.dispatchEvent(new MouseEvent('click'));
} catch (e) {
var evt = document.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
node.dispatchEvent(evt);
}
}
var saveAs = _global.saveAs || // probably in some web worker
typeof window !== 'object' || window !== _global ? function saveAs() { }
/* noop */
// Use download attribute first if possible (#193 Lumia mobile)
: 'download' in HTMLAnchorElement.prototype ? function saveAs(blob, name, opts) {
var URL = _global.URL || _global.webkitURL;
var a = document.createElement('a');
name = name || blob.name || 'download';
a.download = name;
a.rel = 'noopener'; // tabnabbing
// TODO: detect chrome extensions & packaged apps
// a.target = '_blank'
if (typeof blob === 'string') {
// Support regular links
a.href = blob;
if (a.origin !== location.origin) {
corsEnabled(a.href) ? download(blob, name, opts) : click(a, a.target = '_blank');
} else {
click(a);
}
} else {
// Support blobs
a.href = URL.createObjectURL(blob);
setTimeout(function () {
URL.revokeObjectURL(a.href);
}, 4E4); // 40s
setTimeout(function () {
click(a);
}, 0);
}
} // Use msSaveOrOpenBlob as a second approach
: 'msSaveOrOpenBlob' in navigator ? function saveAs(blob, name, opts) {
name = name || blob.name || 'download';
if (typeof blob === 'string') {
if (corsEnabled(blob)) {
download(blob, name, opts);
} else {
var a = document.createElement('a');
a.href = blob;
a.target = '_blank';
setTimeout(function () {
click(a);
});
}
} else {
navigator.msSaveOrOpenBlob(bom(blob, opts), name);
}
} // Fallback to using FileReader and a popup
: function saveAs(blob, name, opts, popup) {
// Open a popup immediately do go around popup blocker
// Mostly only avalible on user interaction and the fileReader is async so...
popup = popup || open('', '_blank');
if (popup) {
popup.document.title = popup.document.body.innerText = 'downloading...';
}
if (typeof blob === 'string') return download(blob, name, opts);
var force = blob.type === 'application/octet-stream';
var isSafari = /constructor/i.test(_global.HTMLElement) || _global.safari;
var isChromeIOS = /CriOS\/[\d]+/.test(navigator.userAgent);
if ((isChromeIOS || force && isSafari) && typeof FileReader === 'object') {
// Safari doesn't allow downloading of blob urls
var reader = new FileReader();
reader.onloadend = function () {
var url = reader.result;
url = isChromeIOS ? url : url.replace(/^data:[^;]*;/, 'data:attachment/file;');
if (popup) popup.location.href = url;else location = url;
popup = null; // reverse-tabnabbing #460
};
reader.readAsDataURL(blob);
} else {
var URL = _global.URL || _global.webkitURL;
var url = URL.createObjectURL(blob);
if (popup) popup.location = url;else location.href = url;
popup = null; // reverse-tabnabbing #460
setTimeout(function () {
URL.revokeObjectURL(url);
}, 4E4); // 40s
}
};
_global.saveAs = saveAs.saveAs = saveAs;
if (typeof module !== 'undefined') {
module.exports = saveAs;
}
});
var userInputFocus = 0;
var args = parseUriArgs();
var socket = null; // Websocket object
var state = 0; // Connection state. 0 = Disconnected, 1 = Connecting, 2 = Connected.
2018-12-20 17:14:37 -05:00
// WebRTC sessions and data, audio and video channels
2018-12-20 15:12:24 -05:00
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;
2018-12-20 17:14:37 -05:00
var multiWebRtc = true; // if set to true, multiple WebRTC sessions will be setup. If false, everything uses one session.
var userMediaSupport = 0;
getUserMediaSupport(function (x) { userMediaSupport = x; })
var webrtcconfiguration = " {{{ webrtconfig }}} ";
if (webrtcconfiguration == '') { webrtcconfiguration = null; } else { try { webrtcconfiguration = JSON.parse(decodeURIComponent(webrtcconfiguration)); } catch (ex) { console.log('Invalid WebRTC config: \"' + webrtcconfiguration + '\".'); webrtcconfiguration = null; } }
// File transfer state
2018-12-20 15:12:24 -05:00
var fileUploads = [];
var fileDownloads = { };
var currentFileUpload = null;
var currentFileDownload = null;
// Set the title
if (args.title) { QH('xtitle', ' - ' + args.title); document.title = document.title + ' - ' + args.title; }
2018-12-20 17:14:37 -05:00
// Listen to drag & drop events
2018-12-20 15:12:24 -05:00
document.addEventListener('dragover', haltEvent, false);
document.addEventListener('dragleave', haltEvent, false);
document.addEventListener('drop', fileDrop, false);
2018-12-20 17:14:37 -05:00
// Trap document key up events
2018-12-20 15:12:24 -05:00
document.onkeyup = function ondockeypress(e) {
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); }
}
}
if (userInputFocus == 0) { haltEvent(e); return false; }
}
// Trap document key presses
document.onkeypress = function ondockeypress(e) {
if (state == 2) {
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; }
}
}
if (userInputFocus == 0) { haltEvent(e); return false; }
}
function onUserInputFocus(x) { userInputFocus = x; }
function displayClear() { 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);
}
}
2018-12-20 17:14:37 -05:00
// Detect if microphone & camera are present
// 0 = nomedia, 1 = miconly, 2 = mic&cam
function getUserMediaSupport(func) {
try {
navigator.mediaDevices.enumerateDevices()
.then(devices => {
try {
var mic = 0, cam = 0;
devices.forEach(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) { }
}
2018-12-20 15:12:24 -05:00
// Display a control message
function displayControl(msg) {
QA('xmsg', '<div style="clear:both"><div style="color:gray;float:left;margin-bottom:2px">' + msg + '</div><div></div></div>');
Q('xmsg').scrollTop = 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');
QS('localVideo')['top'] = rv ? '320px' : '45px';
}
// Display a message from the remote user
function displayRemote(msg) {
QA('xmsg', '<div style="clear:both"><div class="remoteBubble">' + msg + '</div><div></div></div>');
Q('xmsg').scrollTop = Q('xmsg').scrollHeight;
}
// Display and send a message from the local user
function xsend(event) {
var outtext = Q('xouttext').value;
if (outtext.length > 0) {
Q('xouttext').value = '';
QA('xmsg', '<div style="clear:both"><div class="localBubble">' + outtext + '</div><div></div></div>');
Q('xmsg').scrollTop = Q('xmsg').scrollHeight;
send( { action: 'chat', msg: outtext });
}
}
function haltEvent(e) { if (e.preventDefault) e.preventDefault(); if (e.stopPropagation) e.stopPropagation(); return false; }
function parseUriArgs() { var name, r = { }, parsedUri = window.document.location.href.split(/[\?&|\=]/); parsedUri.splice(0, 1); for (x in parsedUri) { switch (x % 2) { case 0: { name = parsedUri[x]; break; } case 1: { r[name] = parsedUri[x]; var x = parseInt(r[name]); if (x == r[name]) { r[name] = x; } break; } } } return r; }
// Update user controls
function updateControls() {
QE('sendButton', state == 2);
QE('clearButton', state == 2);
QE('xouttext', state == 2);
QV('fileButton', state == 2);
2018-12-20 17:14:37 -05:00
QV('camButton', webchannel && webchannel.ok && !localStream && (userMediaSupport == 2));
QV('micButton', webchannel && webchannel.ok && !localStream && (userMediaSupport > 0));
2018-12-20 15:12:24 -05:00
QV('hangupButton', webchannel && webchannel.ok && localStream);
}
// This is the WebRTC setup
function startWebRTC(id, startDataChannel) {
2018-12-20 17:14:37 -05:00
if ((webrtcSessions[0] != null) && (multiWebRtc == false)) { return webrtcSessions[0]; };
2018-12-20 15:12:24 -05:00
// 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(); 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;
2018-12-20 17:14:37 -05:00
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); });
2018-12-20 15:12:24 -05:00
}, 20);
}
webrtc.ontrack = function (event) {
//console.log('ontrack', id);
var video = Q('remoteVideoCanvas');
video.srcObject = remoteStream = event.streams[0];
video.onloadedmetadata = function (e) { video.play(); };
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(); sendws( { action: 'rtcSwitch', v: 0 }); };
webchannel.onclose = function (event) { if (webchannel && webchannel.ok) { disconnect(); } else { hangUpButtonClick(0); } }
}
webrtcSessions[id] = webrtc;
return webrtc;
}
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 (webchannel && webchannel.ok) { sendws( { action: 'rtcSwitch', v: 1 }); webchannel.xoutBuffer = []; }
}
// Disconnect everything
function disconnect() {
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;
}
// Send data over the current transport (WebRTC first)
function send(data) {
if (state != 2) 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 (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; }
// 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);
switch (data.action) {
case 'chat': { displayRemote(data.msg); break; } // Incoming chat message.
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
}
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);
QA('xmsg', '<div style="clear:both"></div><div id="FILEUP-' + file.id + '" class="localBubble" style="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:16px;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"> </div></div></div></div>');
Q('xmsg').scrollTop = Q('xmsg').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;
QA('xmsg', '<div style="clear:both"></div><div id="FILEUP-' + file.id + '" class="remoteBubble" style="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:16px;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"> </div></div></div></div>');
Q('xmsg').scrollTop = Q('xmsg').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 });
}
// 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');
2018-12-20 17:14:37 -05:00
var webrtc = webrtcSessions[(multiWebRtc == true)? id : 0];
2018-12-20 15:12:24 -05:00
if ((id == 0) && (webchannel != null)) { try { webchannel.close(); } catch (e) { } webchannel = null; }
if (webrtc) {
2018-12-20 17:14:37 -05:00
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;
}
2018-12-20 15:12:24 -05:00
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; }
2018-12-20 17:14:37 -05:00
if ((multiWebRtc == true) || (id == 0)) {
webrtc.close();
delete webrtcSessions[id];
}
2018-12-20 15:12:24 -05:00
}
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) {
2018-12-20 17:14:37 -05:00
var channel = (multiWebRtc == true) ? 1 : 0;
if (localStream != null) return;
if ((multiWebRtc == true) && (webrtcSessions[1] != null)) return;
2018-12-20 15:12:24 -05:00
if (navigator.mediaDevices.getUserMedia) {
localStream = 1;
updateControls();
navigator.mediaDevices.getUserMedia(constraints)
.then(function (stream) {
localStream = stream;
2018-12-20 17:14:37 -05:00
var tracks = localStream.getTracks();
var webrtc = startWebRTC(channel);
2018-12-20 15:12:24 -05:00
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); }
})
.catch(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)) {
socket = new WebSocket(window.location.protocol.replace("http", "ws") + "//" + window.location.host + window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/')) + '/meshrelay.ashx?id=' + args.id);
socket.onopen = function () { state = 1; displayControl('Waiting for other user...'); }
2018-12-20 17:14:37 -05:00
socket.onerror = function (e) { /*console.error(e);*/ }
2018-12-20 15:12:24 -05:00
socket.onclose = function () { disconnect(); }
socket.onmessage = function (msg) {
if ((state < 2) && (typeof msg.data == 'string') && (msg.data == 'c')) {
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.
return;
}
if (state == 2) { processMessage(msg.data, 1); }
}
} else {
displayControl('Error: No connection key specified.');
}
}
start();
function onUnLoad() {
for (var i = 0; i < 3; i++) { if (webrtcSessions[i]) { webrtcSessions[i].close(); delete webrtcSessions[i]; } }
if (webchannel != null) { try { webchannel.close(); } catch (e) { } webchannel = null; }
if (socket != null) { try { socket.close(); } catch (e) { } socket = null; }
}
</script></body></html>
