1075 lines
37 KiB
JavaScript
1075 lines
37 KiB
JavaScript
window.URL = window.URL || window.webkitURL;
|
|
window.isRtcSupported = !!(window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection);
|
|
|
|
if (!window.isRtcSupported) alert("WebRTC must be enabled for MoreLoad to work");
|
|
|
|
window.hiddenProperty = 'hidden' in document ? 'hidden' :
|
|
'webkitHidden' in document ? 'webkitHidden' :
|
|
'mozHidden' in document ? 'mozHidden' :
|
|
null;
|
|
window.visibilityChangeEvent = 'visibilitychange' in document ? 'visibilitychange' :
|
|
'webkitvisibilitychange' in document ? 'webkitvisibilitychange' :
|
|
'mozvisibilitychange' in document ? 'mozvisibilitychange' :
|
|
null;
|
|
|
|
class ServerConnection {
|
|
|
|
constructor() {
|
|
this._connect();
|
|
Events.on('pagehide', _ => this._disconnect());
|
|
document.addEventListener(window.visibilityChangeEvent, _ => this._onVisibilityChange());
|
|
if (navigator.connection) navigator.connection.addEventListener('change', _ => this._reconnect());
|
|
Events.on('room-secrets', e => this.send({ type: 'room-secrets', roomSecrets: e.detail }));
|
|
Events.on('join-ip-room', e => this.send({ type: 'join-ip-room'}));
|
|
Events.on('room-secrets-deleted', e => this.send({ type: 'room-secrets-deleted', roomSecrets: e.detail}));
|
|
Events.on('regenerate-room-secret', e => this.send({ type: 'regenerate-room-secret', roomSecret: e.detail}));
|
|
Events.on('resend-peers', _ => this.send({ type: 'resend-peers'}));
|
|
Events.on('pair-device-initiate', _ => this._onPairDeviceInitiate());
|
|
Events.on('pair-device-join', e => this._onPairDeviceJoin(e.detail));
|
|
Events.on('pair-device-cancel', _ => this.send({ type: 'pair-device-cancel' }));
|
|
Events.on('offline', _ => clearTimeout(this._reconnectTimer));
|
|
Events.on('online', _ => this._connect());
|
|
}
|
|
|
|
_connect() {
|
|
clearTimeout(this._reconnectTimer);
|
|
if (this._isConnected() || this._isConnecting()) return;
|
|
const ws = new WebSocket(this._endpoint());
|
|
ws.binaryType = 'arraybuffer';
|
|
ws.onopen = _ => this._onOpen();
|
|
ws.onmessage = e => this._onMessage(e.data);
|
|
ws.onclose = _ => this._onDisconnect();
|
|
ws.onerror = e => this._onError(e);
|
|
this._socket = ws;
|
|
}
|
|
|
|
_onOpen() {
|
|
console.log('WS: server connected');
|
|
Events.fire('ws-connected');
|
|
if (this._isReconnect) Events.fire('notify-user', 'Connected.');
|
|
}
|
|
|
|
_onPairDeviceInitiate() {
|
|
if (!this._isConnected()) {
|
|
Events.fire('notify-user', 'You need to be online to pair devices.');
|
|
return;
|
|
}
|
|
this.send({ type: 'pair-device-initiate' })
|
|
}
|
|
|
|
_onPairDeviceJoin(roomKey) {
|
|
if (!this._isConnected()) {
|
|
setTimeout(_ => this._onPairDeviceJoin(roomKey), 1000);
|
|
return;
|
|
}
|
|
this.send({ type: 'pair-device-join', roomKey: roomKey })
|
|
}
|
|
|
|
_setRtcConfig(config) {
|
|
window.rtcConfig = config;
|
|
}
|
|
|
|
_onMessage(msg) {
|
|
msg = JSON.parse(msg);
|
|
if (msg.type !== 'ping') console.log('WS receive:', msg);
|
|
switch (msg.type) {
|
|
case 'rtc-config':
|
|
this._setRtcConfig(msg.config);
|
|
break;
|
|
case 'peers':
|
|
this._onPeers(msg);
|
|
break;
|
|
case 'peer-joined':
|
|
Events.fire('peer-joined', msg);
|
|
break;
|
|
case 'peer-left':
|
|
Events.fire('peer-left', msg);
|
|
break;
|
|
case 'signal':
|
|
Events.fire('signal', msg);
|
|
break;
|
|
case 'ping':
|
|
this.send({ type: 'pong' });
|
|
break;
|
|
case 'display-name':
|
|
this._onDisplayName(msg);
|
|
break;
|
|
case 'pair-device-initiated':
|
|
Events.fire('pair-device-initiated', msg);
|
|
break;
|
|
case 'pair-device-joined':
|
|
Events.fire('pair-device-joined', msg);
|
|
break;
|
|
case 'pair-device-join-key-invalid':
|
|
Events.fire('pair-device-join-key-invalid');
|
|
break;
|
|
case 'pair-device-canceled':
|
|
Events.fire('pair-device-canceled', msg.roomKey);
|
|
break;
|
|
case 'pair-device-join-key-rate-limit':
|
|
Events.fire('notify-user', 'Rate limit reached. Wait 10 seconds and try again.');
|
|
break;
|
|
case 'secret-room-deleted':
|
|
Events.fire('secret-room-deleted', msg.roomSecret);
|
|
break;
|
|
case 'room-secret-regenerated':
|
|
Events.fire('room-secret-regenerated', msg);
|
|
break;
|
|
default:
|
|
console.error('WS receive: unknown message type', msg);
|
|
}
|
|
}
|
|
|
|
send(msg) {
|
|
if (!this._isConnected()) return;
|
|
if (msg.type !== 'pong') console.log("WS send:", msg)
|
|
this._socket.send(JSON.stringify(msg));
|
|
}
|
|
|
|
_onPeers(msg) {
|
|
Events.fire('peers', msg);
|
|
}
|
|
|
|
_onDisplayName(msg) {
|
|
// Add peerId and peerIdHash to sessionStorage to authenticate as the same device on page reload
|
|
sessionStorage.setItem("peerId", msg.message.peerId);
|
|
sessionStorage.setItem("peerIdHash", msg.message.peerIdHash);
|
|
|
|
// Add peerId to localStorage to mark it for other MoreLoad tabs on the same browser
|
|
BrowserTabsConnector.addPeerIdToLocalStorage().then(peerId => {
|
|
if (!peerId) return;
|
|
console.log("successfully added peerId to localStorage");
|
|
|
|
// Only now join rooms
|
|
Events.fire('join-ip-room');
|
|
PersistentStorage.getAllRoomSecrets().then(roomSecrets => {
|
|
Events.fire('room-secrets', roomSecrets);
|
|
});
|
|
});
|
|
|
|
Events.fire('display-name', msg);
|
|
}
|
|
|
|
_endpoint() {
|
|
// hack to detect if deployment or development environment
|
|
const protocol = location.protocol.startsWith('https') ? 'wss' : 'ws';
|
|
const webrtc = window.isRtcSupported ? '/webrtc' : '/fallback';
|
|
let ws_url = new URL(protocol + '://' + location.host + location.pathname + 'server' + webrtc);
|
|
const peerId = sessionStorage.getItem("peerId");
|
|
const peerIdHash = sessionStorage.getItem("peerIdHash");
|
|
if (peerId && peerIdHash) {
|
|
ws_url.searchParams.append('peer_id', peerId);
|
|
ws_url.searchParams.append('peer_id_hash', peerIdHash);
|
|
}
|
|
return ws_url.toString();
|
|
}
|
|
|
|
_disconnect() {
|
|
this.send({ type: 'disconnect' });
|
|
|
|
const peerId = sessionStorage.getItem("peerId");
|
|
BrowserTabsConnector.removePeerIdFromLocalStorage(peerId).then(_ => {
|
|
console.log("successfully removed peerId from localStorage");
|
|
});
|
|
|
|
if (!this._socket) return;
|
|
|
|
this._socket.onclose = null;
|
|
this._socket.close();
|
|
this._socket = null;
|
|
Events.fire('ws-disconnected');
|
|
this._isReconnect = true;
|
|
}
|
|
|
|
_onDisconnect() {
|
|
console.log('WS: server disconnected');
|
|
Events.fire('notify-user', 'Connecting..');
|
|
clearTimeout(this._reconnectTimer);
|
|
this._reconnectTimer = setTimeout(_ => this._connect(), 1000);
|
|
Events.fire('ws-disconnected');
|
|
this._isReconnect = true;
|
|
}
|
|
|
|
_onVisibilityChange() {
|
|
if (window.hiddenProperty) return;
|
|
this._connect();
|
|
}
|
|
|
|
_isConnected() {
|
|
return this._socket && this._socket.readyState === this._socket.OPEN;
|
|
}
|
|
|
|
_isConnecting() {
|
|
return this._socket && this._socket.readyState === this._socket.CONNECTING;
|
|
}
|
|
|
|
_onError(e) {
|
|
console.error(e);
|
|
}
|
|
|
|
_reconnect() {
|
|
this._disconnect();
|
|
this._connect();
|
|
}
|
|
}
|
|
|
|
class Peer {
|
|
|
|
constructor(serverConnection, isCaller, peerId, roomType, roomSecret) {
|
|
this._server = serverConnection;
|
|
this._isCaller = isCaller;
|
|
this._peerId = peerId;
|
|
this._roomType = roomType;
|
|
this._updateRoomSecret(roomSecret);
|
|
|
|
this._filesQueue = [];
|
|
this._busy = false;
|
|
|
|
// evaluate auto accept
|
|
this._evaluateAutoAccept();
|
|
}
|
|
|
|
sendJSON(message) {
|
|
this._send(JSON.stringify(message));
|
|
}
|
|
|
|
sendDisplayName(displayName) {
|
|
this.sendJSON({type: 'display-name-changed', displayName: displayName});
|
|
}
|
|
|
|
_isSameBrowser() {
|
|
return BrowserTabsConnector.peerIsSameBrowser(this._peerId);
|
|
}
|
|
|
|
_updateRoomSecret(roomSecret) {
|
|
// if peer is another browser tab, peer is not identifiable with roomSecret as browser tabs share all roomSecrets
|
|
// -> do not delete duplicates and do not regenerate room secrets
|
|
if (!this._isSameBrowser() && this._roomSecret && this._roomSecret !== roomSecret) {
|
|
// remove old roomSecrets to prevent multiple pairings with same peer
|
|
PersistentStorage.deleteRoomSecret(this._roomSecret).then(deletedRoomSecret => {
|
|
if (deletedRoomSecret) console.log("Successfully deleted duplicate room secret with same peer: ", deletedRoomSecret);
|
|
})
|
|
}
|
|
|
|
this._roomSecret = roomSecret;
|
|
|
|
if (!this._isSameBrowser() && this._roomSecret && this._roomSecret.length !== 256 && this._isCaller) {
|
|
// increase security by increasing roomSecret length
|
|
console.log('RoomSecret is regenerated to increase security')
|
|
Events.fire('regenerate-room-secret', this._roomSecret);
|
|
}
|
|
}
|
|
|
|
_evaluateAutoAccept() {
|
|
if (!this._roomSecret) {
|
|
this._setAutoAccept(false);
|
|
return;
|
|
}
|
|
|
|
PersistentStorage.getRoomSecretEntry(this._roomSecret)
|
|
.then(roomSecretEntry => {
|
|
const autoAccept = roomSecretEntry ? roomSecretEntry.entry.auto_accept : false;
|
|
this._setAutoAccept(autoAccept);
|
|
})
|
|
.catch(_ => {
|
|
this._setAutoAccept(false);
|
|
});
|
|
}
|
|
|
|
_setAutoAccept(autoAccept) {
|
|
this._autoAccept = autoAccept;
|
|
}
|
|
|
|
getResizedImageDataUrl(file, width = undefined, height = undefined, quality = 0.7) {
|
|
return new Promise((resolve, reject) => {
|
|
let image = new Image();
|
|
image.src = URL.createObjectURL(file);
|
|
image.onload = _ => {
|
|
let imageWidth = image.width;
|
|
let imageHeight = image.height;
|
|
let canvas = document.createElement('canvas');
|
|
|
|
// resize the canvas and draw the image data into it
|
|
if (width && height) {
|
|
canvas.width = width;
|
|
canvas.height = height;
|
|
} else if (width) {
|
|
canvas.width = width;
|
|
canvas.height = Math.floor(imageHeight * width / imageWidth)
|
|
} else if (height) {
|
|
canvas.width = Math.floor(imageWidth * height / imageHeight);
|
|
canvas.height = height;
|
|
} else {
|
|
canvas.width = imageWidth;
|
|
canvas.height = imageHeight
|
|
}
|
|
|
|
var ctx = canvas.getContext("2d");
|
|
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
|
|
|
|
let dataUrl = canvas.toDataURL("image/jpeg", quality);
|
|
resolve(dataUrl);
|
|
}
|
|
image.onerror = _ => reject(`Could not create an image thumbnail from type ${file.type}`);
|
|
}).then(dataUrl => {
|
|
return dataUrl;
|
|
}).catch(e => console.error(e));
|
|
}
|
|
|
|
async requestFileTransfer(files) {
|
|
let header = [];
|
|
let totalSize = 0;
|
|
let imagesOnly = true
|
|
for (let i=0; i<files.length; i++) {
|
|
Events.fire('set-progress', {peerId: this._peerId, progress: 0.8*i/files.length, status: 'prepare'})
|
|
header.push({
|
|
name: files[i].name,
|
|
mime: files[i].type,
|
|
size: files[i].size
|
|
});
|
|
totalSize += files[i].size;
|
|
if (files[i].type.split('/')[0] !== 'image') imagesOnly = false;
|
|
}
|
|
|
|
Events.fire('set-progress', {peerId: this._peerId, progress: 0.8, status: 'prepare'})
|
|
|
|
let dataUrl = '';
|
|
if (files[0].type.split('/')[0] === 'image') {
|
|
dataUrl = await this.getResizedImageDataUrl(files[0], 400, null, 0.9);
|
|
}
|
|
|
|
Events.fire('set-progress', {peerId: this._peerId, progress: 1, status: 'prepare'})
|
|
|
|
this._filesRequested = files;
|
|
|
|
this.sendJSON({type: 'request',
|
|
header: header,
|
|
totalSize: totalSize,
|
|
imagesOnly: imagesOnly,
|
|
thumbnailDataUrl: dataUrl
|
|
});
|
|
Events.fire('set-progress', {peerId: this._peerId, progress: 0, status: 'wait'})
|
|
}
|
|
|
|
async sendFiles() {
|
|
for (let i=0; i<this._filesRequested.length; i++) {
|
|
this._filesQueue.push(this._filesRequested[i]);
|
|
}
|
|
this._filesRequested = null
|
|
if (this._busy) return;
|
|
this._dequeueFile();
|
|
}
|
|
|
|
_dequeueFile() {
|
|
this._busy = true;
|
|
const file = this._filesQueue.shift();
|
|
this._sendFile(file);
|
|
}
|
|
|
|
async _sendFile(file) {
|
|
this.sendJSON({
|
|
type: 'header',
|
|
size: file.size,
|
|
name: file.name,
|
|
mime: file.type
|
|
});
|
|
this._chunker = new FileChunker(file,
|
|
chunk => this._send(chunk),
|
|
offset => this._onPartitionEnd(offset));
|
|
this._chunker.nextPartition();
|
|
}
|
|
|
|
_onPartitionEnd(offset) {
|
|
this.sendJSON({ type: 'partition', offset: offset });
|
|
}
|
|
|
|
_onReceivedPartitionEnd(offset) {
|
|
this.sendJSON({ type: 'partition-received', offset: offset });
|
|
}
|
|
|
|
_sendNextPartition() {
|
|
if (!this._chunker || this._chunker.isFileEnd()) return;
|
|
this._chunker.nextPartition();
|
|
}
|
|
|
|
_sendProgress(progress) {
|
|
this.sendJSON({ type: 'progress', progress: progress });
|
|
}
|
|
|
|
_onMessage(message) {
|
|
if (typeof message !== 'string') {
|
|
this._onChunkReceived(message);
|
|
return;
|
|
}
|
|
const messageJSON = JSON.parse(message);
|
|
switch (messageJSON.type) {
|
|
case 'request':
|
|
this._onFilesTransferRequest(messageJSON);
|
|
break;
|
|
case 'header':
|
|
this._onFileHeader(messageJSON);
|
|
break;
|
|
case 'partition':
|
|
this._onReceivedPartitionEnd(messageJSON);
|
|
break;
|
|
case 'partition-received':
|
|
this._sendNextPartition();
|
|
break;
|
|
case 'progress':
|
|
this._onDownloadProgress(messageJSON.progress);
|
|
break;
|
|
case 'files-transfer-response':
|
|
this._onFileTransferRequestResponded(messageJSON);
|
|
break;
|
|
case 'file-transfer-complete':
|
|
this._onFileTransferCompleted();
|
|
break;
|
|
case 'message-transfer-complete':
|
|
this._onMessageTransferCompleted();
|
|
break;
|
|
case 'text':
|
|
this._onTextReceived(messageJSON);
|
|
break;
|
|
case 'display-name-changed':
|
|
this._onDisplayNameChanged(messageJSON);
|
|
break;
|
|
}
|
|
}
|
|
|
|
_onFilesTransferRequest(request) {
|
|
if (this._requestPending) {
|
|
// Only accept one request at a time per peer
|
|
this.sendJSON({type: 'files-transfer-response', accepted: false});
|
|
return;
|
|
}
|
|
if (window.iOS && request.totalSize >= 200*1024*1024) {
|
|
// iOS Safari can only put 400MB at once to memory.
|
|
// Request to send them in chunks of 200MB instead:
|
|
this.sendJSON({type: 'files-transfer-response', accepted: false, reason: 'ios-memory-limit'});
|
|
return;
|
|
}
|
|
|
|
this._requestPending = request;
|
|
|
|
if (this._autoAccept) {
|
|
// auto accept if set via Edit Paired Devices Dialog
|
|
this._respondToFileTransferRequest(true);
|
|
return;
|
|
}
|
|
|
|
// default behavior: show user transfer request
|
|
Events.fire('files-transfer-request', {
|
|
request: request,
|
|
peerId: this._peerId
|
|
});
|
|
}
|
|
|
|
_respondToFileTransferRequest(accepted) {
|
|
this.sendJSON({type: 'files-transfer-response', accepted: accepted});
|
|
if (accepted) {
|
|
this._requestAccepted = this._requestPending;
|
|
this._totalBytesReceived = 0;
|
|
this._busy = true;
|
|
this._filesReceived = [];
|
|
}
|
|
this._requestPending = null;
|
|
}
|
|
|
|
_onFileHeader(header) {
|
|
if (this._requestAccepted && this._requestAccepted.header.length) {
|
|
this._lastProgress = 0;
|
|
this._digester = new FileDigester({size: header.size, name: header.name, mime: header.mime},
|
|
this._requestAccepted.totalSize,
|
|
this._totalBytesReceived,
|
|
fileBlob => this._onFileReceived(fileBlob)
|
|
);
|
|
}
|
|
}
|
|
|
|
_abortTransfer() {
|
|
Events.fire('set-progress', {peerId: this._peerId, progress: 1, status: 'wait'});
|
|
Events.fire('notify-user', 'Files are incorrect.');
|
|
this._filesReceived = [];
|
|
this._requestAccepted = null;
|
|
this._digester = null;
|
|
throw new Error("Received files differ from requested files. Abort!");
|
|
}
|
|
|
|
_onChunkReceived(chunk) {
|
|
if(!this._digester || !(chunk.byteLength || chunk.size)) return;
|
|
|
|
this._digester.unchunk(chunk);
|
|
const progress = this._digester.progress;
|
|
|
|
if (progress > 1) {
|
|
this._abortTransfer();
|
|
}
|
|
|
|
this._onDownloadProgress(progress);
|
|
|
|
// occasionally notify sender about our progress
|
|
if (progress - this._lastProgress < 0.005 && progress !== 1) return;
|
|
this._lastProgress = progress;
|
|
this._sendProgress(progress);
|
|
}
|
|
|
|
_onDownloadProgress(progress) {
|
|
Events.fire('set-progress', {peerId: this._peerId, progress: progress, status: 'transfer'});
|
|
}
|
|
|
|
async _onFileReceived(fileBlob) {
|
|
const acceptedHeader = this._requestAccepted.header.shift();
|
|
this._totalBytesReceived += fileBlob.size;
|
|
|
|
this.sendJSON({type: 'file-transfer-complete'});
|
|
|
|
const sameSize = fileBlob.size === acceptedHeader.size;
|
|
const sameName = fileBlob.name === acceptedHeader.name
|
|
if (!sameSize || !sameName) {
|
|
this._abortTransfer();
|
|
}
|
|
|
|
// include for compatibility with 'Snapdrop & MoreLoad for Android' app
|
|
Events.fire('file-received', fileBlob);
|
|
|
|
this._filesReceived.push(fileBlob);
|
|
if (!this._requestAccepted.header.length) {
|
|
this._busy = false;
|
|
Events.fire('set-progress', {peerId: this._peerId, progress: 0, status: 'process'});
|
|
Events.fire('files-received', {sender: this._peerId, files: this._filesReceived, imagesOnly: this._requestAccepted.imagesOnly, totalSize: this._requestAccepted.totalSize});
|
|
this._filesReceived = [];
|
|
this._requestAccepted = null;
|
|
}
|
|
}
|
|
|
|
_onFileTransferCompleted() {
|
|
this._chunker = null;
|
|
if (!this._filesQueue.length) {
|
|
this._busy = false;
|
|
Events.fire('notify-user', 'File transfer completed.');
|
|
Events.fire('files-sent'); // used by 'Snapdrop & MoreLoad for Android' app
|
|
} else {
|
|
this._dequeueFile();
|
|
}
|
|
}
|
|
|
|
_onFileTransferRequestResponded(message) {
|
|
if (!message.accepted) {
|
|
Events.fire('set-progress', {peerId: this._peerId, progress: 1, status: 'wait'});
|
|
this._filesRequested = null;
|
|
if (message.reason === 'ios-memory-limit') {
|
|
Events.fire('notify-user', "Sending files to iOS is only possible up to 200MB at once");
|
|
}
|
|
return;
|
|
}
|
|
Events.fire('file-transfer-accepted');
|
|
Events.fire('set-progress', {peerId: this._peerId, progress: 0, status: 'transfer'});
|
|
this.sendFiles();
|
|
}
|
|
|
|
_onMessageTransferCompleted() {
|
|
Events.fire('notify-user', 'Message transfer completed.');
|
|
}
|
|
|
|
sendText(text) {
|
|
const unescaped = btoa(unescape(encodeURIComponent(text)));
|
|
this.sendJSON({ type: 'text', text: unescaped });
|
|
}
|
|
|
|
_onTextReceived(message) {
|
|
if (!message.text) return;
|
|
const escaped = decodeURIComponent(escape(atob(message.text)));
|
|
Events.fire('text-received', { text: escaped, peerId: this._peerId });
|
|
this.sendJSON({ type: 'message-transfer-complete' });
|
|
}
|
|
|
|
_onDisplayNameChanged(message) {
|
|
const displayNameHasChanged = this._displayName !== message.displayName
|
|
|
|
if (message.displayName && displayNameHasChanged) {
|
|
this._displayName = message.displayName;
|
|
}
|
|
|
|
Events.fire('peer-display-name-changed', {peerId: this._peerId, displayName: message.displayName});
|
|
|
|
if (!displayNameHasChanged) return;
|
|
Events.fire('notify-peer-display-name-changed', this._peerId);
|
|
}
|
|
}
|
|
|
|
class RTCPeer extends Peer {
|
|
|
|
constructor(serverConnection, isCaller, peerId, roomType, roomSecret) {
|
|
super(serverConnection, isCaller, peerId, roomType, roomSecret);
|
|
this.rtcSupported = true;
|
|
if (!this._isCaller) return; // we will listen for a caller
|
|
this._connect();
|
|
}
|
|
|
|
_connect() {
|
|
if (!this._conn || this._conn.signalingState === "closed") this._openConnection();
|
|
|
|
if (this._isCaller) {
|
|
this._openChannel();
|
|
} else {
|
|
this._conn.ondatachannel = e => this._onChannelOpened(e);
|
|
}
|
|
}
|
|
|
|
_openConnection() {
|
|
this._conn = new RTCPeerConnection(window.rtcConfig);
|
|
this._conn.onicecandidate = e => this._onIceCandidate(e);
|
|
this._conn.onicecandidateerror = e => this._onError(e);
|
|
this._conn.onconnectionstatechange = _ => this._onConnectionStateChange();
|
|
this._conn.oniceconnectionstatechange = e => this._onIceConnectionStateChange(e);
|
|
}
|
|
|
|
_openChannel() {
|
|
if (!this._conn) return;
|
|
const channel = this._conn.createDataChannel('data-channel', {
|
|
ordered: true,
|
|
reliable: true // Obsolete. See https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel/reliable
|
|
});
|
|
channel.onopen = e => this._onChannelOpened(e);
|
|
channel.onerror = e => this._onError(e);
|
|
this._conn.createOffer().then(d => this._onDescription(d)).catch(e => this._onError(e));
|
|
}
|
|
|
|
_onDescription(description) {
|
|
// description.sdp = description.sdp.replace('b=AS:30', 'b=AS:1638400');
|
|
this._conn.setLocalDescription(description)
|
|
.then(_ => this._sendSignal({ sdp: description }))
|
|
.catch(e => this._onError(e));
|
|
}
|
|
|
|
_onIceCandidate(event) {
|
|
if (!event.candidate) return;
|
|
this._sendSignal({ ice: event.candidate });
|
|
}
|
|
|
|
onServerMessage(message) {
|
|
if (!this._conn) this._connect();
|
|
|
|
if (message.sdp) {
|
|
this._conn.setRemoteDescription(message.sdp)
|
|
.then( _ => {
|
|
if (message.sdp.type === 'offer') {
|
|
return this._conn.createAnswer()
|
|
.then(d => this._onDescription(d));
|
|
}
|
|
})
|
|
.catch(e => this._onError(e));
|
|
} else if (message.ice) {
|
|
this._conn.addIceCandidate(new RTCIceCandidate(message.ice))
|
|
.catch(e => this._onError(e));
|
|
}
|
|
}
|
|
|
|
_onChannelOpened(event) {
|
|
console.log('RTC: channel opened with', this._peerId);
|
|
const channel = event.channel || event.target;
|
|
channel.binaryType = 'arraybuffer';
|
|
channel.onmessage = e => this._onMessage(e.data);
|
|
channel.onclose = _ => this._onChannelClosed();
|
|
this._channel = channel;
|
|
Events.on('beforeunload', e => this._onBeforeUnload(e));
|
|
Events.on('pagehide', _ => this._onPageHide());
|
|
Events.fire('peer-connected', {peerId: this._peerId, connectionHash: this.getConnectionHash()});
|
|
}
|
|
|
|
_onMessage(message) {
|
|
if (typeof message === 'string') {
|
|
console.log('RTC:', JSON.parse(message));
|
|
}
|
|
super._onMessage(message);
|
|
}
|
|
|
|
getConnectionHash() {
|
|
const localDescriptionLines = this._conn.localDescription.sdp.split("\r\n");
|
|
const remoteDescriptionLines = this._conn.remoteDescription.sdp.split("\r\n");
|
|
let localConnectionFingerprint, remoteConnectionFingerprint;
|
|
for (let i=0; i<localDescriptionLines.length; i++) {
|
|
if (localDescriptionLines[i].startsWith("a=fingerprint:")) {
|
|
localConnectionFingerprint = localDescriptionLines[i].substring(14);
|
|
break;
|
|
}
|
|
}
|
|
for (let i=0; i<remoteDescriptionLines.length; i++) {
|
|
if (remoteDescriptionLines[i].startsWith("a=fingerprint:")) {
|
|
remoteConnectionFingerprint = remoteDescriptionLines[i].substring(14);
|
|
break;
|
|
}
|
|
}
|
|
const combinedFingerprints = this._isCaller
|
|
? localConnectionFingerprint + remoteConnectionFingerprint
|
|
: remoteConnectionFingerprint + localConnectionFingerprint;
|
|
let hash = cyrb53(combinedFingerprints).toString();
|
|
while (hash.length < 16) {
|
|
hash = "0" + hash;
|
|
}
|
|
return hash;
|
|
}
|
|
|
|
_onBeforeUnload(e) {
|
|
if (this._busy) {
|
|
e.preventDefault();
|
|
return "There are unfinished transfers. Are you sure you want to close?";
|
|
}
|
|
}
|
|
|
|
_onPageHide() {
|
|
this._disconnect();
|
|
}
|
|
|
|
_disconnect() {
|
|
if (this._conn && this._channel) {
|
|
this._channel.onclose = null;
|
|
this._channel.close();
|
|
}
|
|
Events.fire('peer-disconnected', this._peerId);
|
|
}
|
|
|
|
_onChannelClosed() {
|
|
console.log('RTC: channel closed', this._peerId);
|
|
Events.fire('peer-disconnected', this._peerId);
|
|
if (!this._isCaller) return;
|
|
this._connect(); // reopen the channel
|
|
}
|
|
|
|
_onConnectionStateChange() {
|
|
console.log('RTC: state changed:', this._conn.connectionState);
|
|
switch (this._conn.connectionState) {
|
|
case 'disconnected':
|
|
Events.fire('peer-disconnected', this._peerId);
|
|
this._onError('rtc connection disconnected');
|
|
break;
|
|
case 'failed':
|
|
Events.fire('peer-disconnected', this._peerId);
|
|
this._onError('rtc connection failed');
|
|
break;
|
|
}
|
|
}
|
|
|
|
_onIceConnectionStateChange() {
|
|
switch (this._conn.iceConnectionState) {
|
|
case 'failed':
|
|
this._onError('ICE Gathering failed');
|
|
break;
|
|
default:
|
|
console.log('ICE Gathering', this._conn.iceConnectionState);
|
|
}
|
|
}
|
|
|
|
_onError(error) {
|
|
console.error(error);
|
|
}
|
|
|
|
_send(message) {
|
|
if (!this._channel) this.refresh();
|
|
this._channel.send(message);
|
|
}
|
|
|
|
_sendSignal(signal) {
|
|
signal.type = 'signal';
|
|
signal.to = this._peerId;
|
|
signal.roomType = this._roomType;
|
|
signal.roomSecret = this._roomSecret;
|
|
this._server.send(signal);
|
|
}
|
|
|
|
refresh() {
|
|
// check if channel is open. otherwise create one
|
|
if (this._isConnected() || this._isConnecting()) return;
|
|
|
|
// only reconnect if peer is caller
|
|
if (!this._isCaller) return;
|
|
|
|
this._connect();
|
|
}
|
|
|
|
_isConnected() {
|
|
return this._channel && this._channel.readyState === 'open';
|
|
}
|
|
|
|
_isConnecting() {
|
|
return this._channel && this._channel.readyState === 'connecting';
|
|
}
|
|
|
|
sendDisplayName(displayName) {
|
|
if (!this._isConnected()) return;
|
|
super.sendDisplayName(displayName);
|
|
}
|
|
}
|
|
|
|
class PeersManager {
|
|
|
|
constructor(serverConnection) {
|
|
this.peers = {};
|
|
this._server = serverConnection;
|
|
Events.on('signal', e => this._onMessage(e.detail));
|
|
Events.on('peers', e => this._onPeers(e.detail));
|
|
Events.on('files-selected', e => this._onFilesSelected(e.detail));
|
|
Events.on('respond-to-files-transfer-request', e => this._onRespondToFileTransferRequest(e.detail))
|
|
Events.on('send-text', e => this._onSendText(e.detail));
|
|
Events.on('peer-left', e => this._onPeerLeft(e.detail));
|
|
Events.on('peer-joined', e => this._onPeerJoined(e.detail));
|
|
Events.on('peer-connected', e => this._onPeerConnected(e.detail.peerId));
|
|
Events.on('peer-disconnected', e => this._onPeerDisconnected(e.detail));
|
|
Events.on('secret-room-deleted', e => this._onSecretRoomDeleted(e.detail));
|
|
Events.on('room-secret-regenerated', e => this._onRoomSecretRegenerated(e.detail));
|
|
Events.on('display-name', e => this._onDisplayName(e.detail.message.displayName));
|
|
Events.on('self-display-name-changed', e => this._notifyPeersDisplayNameChanged(e.detail));
|
|
Events.on('notify-peer-display-name-changed', e => this._notifyPeerDisplayNameChanged(e.detail));
|
|
Events.on('auto-accept-updated', e => this._onAutoAcceptUpdated(e.detail.roomSecret, e.detail.autoAccept));
|
|
}
|
|
|
|
_onMessage(message) {
|
|
const peerId = message.sender.id;
|
|
this.peers[peerId].onServerMessage(message);
|
|
}
|
|
|
|
_refreshPeer(peer, roomType, roomSecret) {
|
|
if (!peer) return false;
|
|
|
|
const roomTypeIsSecret = roomType === "secret";
|
|
const roomSecretsDiffer = peer._roomSecret !== roomSecret;
|
|
|
|
// if roomSecrets differs peer is already connected -> abort but update roomSecret and reevaluate auto accept
|
|
if (roomTypeIsSecret && roomSecretsDiffer) {
|
|
peer._updateRoomSecret(roomSecret);
|
|
peer._evaluateAutoAccept();
|
|
|
|
return true;
|
|
}
|
|
|
|
const roomTypesDiffer = peer._roomType !== roomType;
|
|
|
|
// if roomTypes differ peer is already connected -> abort
|
|
if (roomTypesDiffer) return true;
|
|
|
|
peer.refresh();
|
|
|
|
return true;
|
|
}
|
|
|
|
_createOrRefreshPeer(isCaller, peerId, roomType, roomSecret) {
|
|
const peer = this.peers[peerId];
|
|
if (peer) {
|
|
this._refreshPeer(peer, roomType, roomSecret);
|
|
return;
|
|
}
|
|
|
|
this.peers[peerId] = new RTCPeer(this._server, isCaller, peerId, roomType, roomSecret);
|
|
}
|
|
|
|
_onPeerJoined(message) {
|
|
this._createOrRefreshPeer(false, message.peer.id, message.roomType, message.roomSecret);
|
|
}
|
|
|
|
_onPeers(message) {
|
|
message.peers.forEach(peer => {
|
|
this._createOrRefreshPeer(true, peer.id, message.roomType, message.roomSecret);
|
|
})
|
|
}
|
|
|
|
_onRespondToFileTransferRequest(detail) {
|
|
this.peers[detail.to]._respondToFileTransferRequest(detail.accepted);
|
|
}
|
|
|
|
_onFilesSelected(message) {
|
|
let inputFiles = Array.from(message.files);
|
|
delete message.files;
|
|
let files = [];
|
|
const l = inputFiles.length;
|
|
for (let i=0; i<l; i++) {
|
|
// when filetype is empty guess via suffix
|
|
const inputFile = inputFiles.shift();
|
|
const file = inputFile.type
|
|
? inputFile
|
|
: new File([inputFile], inputFile.name, {type: mime.getMimeByFilename(inputFile.name)});
|
|
files.push(file)
|
|
}
|
|
this.peers[message.to].requestFileTransfer(files);
|
|
}
|
|
|
|
_onSendText(message) {
|
|
this.peers[message.to].sendText(message.text);
|
|
}
|
|
|
|
_onPeerLeft(message) {
|
|
if (message.disconnect === true) {
|
|
// if user actively disconnected from MoreLoad server, disconnect all peer to peer connections immediately
|
|
Events.fire('peer-disconnected', message.peerId);
|
|
|
|
// If no peers are connected anymore, we can safely assume that no other tab on the same browser is connected:
|
|
// Tidy up peerIds in localStorage
|
|
if (Object.keys(this.peers).length === 0) {
|
|
BrowserTabsConnector.removeOtherPeerIdsFromLocalStorage().then(peerIds => {
|
|
if (!peerIds) return;
|
|
console.log("successfully removed other peerIds from localStorage");
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
_onPeerConnected(peerId) {
|
|
this._notifyPeerDisplayNameChanged(peerId);
|
|
}
|
|
|
|
_onPeerDisconnected(peerId) {
|
|
const peer = this.peers[peerId];
|
|
delete this.peers[peerId];
|
|
if (!peer || !peer._conn) return;
|
|
if (peer._channel) peer._channel.onclose = null;
|
|
peer._conn.close();
|
|
peer._busy = false;
|
|
}
|
|
|
|
_onSecretRoomDeleted(roomSecret) {
|
|
for (const peerId in this.peers) {
|
|
const peer = this.peers[peerId];
|
|
if (peer._roomType === 'secret' && peer._roomSecret === roomSecret) {
|
|
this._onPeerDisconnected(peerId);
|
|
}
|
|
}
|
|
}
|
|
|
|
_onRoomSecretRegenerated(message) {
|
|
PersistentStorage.updateRoomSecret(message.oldRoomSecret, message.newRoomSecret).then(_ => {
|
|
console.log("successfully regenerated room secret");
|
|
Events.fire("room-secrets", [message.newRoomSecret]);
|
|
})
|
|
}
|
|
|
|
_notifyPeersDisplayNameChanged(newDisplayName) {
|
|
this._displayName = newDisplayName ? newDisplayName : this._originalDisplayName;
|
|
for (const peerId in this.peers) {
|
|
this._notifyPeerDisplayNameChanged(peerId);
|
|
}
|
|
}
|
|
|
|
_notifyPeerDisplayNameChanged(peerId) {
|
|
const peer = this.peers[peerId];
|
|
if (!peer) return;
|
|
this.peers[peerId].sendDisplayName(this._displayName);
|
|
}
|
|
|
|
_onDisplayName(displayName) {
|
|
this._originalDisplayName = displayName;
|
|
// if the displayName has not been changed (yet) set the displayName to the original displayName
|
|
if (!this._displayName) this._displayName = displayName;
|
|
}
|
|
|
|
_onAutoAcceptUpdated(roomSecret, autoAccept) {
|
|
const peerId = this._getPeerIdFromRoomSecret(roomSecret);
|
|
if (!peerId) return;
|
|
this.peers[peerId]._setAutoAccept(autoAccept);
|
|
}
|
|
|
|
_getPeerIdFromRoomSecret(roomSecret) {
|
|
for (const peerId in this.peers) {
|
|
const peer = this.peers[peerId];
|
|
// peer must have same roomSecret and not be on the same browser.
|
|
if (peer._roomSecret === roomSecret && !peer._isSameBrowser()) {
|
|
return peer._peerId;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
}
|
|
|
|
class FileChunker {
|
|
|
|
constructor(file, onChunk, onPartitionEnd) {
|
|
this._chunkSize = 64000; // 64 KB
|
|
this._maxPartitionSize = 1e6; // 1 MB
|
|
this._offset = 0;
|
|
this._partitionSize = 0;
|
|
this._file = file;
|
|
this._onChunk = onChunk;
|
|
this._onPartitionEnd = onPartitionEnd;
|
|
this._reader = new FileReader();
|
|
this._reader.addEventListener('load', e => this._onChunkRead(e.target.result));
|
|
}
|
|
|
|
nextPartition() {
|
|
this._partitionSize = 0;
|
|
this._readChunk();
|
|
}
|
|
|
|
_readChunk() {
|
|
const chunk = this._file.slice(this._offset, this._offset + this._chunkSize);
|
|
this._reader.readAsArrayBuffer(chunk);
|
|
}
|
|
|
|
_onChunkRead(chunk) {
|
|
this._offset += chunk.byteLength;
|
|
this._partitionSize += chunk.byteLength;
|
|
this._onChunk(chunk);
|
|
if (this.isFileEnd()) return;
|
|
if (this._isPartitionEnd()) {
|
|
this._onPartitionEnd(this._offset);
|
|
return;
|
|
}
|
|
this._readChunk();
|
|
}
|
|
|
|
repeatPartition() {
|
|
this._offset -= this._partitionSize;
|
|
this.nextPartition();
|
|
}
|
|
|
|
_isPartitionEnd() {
|
|
return this._partitionSize >= this._maxPartitionSize;
|
|
}
|
|
|
|
isFileEnd() {
|
|
return this._offset >= this._file.size;
|
|
}
|
|
}
|
|
|
|
class FileDigester {
|
|
|
|
constructor(meta, totalSize, totalBytesReceived, callback) {
|
|
this._buffer = [];
|
|
this._bytesReceived = 0;
|
|
this._size = meta.size;
|
|
this._name = meta.name;
|
|
this._mime = meta.mime;
|
|
this._totalSize = totalSize;
|
|
this._totalBytesReceived = totalBytesReceived;
|
|
this._callback = callback;
|
|
}
|
|
|
|
unchunk(chunk) {
|
|
this._buffer.push(chunk);
|
|
this._bytesReceived += chunk.byteLength || chunk.size;
|
|
this.progress = (this._totalBytesReceived + this._bytesReceived) / this._totalSize;
|
|
if (isNaN(this.progress)) this.progress = 1
|
|
|
|
if (this._bytesReceived < this._size) return;
|
|
// we are done
|
|
const blob = new Blob(this._buffer)
|
|
this._buffer = null;
|
|
this._callback(new File([blob], this._name, {
|
|
type: this._mime,
|
|
lastModified: new Date().getTime()
|
|
}));
|
|
}
|
|
|
|
}
|
|
|
|
class Events {
|
|
static fire(type, detail) {
|
|
window.dispatchEvent(new CustomEvent(type, { detail: detail }));
|
|
}
|
|
|
|
static on(type, callback, options = false) {
|
|
return window.addEventListener(type, callback, options);
|
|
}
|
|
|
|
static off(type, callback, options = false) {
|
|
return window.removeEventListener(type, callback, options);
|
|
}
|
|
}
|