Skip to content

Commit

Permalink
Added new demo: "video-and-screen-sharing.html"
Browse files Browse the repository at this point in the history 
https://rtcmulticonnection.herokuapp.com/demos/video-and-screen-sharing.html
  • Loading branch information
@muaz-khan
muaz-khan committed Sep 23, 2018
1 parent 01e6da2 commit 724ead7
Show file tree
Hide file tree
Showing 5 changed files with 421 additions and 79 deletions.
91 changes: 18 additions & 73 deletions demos/Scalable-Broadcast.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!-- Demo version: 2017.08.08 -->
<!-- Demo version: 2018.09.23 -->

<!DOCTYPE html>
<html lang="en" dir="ltr">
Expand All @@ -18,18 +18,17 @@
<li>
<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>
Expand All @@ -48,17 +47,19 @@ <h1>
</h1>

<section class="make-center">
<div class="make-center">
<input type="text" id="broadcast-id" value="room-xyz" autocorrect=off autocapitalize=off size=20>
<button id="open-or-join">Open or Join Broadcast</button>
<p style="margin: 0; padding: 0; padding-bottom: 20px;">
<div class="make-center">
<input type="text" id="broadcast-id" value="room-xyz" autocorrect=off autocapitalize=off size=20>
<button id="open-or-join">Open or Join Broadcast</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 class="make-center" id="broadcast-viewers-counter"></div>
<div class="make-center" id="broadcast-viewers-counter"></div>
</p>

<video id="video-preview" controls loop></video>
</section>

<script src="/dist/RTCMultiConnection.min.js"></script>
<script src="/dev/adapter.js"></script>
<script src="/socket.io/socket.io.js"></script>
<!-- <script src="https://cdn.webrtc-experiment.com/RecordRTC.js"></script> -->
<script>
Expand Down Expand Up @@ -146,9 +147,7 @@ <h1>
// "open" method here will capture media-stream
// we can skip this function always; it is totally optional here.
// we can use "connection.getUserMediaHandler" instead
connection.open(connection.userid, function() {
showRoomURL(connection.sessionid);
});
connection.open(connection.userid);
});
});

Expand Down Expand Up @@ -222,6 +221,9 @@ <h1>
repeatedlyRecordStream(event.stream);
}
}

// to keep room-id in cache
localStorage.setItem(connection.socketMessageEvent, connection.sessionid);
};

// ask node.js server to look for a broadcast
Expand Down Expand Up @@ -334,75 +336,18 @@ <h1>
// ......................Handling broadcast-id................
// ......................................................

function showRoomURL(broadcastId) {
var roomHashURL = '#' + broadcastId;
var roomQueryStringURL = '?broadcastId=' + broadcastId;

var html = '<h2>Unique URL for your room:</h2><br>';

html += 'Hash URL: <a href="' + roomHashURL + '" target="_blank">' + roomHashURL + '</a>';
html += '<br>';
html += 'QueryString URL: <a href="' + roomQueryStringURL + '" target="_blank">' + roomQueryStringURL + '</a>';

var roomURLsDiv = document.getElementById('room-urls');
roomURLsDiv.innerHTML = html;

roomURLsDiv.style.display = 'block';
}

(function() {
var params = {},
r = /([^&=]+)=?([^&]*)/g;

function d(s) {
return decodeURIComponent(s.replace(/\+/g, ' '));
}
var match, search = window.location.search;
while (match = r.exec(search.substring(1)))
params[d(match[1])] = d(match[2]);
window.params = params;
})();

var broadcastId = '';
if (localStorage.getItem(connection.socketMessageEvent)) {
broadcastId = localStorage.getItem(connection.socketMessageEvent);
} else {
broadcastId = connection.token();
}
document.getElementById('broadcast-id').value = broadcastId;
document.getElementById('broadcast-id').onkeyup = function() {
var txtBroadcastId = document.getElementById('broadcast-id');
txtBroadcastId.value = broadcastId;
txtBroadcastId.onkeyup = txtBroadcastId.oninput = txtBroadcastId.onpaste = function() {
localStorage.setItem(connection.socketMessageEvent, this.value);
};

var hashString = location.hash.replace('#', '');
if (hashString.length && hashString.indexOf('comment-') == 0) {
hashString = '';
}

var broadcastId = params.broadcastId;
if (!broadcastId && hashString.length) {
broadcastId = hashString;
}

if (broadcastId && broadcastId.length) {
document.getElementById('broadcast-id').value = broadcastId;
localStorage.setItem(connection.socketMessageEvent, broadcastId);

// auto-join-room
(function reCheckRoomPresence() {
connection.checkPresence(broadcastId, function(isRoomExists) {
if (isRoomExists) {
document.getElementById('open-or-join').onclick();
return;
}

setTimeout(reCheckRoomPresence, 5000);
});
})();

disableInputButtons();
}

// below section detects how many users are viewing your broadcast

connection.onNumberOfBroadcastViewersUpdated = function(event) {
Expand Down
11 changes: 8 additions & 3 deletions demos/Video-Conferencing.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!-- Demo version: 2018.05.21 -->
<!-- Demo version: 2018.09.23 -->

<!DOCTYPE html>
<html lang="en" dir="ltr">
Expand Down Expand Up @@ -161,6 +161,9 @@ <h1>
}, 5000);

mediaElement.id = event.streamid;

// to keep room-id in cache
localStorage.setItem(connection.socketMessageEvent, connection.sessionid);
};

connection.onstreamended = function(event) {
Expand Down Expand Up @@ -238,8 +241,10 @@ <h1>
} else {
roomid = connection.token();
}
document.getElementById('room-id').value = roomid;
document.getElementById('room-id').onkeyup = function() {

var txtRoomId = document.getElementById('room-id');
txtRoomId.value = roomid;
txtRoomId.onkeyup = txtRoomId.oninput = txtRoomId.onpaste = function() {
localStorage.setItem(connection.socketMessageEvent, document.getElementById('room-id').value);
};

Expand Down
5 changes: 3 additions & 2 deletions demos/dashboard.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,11 +216,12 @@
quadratic: false,
bezier: true,
marker: true,
zoom: true,
zoom: false,
lineWidth: false,
colorsPicker: false,
extraOptions: false,
code: false
code: false,
undo: true
});

designer.appendTo(document.getElementById('widget-container'));
Expand Down
8 changes: 7 additions & 1 deletion demos/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!-- Demo version: 2018.09.15 -->
<!-- Demo version: 2018.09.22 -->

<!DOCTYPE html>
<html lang="en" dir="ltr">
Expand Down Expand Up @@ -152,6 +152,12 @@ <h2>
<td class="td-style"><a href="https://github.com/muaz-khan/RTCMultiConnection/tree/master/demos/Call-By-UserName.html" class="td-style2">Source</a></td>
</tr>

<tr class="tr-style" style="background: #e4f6ff;">
<td class="td-style">Video + Screen Sharing</td>
<td class="td-style"><a href="/demos/video-and-screen-sharing.html" class="td-style2">Demo</a></td>
<td class="td-style"><a href="https://github.com/muaz-khan/RTCMultiConnection/tree/master/demos/video-and-screen-sharing.html" class="td-style2">Source</a></td>
</tr>

<tr class="tr-style" style="background: #e4f6ff;">
<td class="td-style">MCU inside the browser!</td>
<td class="td-style"><a href="/demos/MCU.html" class="td-style2">Demo</a></td>
Expand Down
Loading

0 comments on commit 724ead7

Please sign in to comment.