Permalink
b649a98 May 14, 2018
1 contributor

Users who have contributed to this file

executable file 320 lines (266 sloc) 11.1 KB
<!--
> Muaz Khan - github.com/muaz-khan
> MIT License - www.webrtc-experiment.com/licence
> Documentation - www.RTCMultiConnection.org
-->
<!DOCTYPE html>
<html id="home" lang="en">
<head>
<script>
if(!location.hash.replace('#', '').length) {
location.href = location.href.split('#')[0] + '#' + (Math.random() * 100).toString().replace('.', '');
location.reload();
}
</script>
<title>Users ejection and presence detection using RTCMultiConnection | Muaz Khan</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
<meta name="author" content="Muaz Khan">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="https://cdn.webrtc-experiment.com/style.css">
<style>
audio,
video {
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
-webkit-transition: all 1s ease;
transition: all 1s ease;
vertical-align: top;
}
input {
border: 1px solid #d9d9d9;
border-radius: 1px;
font-size: 2em;
margin: .2em;
width: 30%;
}
.setup {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
font-size: 102%;
height: 47px;
margin-left: -9px;
margin-top: 8px;
position: absolute;
}
p {
padding: 1em;
}
li {
border-bottom: 1px solid rgb(189, 189, 189);
border-left: 1px solid rgb(189, 189, 189);
padding: .5em;
}
.video-container {
background: white;
border: 2px solid black;
border-radius: 0.2em;
display: inline-block;
margin: 2em .2em;
padding: .1em;
vertical-align: top;
}
.video-container h2 {
border: 0;
border-top: 1px solid black;
display: block;
margin: 0;
text-align: center;
}
.eject {
background-image: url('https://www.webrtc-experiment.com/images/eject.png') !important;
background-position: center center !important;
background-repeat: no-repeat !important;
border-color: white;
border-radius: 0;
height: 30px;
margin: .2em;
position: absolute;
width: 30px;
z-index: 200;
}
</style>
<!-- for HTML5 el styling -->
<script>
document.createElement('article');
document.createElement('footer');
</script>
<script src="https://cdn.webrtc-experiment.com/socket.io.js"></script>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="https://cdn.webrtc-experiment.com/CodecsHandler.js"></script>
<script src="https://cdn.webrtc-experiment.com/IceServersHandler.js"></script>
<script src="https://cdn.webrtc-experiment.com/RTCMultiConnection.js"></script>
</head>
<body>
<article>
<header style="text-align: center;">
<h1>Users ejection and presence detection</h1>
<p>
<a href="https://www.webrtc-experiment.com/">HOME</a>
<span> &copy; </span>
<a href="http://www.MuazKhan.com/" target="_blank">Muaz Khan</a> .
<a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a> .
<a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a> .
<a href="https://github.com/muaz-khan/WebRTC-Experiment/issues?state=open" target="_blank">Latest issues</a> .
<a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">What's New?</a>
</p>
</header>
<div class="github-stargazers"></div>
<section>
<h2>New Session:</h2>
<button id="start-new-session">Start New Video Session</button>
</section>
<table style="border-left: 1px solid black; width: 100%;">
<tr>
<td id="local-video-container">
<h2>Local video container</h2>
</td>
<td id="remote-videos-container" style="background: white; border-left: 1px solid black;">
<h2>Remote videos container
</h2>
</td>
</tr>
<tr>
<td colspan="2">
<table id="sessions-list" style="width: 100%;"></table>
</td>
</tr>
</table>
<script>
// window.username = Math.random() * 9999 << 9999;
var connection = new RTCMultiConnection();
// https://github.com/muaz-khan/WebRTC-Experiment/tree/master/socketio-over-nodejs
var SIGNALING_SERVER = 'https://socketio-over-nodejs2.herokuapp.com:443/';
connection.openSignalingChannel = function(config) {
var channel = config.channel || connection.channel || 'default-namespace';
var sender = Math.round(Math.random() * 9999999999) + 9999999999;
io.connect(SIGNALING_SERVER).emit('new-channel', {
channel: channel,
sender: sender
});
var socket = io.connect(SIGNALING_SERVER + channel);
socket.channel = channel;
socket.on('connect', function() {
if (config.callback) config.callback(socket);
});
socket.send = function(message) {
socket.emit('message', {
sender: sender,
data: message
});
};
socket.on('message', config.onmessage);
};
var sessionsList = document.getElementById('sessions-list');
connection.onNewSession = function(session) {
var tr = document.createElement('tr');
tr.innerHTML = '<td>' + session.extra.username + '</td>';
var td = document.createElement('td');
var button = document.createElement('button');
button.innerHTML = 'join';
td.appendChild(button);
tr.appendChild(td);
sessionsList.insertBefore(tr, sessionsList.firstChild);
button.onclick = function() {
if (!window.username) window.username = prompt('Please enter your username') || 'Anonymous';
connection.extra = {
username: window.username
};
session.join();
document.getElementById('start-new-session').disabled = true;
sessionsList.style.display = 'none';
};
};
// check if user is ejected
// clear rooms-list if user is ejected
connection.onSessionClosed = function(event) {
if (event.isEjected) {
sessionsList.innerHTML = '';
sessionsList.style.display = 'block';
}
};
document.getElementById('start-new-session').onclick = function() {
if (!window.username) window.username = prompt('Please enter your username') || 'Anonymous';
connection.extra = {
username: window.username
};
connection.interval = 1000;
connection.sessionid = window.username;
connection.open();
document.getElementById('start-new-session').disabled = true;
sessionsList.style.display = 'none';
};
connection.onstream = function(stream) {
if (stream.type === 'local') {
var video = getVideo(stream, {
username: window.username
});
document.getElementById('local-video-container').appendChild(video);
}
if (stream.type === 'remote') {
var video = getVideo(stream, stream.extra);
var remoteVideosContainer = document.getElementById('remote-videos-container');
remoteVideosContainer.appendChild(video, remoteVideosContainer.firstChild);
}
stream.mediaElement.width = innerWidth / 3.4;
};
connection.onstreamended = function(e) {
if (e.mediaElement && e.mediaElement.parentNode && e.mediaElement.parentNode.parentNode) {
e.mediaElement.parentNode.parentNode.removeChild(e.mediaElement.parentNode);
}
};
function getVideo(stream, extra) {
var div = document.createElement('div');
div.className = 'video-container';
div.id = stream.userid || 'self';
if (stream.type === 'remote') {
if (connection.isInitiator) {
var eject = document.createElement('button');
eject.className = 'eject';
eject.title = 'Eject this User';
eject.onclick = function() {
// eject a specific user
connection.eject(this.parentNode.id);
this.parentNode.style.display = 'none';
};
div.appendChild(eject);
}
}
div.appendChild(stream.mediaElement);
if (extra) {
var h2 = document.createElement('h2');
h2.innerHTML = extra.username;
div.appendChild(h2);
}
return div;
}
connection.connect();
</script>
<br/>
<br/>
<h2 id="go">Go ahead and try <a href="http://www.rtcmulticonnection.org/docs/" target="_blank">RTCMultiConnection</a>!</h2>
<br/>
<br/>
<section style="border: 1px solid rgb(189, 189, 189); border-radius: .2em; margin: 1em 3em;">
<h2 id="feedback" style="border-bottom: 1px solid rgb(189, 189, 189); padding: .2em .4em;">Feedback</h2>
<div>
<textarea id="message" style="border: 1px solid rgb(189, 189, 189); height: 8em; margin: .2em; outline: none; resize: vertical; width: 98%;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
</div>
<button id="send-message" style="font-size: 1em;">Send Message</button>
</section>
</article>
<a href="https://github.com/muaz-khan/RTCMultiConnection" class="fork-left"></a>
<footer>
<a href="https://www.webrtc-experiment.com/" target="_blank">WebRTC Experiments!</a> and
<a href="http://www.RTCMultiConnection.org/docs/" target="_blank">RTCMultiConnection.js</a> ©
<a href="mailto:muazkh@gmail.com" target="_blank">Muaz Khan</a>:
<a href="https://twitter.com/WebRTCWeb" target="_blank">@WebRTCWeb</a>
</footer>
<!-- commits.js is useless for you! -->
<script>window.useThisGithubPath = 'muaz-khan/RTCMultiConnection';</script>
<script src="https://cdn.webrtc-experiment.com/commits.js" async></script>
</body>
</html>