Skip to content

Commit

Permalink
meeting.js & screen.js fixed for Edge/Safari11/Firefox.
Browse files Browse the repository at this point in the history 
Other demos updated are:
1) RecordRTC.js
2) RTCMultiConnection.js
3) Canvas-Designer
4) Chrome-Extension (desktopCapture, p2p, and screen recoridng)
5) DetectRTC.js
6) getStats.js
7) getScreenId.js
8) MultiStreamsMixer.js
9) RTCMultiConnection-SignalR

and tons of other demos updated as well.
  • Loading branch information
@muaz-khan
muaz-khan committed May 12, 2018
1 parent e85b62c commit 2352da4
Show file tree
Hide file tree
Showing 163 changed files with 20,467 additions and 2,006 deletions.
16 changes: 12 additions & 4 deletions Canvas-Designer/dev/events-handler.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,18 @@ function preventStopEvent(e) {
}

addEvent(canvas, isTouch ? 'touchend touchcancel mouseup' : 'mouseup', function(e) {
if (isTouch) e = e.pageX ? e : e.touches.length ? e.touches[0] : {
pageX: 0,
pageY: 0
};
if (isTouch && (!e || !('pageX' in e))) {
if (e && e.touches && e.touches.length) {
e = e.touches[0];
} else if (e && e.changedTouches && e.changedTouches.length) {
e = e.changedTouches[0];
} else {
e = {
pageX: 0,
pageY: 0
}
}
}

var cache = is;

Expand Down
105 changes: 54 additions & 51 deletions Canvas-Designer/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -351,23 +351,21 @@ <h2><a href="multiple.html">Try multiple designers!</a></h2>
localStorage.setItem('canvas-designer-roomid', this.value);
};

if(localStorage.getItem('canvas-designer-roomid')) {
if (localStorage.getItem('canvas-designer-roomid')) {
document.getElementById('room-id').value = localStorage.getItem('canvas-designer-roomid');
}

document.getElementById('open-room').onclick = function() {
var roomid = document.getElementById('room-id').value;
if(!roomid.length) return alert('Please enter roomid.');
if (!roomid.length) return alert('Please enter roomid.');

this.disabled = true;

connection.open(roomid, onOpenRoom);

this.parentNode.innerHTML = '<a href="#' + roomid + '" target="_blank">Please share this link</a>';
};
</script>

<script>
var designer = new CanvasDesigner();

// you can place widget.html anywhere
Expand All @@ -394,7 +392,7 @@ <h2><a href="multiple.html">Try multiple designers!</a></h2>
quadratic: true,
bezier: true,
marker: true,
zoom: true
zoom: true
});

designer.appendTo(document.getElementById('widget-container'));
Expand All @@ -409,7 +407,7 @@ <h2><a href="multiple.html">Try multiple designers!</a></h2>

