Permalink
Browse files

#428 also added support for MSEdge-Screen-Capturing

Now you can set passwords using "connection.password".

Now if initiator leaves, he can rejoin same room.
  • Loading branch information...
muaz-khan committed Jun 9, 2018
1 parent 45012ff commit 157c9e544f74a49df9ae378c0ea4bf87bd0e1c0c
View
@@ -89,7 +89,8 @@ module.exports = function(grunt) {
uglify: {
options: {
mangle: false,
banner: banner
banner: banner,
engine: require('uglify-js')
},
my_target: {
files: {
@@ -1,4 +1,4 @@
<!-- Demo version: 2018.05.08 -->
<!-- Demo version: 2018.05.21 -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
@@ -19,16 +19,16 @@
<a href="/demos/">Home</a>
</li>
<li>
<a href="http://www.rtcmulticonnection.org/docs/getting-started/">Getting Started</a>
<a href="https://www.rtcmulticonnection.org/docs/getting-started/">Getting Started</a>
</li>
<li>
<a href="http://www.rtcmulticonnection.org/FAQ/">FAQ</a>
<a href="https://www.rtcmulticonnection.org/FAQ/">FAQ</a>
</li>
<li>
<a href="https://www.youtube.com/playlist?list=PLPRQUXAnRydKdyun-vjKPMrySoow2N4tl">YouTube</a>
</li>
<li>
<a href="https://github.com/muaz-khan/RTCMultiConnection#v3-demos">Demos</a>
<a href="https://rtcmulticonnection.herokuapp.com/demos/">Demos</a>
</li>
<li>
<a href="https://github.com/muaz-khan/RTCMultiConnection/wiki">Wiki</a>
@@ -65,8 +65,6 @@ <h1>
<link rel="stylesheet" href="/dev/getHTMLMediaElement.css">
<script src="/dev/getHTMLMediaElement.js"></script>
<script>
window.enableAdapter = true; // enable adapter.js
// ......................................................
// .......................UI Code........................
// ......................................................
@@ -148,7 +146,7 @@ <h1>
}
video.srcObject = event.stream;
var width = parseInt(connection.videosContainer.clientWidth / 2) - 20;
var width = parseInt(connection.videosContainer.clientWidth / 3) - 20;
var mediaElement = getHTMLMediaElement(video, {
title: event.userid,
buttons: ['full-screen'],
@@ -188,7 +186,13 @@ <h1>
}
};
// ..................................
// ALL below scripts are redundant!!!
// ..................................
function disableInputButtons() {
document.getElementById('room-id').onkeyup();
document.getElementById('open-or-join-room').disabled = true;
document.getElementById('open-room').disabled = true;
document.getElementById('join-room').disabled = true;
@@ -236,7 +240,7 @@ <h1>
}
document.getElementById('room-id').value = roomid;
document.getElementById('room-id').onkeyup = function() {
localStorage.setItem(connection.socketMessageEvent, this.value);
localStorage.setItem(connection.socketMessageEvent, document.getElementById('room-id').value);
};
var hashString = location.hash.replace('#', '');
@@ -276,14 +280,25 @@ <h1>
}
</script>
<section class="no-mobile">
<h2>iOS or Android</h2>
<section>
<p>
You can write <a href="http://www.rtcmulticonnection.org/docs/Write-iOS-Apps/" target="_blank">iOS</a> or <a href="http://www.rtcmulticonnection.org/docs/Write-Android-Apps/" target="_blank">Android</a> apps for this demo as well. You can run same demo on Safari-11 as well. (both on MacOSX & iOS)
You can write cordova/ionic/phonegap based <a href="https://www.rtcmulticonnection.org/docs/Write-iOS-Apps/" target="_blank">iOS</a> or <a href="https://www.rtcmulticonnection.org/docs/Write-Android-Apps/" target="_blank">Android</a> apps for this demo as well.
You can download <a href="https://webrtcweb.com/cordova-apps/video-conferencing/">an open-sourced cordova app</a> both for iOS and Android as well.
</p>
<p>
You can run same demo on Safari-11 as well. (both on MacOSX & iOS)
</p>
<p>
You can install following Android app and join meetings from this demo:
<a href="https://play.google.com/store/apps/details?id=rmc3.videoconference" target="_blank">https://play.google.com/store/apps/details?id=rmc3.videoconference</a>
</p>
<p>
Install following Android app and join meetings from this demo: <a href="https://play.google.com/store/apps/details?id=rmc3.videoconference" target="_blank">https://play.google.com/store/apps/details?id=rmc3.videoconference</a>
Microsoft Edge is also supported.
</p>
</section>
View
@@ -1,4 +1,4 @@
<!-- Demo version: 2017.08.06 -->
<!-- Demo version: 2018.06.09 -->
<!DOCTYPE html>
<html lang="en">
@@ -74,6 +74,7 @@ <h1>Screen Sharing using RTCMultiConnection</h1>
</section>
<script src="/dist/RTCMultiConnection.min.js"></script>
<script src="/dev/adapter.js"></script>
<script src="/socket.io/socket.io.js"></script>
<!-- capture screen from any HTTPs domain! -->
@@ -132,15 +133,16 @@ <h1>Screen Sharing using RTCMultiConnection</h1>
connection.videosContainer = document.getElementById('videos-container');
connection.onstream = function(event) {
connection.videosContainer.appendChild(event.mediaElement);
event.mediaElement.play();
setTimeout(function() {
event.mediaElement.play();
}, 5000);
};
// Using getScreenId.js to capture screen from any domain
// You do NOT need to deploy Chrome Extension YOUR-Self!!
connection.getScreenConstraints = function(callback) {
if (DetectRTC.browser.name === 'Edge') {
callback('Edge requires navigator.getDisplayMedia.');
return;
}
getScreenConstraints(function(error, screen_constraints) {
if (!error) {
screen_constraints = connection.modifyScreenConstraints(screen_constraints);
@@ -1,4 +1,4 @@
<!-- Demo version: 2017.08.12 -->
<!-- Demo version: 2018.05.21 -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
@@ -19,16 +19,16 @@
<a href="/demos/">Home</a>
</li>
<li>
<a href="http://www.rtcmulticonnection.org/docs/getting-started/">Getting Started</a>
<a href="https://www.rtcmulticonnection.org/docs/getting-started/">Getting Started</a>
</li>
<li>
<a href="http://www.rtcmulticonnection.org/FAQ/">FAQ</a>
<a href="https://www.rtcmulticonnection.org/FAQ/">FAQ</a>
</li>
<li>
<a href="https://www.youtube.com/playlist?list=PLPRQUXAnRydKdyun-vjKPMrySoow2N4tl">YouTube</a>
</li>
<li>
<a href="https://github.com/muaz-khan/RTCMultiConnection#v3-demos">Demos</a>
<a href="https://rtcmulticonnection.herokuapp.com/demos/">Demos</a>
</li>
<li>
<a href="https://github.com/muaz-khan/RTCMultiConnection/wiki">Wiki</a>
@@ -52,21 +52,19 @@ <h1>
<button id="join-room">Join Room</button>
<button id="open-or-join-room">Auto Open Or Join Room</button>
<div id="room-urls" style="text-align: center;display: none;background: #F1EDED;margin: 15px -10px;border: 1px solid rgb(189, 189, 189);border-left: 0;border-right: 0;"></div>
<div id="videos-container" style="margin: 20px 0;"></div>
<div id="videos-container"></div>
<div id="room-urls" style="text-align: center;display: none;background: #F1EDED;margin: 15px -10px;border: 1px solid rgb(189, 189, 189);border-left: 0;border-right: 0;"></div>
</section>
<script src="/dist/RTCMultiConnection.min.js"></script>
<script src="/dist/RTCMultiConnection.js"></script>
<script src="/dev/adapter.js"></script>
<script src="/socket.io/socket.io.js"></script>
<!-- custom layout for HTML5 audio/video elements -->
<link rel="stylesheet" href="/dev/getHTMLMediaElement.css">
<script src="/dev/getHTMLMediaElement.js"></script>
<script>
window.enableAdapter = true; // enable adapter.js
// ......................................................
// .......................UI Code........................
// ......................................................
@@ -90,14 +88,16 @@ <h1>
document.getElementById('open-or-join-room').onclick = function() {
disableInputButtons();
connection.openOrJoin(document.getElementById('room-id').value, function(isRoomExist, roomid) {
if (!isRoomExist) {
if (isRoomExist === false && connection.isInitiator === true) {
// if room doesn't exist, it means that current user will create the room
showRoomURL(roomid);
}
else {
connection.sdpConstraints.mandatory = {
OfferToReceiveAudio: true,
OfferToReceiveVideo: true
};
if(isRoomExist) {
connection.sdpConstraints.mandatory = {
OfferToReceiveAudio: true,
OfferToReceiveVideo: true
};
}
});
};
@@ -129,17 +129,37 @@ <h1>
connection.videosContainer = document.getElementById('videos-container');
connection.onstream = function(event) {
var existing = document.getElementById(event.streamid);
if(existing && existing.parentNode) {
existing.parentNode.removeChild(existing);
}
event.mediaElement.removeAttribute('src');
event.mediaElement.removeAttribute('srcObject');
event.mediaElement.muted = true;
event.mediaElement.volume = 0;
var video = document.createElement('video');
video.controls = true;
try {
video.setAttributeNode(document.createAttribute('autoplay'));
video.setAttributeNode(document.createAttribute('playsinline'));
} catch (e) {
video.setAttribute('autoplay', true);
video.setAttribute('playsinline', true);
}
if(event.type === 'local') {
video.muted = true;
video.volume = 0;
try {
video.setAttributeNode(document.createAttribute('muted'));
} catch (e) {
video.setAttribute('muted', true);
}
}
video.srcObject = event.stream;
var width = parseInt(connection.videosContainer.clientWidth / 2) - 20;
var width = parseInt(connection.videosContainer.clientWidth / 3) - 20;
var mediaElement = getHTMLMediaElement(video, {
title: event.userid,
buttons: ['full-screen'],
@@ -160,10 +180,37 @@ <h1>
var mediaElement = document.getElementById(event.streamid);
if (mediaElement) {
mediaElement.parentNode.removeChild(mediaElement);
if(event.userid === connection.sessionid && !connection.isInitiator) {
alert('Broadcast is ended. We will reload this page to clear the cache.');
location.reload();
}
}
};
connection.onMediaError = function(e) {
if (e.message === 'Concurrent mic process limit.') {
if (DetectRTC.audioInputDevices.length <= 1) {
alert('Please select external microphone. Check github issue number 483.');
return;
}
var secondaryMic = DetectRTC.audioInputDevices[1].deviceId;
connection.mediaConstraints.audio = {
deviceId: secondaryMic
};
connection.join(connection.sessionid);
}
};
// ..................................
// ALL below scripts are redundant!!!
// ..................................
function disableInputButtons() {
document.getElementById('room-id').onkeyup();
document.getElementById('open-or-join-room').disabled = true;
document.getElementById('open-room').disabled = true;
document.getElementById('join-room').disabled = true;
@@ -211,7 +258,7 @@ <h1>
}
document.getElementById('room-id').value = roomid;
document.getElementById('room-id').onkeyup = function() {
localStorage.setItem(connection.socketMessageEvent, this.value);
localStorage.setItem(connection.socketMessageEvent, document.getElementById('room-id').value);
};
var hashString = location.hash.replace('#', '');
@@ -232,10 +279,6 @@ <h1>
(function reCheckRoomPresence() {
connection.checkPresence(roomid, function(isRoomExist) {
if (isRoomExist) {
connection.sdpConstraints.mandatory = {
OfferToReceiveAudio: true,
OfferToReceiveVideo: true
};
connection.join(roomid);
return;
}
@@ -246,12 +289,26 @@ <h1>
disableInputButtons();
}
// detect 2G
if(navigator.connection &&
navigator.connection.type === 'cellular' &&
navigator.connection.downlinkMax <= 0.115) {
alert('2G is not supported. Please use a better internet service.');
}
</script>
<section class="no-mobile">
<h2>iOS or Android</h2>
<section>
<p>
You can write cordova/ionic/phonegap based <a href="https://www.rtcmulticonnection.org/docs/Write-iOS-Apps/" target="_blank">iOS</a> or <a href="https://www.rtcmulticonnection.org/docs/Write-Android-Apps/" target="_blank">Android</a> apps for this demo as well.
</p>
<p>
You can run same demo on Safari-11 as well. (both on MacOSX & iOS)
</p>
<p>
You can write <a href="http://www.rtcmulticonnection.org/docs/Write-iOS-Apps/" target="_blank">iOS</a> or <a href="http://www.rtcmulticonnection.org/docs/Write-Android-Apps/" target="_blank">Android</a> apps for this demo as well.
Microsoft Edge is also supported.
</p>
</section>
View
@@ -3,26 +3,30 @@
var IceServersHandler = (function() {
function getIceServers(connection) {
// resiprocate: 3344+4433
// pions: 7575
var iceServers = [{
'urls': [
'stun:webrtcweb.com:7788', // coTURN
'stun:webrtcweb.com:7788?transport=udp', // coTURN
],
'username': 'muazkh',
'credential': 'muazkh'
},
{
'urls': [
'turn:webrtcweb.com:7788', // coTURN 7788+8877
'turn:webrtcweb.com:4455', // restund udp
'turn:webrtcweb.com:7788?transport=udp', // coTURN udp
'turn:webrtcweb.com:7788?transport=tcp', // coTURN tcp
'turn:webrtcweb.com:4455?transport=udp', // restund udp
'turn:webrtcweb.com:5544?transport=tcp', // restund tcp
'turn:webrtcweb.com:7575?transport=udp', // pions/turn
'turn:webrtcweb.com:8877?transport=udp', // coTURN udp
'turn:webrtcweb.com:8877?transport=tcp', // coTURN tcp
],
'username': 'muazkh',
'credential': 'muazkh'
},
{
'urls': [
'stun:stun.l.google.com:19302',
'stun:stun.l.google.com:19302?transport=udp'
'stun:stun.l.google.com:19302?transport=udp',
]
}
];
Oops, something went wrong.

0 comments on commit 157c9e5

Please sign in to comment.