var tools = {};
Array.prototype.slice.call(document.getElementById('action-controls').querySelectorAll('input[type=checkbox]')).forEach(function(checkbox2) {
if(checkbox2.checked) {
if (checkbox2.checked) {
tools[checkbox2.id] = true;
}
});
Expand All @@ -421,27 +419,26 @@ <h2><a href="multiple.html">Try multiple designers!</a></h2>
var undoOptions = document.getElementById('undo-options');

document.getElementById('btn-display-undo-popup').onclick = function() {
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
document.getElementById('light').style.display = 'block';
document.getElementById('fade').style.display = 'block';
};

var txtNumberOfShapesToUndo = document.getElementById('number-of-shapes-to-undo');
txtNumberOfShapesToUndo.onkeyup = function() {
localStorage.setItem('number-of-shapes-to-undo', txtNumberOfShapesToUndo.value);
}

if(localStorage.getItem('number-of-shapes-to-undo')){
if (localStorage.getItem('number-of-shapes-to-undo')) {
txtNumberOfShapesToUndo.value = localStorage.getItem('number-of-shapes-to-undo');
txtNumberOfShapesToUndo.onkeyup();
}

undoOptions.onchange = function() {
txtNumberOfShapesToUndo.parentNode.style.display = 'none';

if(undoOptions.value === 'Specific Range') {
if (undoOptions.value === 'Specific Range') {
//
}
else if(undoOptions.value === 'Last Multiple') {
} else if (undoOptions.value === 'Last Multiple') {
txtNumberOfShapesToUndo.parentNode.style.display = 'block';
}

Expand All @@ -450,27 +447,24 @@ <h2><a href="multiple.html">Try multiple designers!</a></h2>

undoOptions.onclick = undoOptions.onchange;

if(localStorage.getItem('undo-options')) {
if (localStorage.getItem('undo-options')) {
undoOptions.value = localStorage.getItem('undo-options');
undoOptions.onchange();
}

document.getElementById('btn-undo').onclick = function() {
if(undoOptions.value === 'All Shapes') {
if (undoOptions.value === 'All Shapes') {
designer.undo('all');
}
else if(undoOptions.value === 'Specific Range') {
} else if (undoOptions.value === 'Specific Range') {
designer.undo({
specificRange: {
start: -1,
end: -1
}
});
}
else if(undoOptions.value === 'Last Shape') {
} else if (undoOptions.value === 'Last Shape') {
designer.undo(-1);
}
else if(undoOptions.value === 'Last Multiple') {
} else if (undoOptions.value === 'Last Multiple') {
var numberOfLastShapes = txtNumberOfShapesToUndo.value;
numberOfLastShapes = parseInt(numberOfLastShapes || 0) || 0;
designer.undo({
Expand All @@ -482,70 +476,79 @@ <h2><a href="multiple.html">Try multiple designers!</a></h2>
};

function closeUndoPopup() {
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';
document.getElementById('light').style.display = 'none';
document.getElementById('fade').style.display = 'none';

undoOptions.onchange();
}
document.getElementById('btn-close-undo-popup').onclick = closeUndoPopup;

function closeDataURLPopup() {
document.getElementById('dataURL-popup').style.display='none';
document.getElementById('fade').style.display='none';
document.getElementById('dataURL-popup').style.display = 'none';
document.getElementById('fade').style.display = 'none';

dataURLFormat.onchange();
}
document.getElementById('btn-close-dataURL-popup').onclick = closeDataURLPopup;

document.getElementById('export-as-image').onclick = function() {
linkToImage.innerHTML = linkToImage.href = linkToImage.style = '';
linkToImage.innerHTML = linkToImage.href = linkToImage.style = '';

document.getElementById('dataURL-popup').style.display = 'block';
document.getElementById('fade').style.display = 'block';

document.getElementById('dataURL-popup').style.display='block';
document.getElementById('fade').style.display='block';
getDataURL();
};

function getDataURL(callback) {
callback = callback || function() {};
var format = dataURLFormat.value;
designer.toDataURL(format || 'image/png', function(dataURL) {
linkToImage.style = 'margin-left: 10px;display: block;text-align: center;margin-bottom: -50px;';
linkToImage.href = dataURL;
linkToImage.innerHTML = 'Click to Download Image';
linkToImage.download = 'image.' + (format || 'image/png').split('/')[1];

callback(dataURL, format);
});
}

var dataURLFormat = document.getElementById('data-url-format');
var linkToImage = document.getElementById('link-to-image');

dataURLFormat.onchange = function() {
localStorage.setItem('data-url-format', dataURLFormat.value);
getDataURL();
};
dataURLFormat.onclick = dataURLFormat.onchange;

if(localStorage.getItem('data-url-format')) {
if (localStorage.getItem('data-url-format')) {
dataURLFormat.value = localStorage.getItem('data-url-format');
dataURLFormat.onchange();
}

document.getElementById('btn-getDataURL').onclick = function() {
var format = dataURLFormat.value;

designer.toDataURL(format || 'image/png', function(dataURL) {
window.open(dataURL);

linkToImage.style = 'margin-left: 10px;display: block;text-align: center;margin-bottom: -50px;';
linkToImage.href = dataURL;
linkToImage.innerHTML = 'Click to Download Image';
linkToImage.download = 'image.' + (format || 'image/png').split('/')[1];
getDataURL(function(dataURL, format) {
window.open(dataURL);
});

// closeDataURLPopup();
};

document.getElementById('btn-close-comments-popup').onclick = function() {
document.getElementById('comments-popup').style.display='none';
document.getElementById('fade').style.display='none';
document.getElementById('comments-popup').style.display = 'none';
document.getElementById('fade').style.display = 'none';

dataURLFormat.onchange();
dataURLFormat.onchange();
};

function showCommentsPopup(e) {
document.getElementById('comments-popup').style.display='block';
document.getElementById('fade').style.display='block';
document.getElementById('comments-popup').style.display = 'block';
document.getElementById('fade').style.display = 'block';
}
document.getElementById('btn-comments').onclick = showCommentsPopup;
if(location.hash.length && location.hash.indexOf('comment') !== -1) {
showCommentsPopup();
if (location.hash.length && location.hash.indexOf('comment') !== -1) {
showCommentsPopup();
}
</script>

Expand All @@ -569,18 +572,18 @@ <h2><a href="multiple.html">Try multiple designers!</a></h2>
OfferToReceiveVideo: true
};
connection.dontCaptureUserMedia = true;
if(location.hash.replace('#', '').length) {
if (location.hash.replace('#', '').length) {
var roomid = location.hash.replace('#', '');
connection.join(roomid);
}

connection.onUserStatusChanged = function(event) {
var infoBar = document.getElementById('hide-on-datachannel-opened');
if(event.status == 'online') {
if (event.status == 'online') {
infoBar.innerHTML = event.userid + ' is <b>online</b>.';
}

if(event.status == 'offline') {
if (event.status == 'offline') {
infoBar.innerHTML = event.userid + ' is <b>offline</b>.';
}

Expand All @@ -592,7 +595,7 @@ <h2><a href="multiple.html">Try multiple designers!</a></h2>
var infoBar = document.getElementById('hide-on-datachannel-opened');
infoBar.innerHTML = '<b>' + event.userid + '</b> is ready to collaborate with you.';

if(designer.pointsLength <= 0) {
if (designer.pointsLength <= 0) {
// make sure that remote user gets all drawings synced.
setTimeout(function() {
connection.send('plz-sync-points');
Expand All @@ -607,12 +610,12 @@ <h2><a href="multiple.html">Try multiple designers!</a></h2>
};

connection.onmessage = function(event) {
if(event.data === 'plz-sync-points') {
if (event.data === 'plz-sync-points') {
designer.sync();
return;
}

designer.syncData( event.data );
designer.syncData(event.data);
};
</script>

Expand All @@ -633,7 +636,7 @@ <h2><a href="multiple.html">Try multiple designers!</a></h2>
var video = document.querySelector('video');

connection.onstream = function(event) {
if(connection.isInitiator && event.mediaElement) return;
if (connection.isInitiator && event.mediaElement) return;

video.style.display = '';
video.src = URL.createObjectURL(event.stream);
Expand Down
18 changes: 13 additions & 5 deletions Canvas-Designer/widget.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// Last time updated: 2017-04-29 1:56:26 PM UTC
// Last time updated: 2017-11-22 11:30:34 AM UTC

// _______________
// Canvas-Designer
Expand Down Expand Up @@ -3297,10 +3297,18 @@
}

addEvent(canvas, isTouch ? 'touchend touchcancel mouseup' : 'mouseup', function(e) {
if (isTouch) e = e.pageX ? e : e.touches.length ? e.touches[0] : {
pageX: 0,
pageY: 0
};
if (isTouch && (!e || !('pageX' in e))) {
if (e && e.touches && e.touches.length) {
e = e.touches[0];
} else if (e && e.changedTouches && e.changedTouches.length) {
e = e.changedTouches[0];
} else {
e = {
pageX: 0,
pageY: 0
}
}
}

var cache = is;

Expand Down
4 changes: 2 additions & 2 deletions Canvas-Designer/widget.min.js
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 2352da4

Please sign in to comment.