Permalink
Fetching contributors…
Cannot retrieve contributors at this time
executable file 420 lines (355 sloc) 13.3 KB
<!--
> Muaz Khan - github.com/muaz-khan
> MIT License - www.webrtc-experiment.com/licence
> Documentation - www.RTCMultiConnection.org
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Admin/Guest audio/video calling 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">
<script>
var hash = window.location.hash.replace('#', '');
if (!hash.length) {
location.href = location.href + '#' + ((Math.random() * new Date().getTime()).toString(36).toUpperCase().replace(/\./g, '-'));
location.reload();
}
</script>
<link href="//fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css" />
<style>
html {
background: #eee;
}
body {
font-family: "Inconsolata", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
font-size: 1.2em;
line-height: 1.2em;
margin: 0;
}
body {
background: #fff;
border: 1px solid;
border-color: #ddd #aaa #aaa #ddd;
border-radius: 5px;
margin: .5em auto 0 auto;
padding: .8em;
padding-top: 0;
}
h1,
h2 {
border-bottom: 1px solid black;
display: inline;
font-weight: normal;
line-height: 36px;
padding: 0 0 3px 0;
}
h1 {
background: rgb(238, 238, 238);
border-bottom-width: 2px;
display: block;
margin-top: 0;
padding: .3em;
text-align: center;
}
button {
-moz-border-radius: 3px;
-moz-transition: none;
-webkit-transition: none;
background: #0370ea;
background: -moz-linear-gradient(top, #008dfd 0, #0370ea 100%);
background: -webkit-linear-gradient(top, #008dfd 0, #0370ea 100%);
border: 1px solid #076bd2;
border-radius: 3px;
color: #fff;
display: inline-block;
font-family: inherit;
font-size: .8em;
line-height: 1.3;
padding: 5px 12px;
text-align: center;
text-shadow: 1px 1px 1px #076bd2;
}
button:hover {
background: rgb(9, 147, 240);
}
button:active {
background: rgb(10, 118, 190);
}
button[disabled] {
background: none;
border: 1px solid rgb(187, 181, 181);
color: gray;
text-shadow: none;
}
#remote-media-streams video {
width: 10em;
}
#local-media-stream video {
width: 34em;
}
footer {
text-align: center;
}
code {
color: rgb(204, 14, 14);
font-family: inherit;
}
audio,
video {
vertical-align: bottom;
}
pre {
border-left: 2px solid red;
margin-left: 2em;
padding-left: 1em;
}
a {
color: #2844FA;
text-decoration: none;
}
a:hover,
a:focus {
color: #1B29A4;
}
a:active {
color: #000;
}
:-moz-any-link:focus {
border: 0;
color: #000;
}
::selection {
background: #ccc;
}
::-moz-selection {
background: #ccc;
}
.prompt-bar {
background: rgb(255, 255, 255);
border: 9px solid rgb(216, 216, 216);
border-radius: 5px;
bottom: 0;
box-shadow: 0 0 5px, inset 0 0 2px;
display: none;
position: fixed;
right: 0;
width: 30%;
z-index: 100;
}
.prompt-bar #header {
border-bottom: 1px solid rgb(213, 211, 211);
display: block;
padding: .1em .6em;
}
.prompt-bar #body {
padding: .2em .6em;
}
.prompt-bar #controls {
background: rgb(175, 174, 174);
border: 1px solid gray;
text-align: center;
}
video {
vertical-align: top;
width: 48%;
}
</style>
<script src="//cdn.webrtc-experiment.com/RTCMultiConnection-v1.6.js">
</script>
<script src="//cdn.webrtc-experiment.com/getMediaElement.min.js">
</script>
<script src="//cdn.webrtc-experiment.com/socket.io.js">
</script>
</head>
<body>
<h1>
Admin/Guest audio/video calling using / <a href="http://www.RTCMultiConnection.org/docs/" target="_blank">RTCMultiConnection</a>
</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>
<div id="videos-container" style="text-align: center;"></div>
<div style="text-align: center;">
<button id="init-admin">I'm Admin</button>
<button id="init-guest">I'm Guest</button>
</div>
<div class="prompt-bar">
<h2 id="header">...</h2>
<p id="body">...</p>
<div id="controls">
<button id="ok">...</button>
<button id="cancel">x</button>
</div>
</div>
<script>
function initAdminOrGuest(userType) {
window.connection = new RTCMultiConnection();
connection.userType = userType;
if (userType == 'guest') connection.onAdmin = onGuestOrUser;
if (userType == 'admin') connection.onGuest = onGuestOrUser;
function onGuestOrUser(user) {
promptBar.style.display = 'block';
promptBar.querySelector('#ok').disabled = false;
promptBar.querySelector('#header').innerHTML = userType + ' is online';
promptBar.querySelector('#body').innerHTML = 'Are you want to do audio/video call with ' + userType + '?';
var ok = promptBar.querySelector('#ok');
ok.innerHTML = 'Audio/Video Call';
ok.onclick = function() {
connection.request(user.userid);
this.disabled = true;
};
promptBar.querySelector('#cancel').onclick = function() {
promptBar.style.display = 'none';
};
}
connection.onRequest = function(userid, extra) {
promptBar.style.display = 'block';
promptBar.querySelector('#ok').disabled = false;
promptBar.querySelector('#header').innerHTML = 'New Request';
promptBar.querySelector('#body').innerHTML = userid + ' requested you to receive his audio/video call. Are you want to accept his call?';
var ok = promptBar.querySelector('#ok');
ok.innerHTML = 'Receive Audio/Video Call';
ok.onclick = function() {
connection.accept(userid, extra);
this.disabled = true;
};
promptBar.querySelector('#cancel').onclick = function() {
promptBar.style.display = 'none';
this.disabled = true;
};
};
connection.onstats = function(stats, userinfo) {
resetPromptBar();
if (stats == 'busy') {
promptBar.querySelector('#header').innerHTML = userType + ' is Busy';
promptBar.querySelector('#body').innerHTML = userinfo.userid + ' is busy. Please wait..';
}
if (stats == 'accepted') {
promptBar.querySelector('#header').innerHTML = 'Receiving';
promptBar.querySelector('#body').innerHTML = userinfo.userid + ' is receiving your call..';
}
};
connection.session = {
audio: true,
video: true
};
connection.openSignalingChannel = openSignalingChannel;
connection.onstream = function(e) {
var mediaElement = getMediaElement(e.mediaElement, {
width: (videosContainer.clientWidth / 2) - 50,
buttons: ['mute-audio', 'mute-video', 'record-audio', 'record-video', 'full-screen', 'volume-slider', 'stop'],
onMuted: function(type) {
connection.streams[e.streamid].mute({
audio: type == 'audio',
video: type == 'video'
});
},
onUnMuted: function(type) {
connection.streams[e.streamid].unmute({
audio: type == 'audio',
video: type == 'video'
});
},
onRecordingStarted: function(type) {
connection.streams[e.streamid].startRecording({
audio: type == 'audio',
video: type == 'video'
});
},
onRecordingStopped: function(type) {
connection.streams[e.streamid].stopRecording(function(blob) {
var _mediaElement = document.createElement(type);
_mediaElement.src = URL.createObjectURL(blob);
_mediaElement = getMediaElement(_mediaElement, {
buttons: ['mute-audio', 'mute-video', 'stop']
});
_mediaElement.toggle(['mute-audio', 'mute-video']);
videosContainer.insertBefore(_mediaElement, videosContainer.firstChild);
}, type);
},
onStopped: function() {
connection.drop();
}
});
videosContainer.insertBefore(mediaElement, videosContainer.firstChild);
if (e.type == 'remote') {
resetPromptBar();
promptBar.style.display = 'none';
}
};
connection.onstreamended = function(e) {
if (e.mediaElement.parentNode && e.mediaElement.parentNode.parentNode && e.mediaElement.parentNode.parentNode.parentNode) {
e.mediaElement.parentNode.parentNode.parentNode.removeChild(e.mediaElement.parentNode.parentNode);
}
};
connection.connect();
}
function openSignalingChannel(config) {
var SIGNALING_SERVER = 'https://socketio-signaling.herokuapp.com:443/';
var channel = config.channel || this.channel;
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);
}
document.getElementById('init-admin').onclick = function() {
this.disabled = true;
initAdminOrGuest('admin');
};
document.getElementById('init-guest').onclick = function() {
this.disabled = true;
initAdminOrGuest('guest');
};
var promptBar = document.querySelector('.prompt-bar');
function resetPromptBar() {
promptBar.style.display = 'block';
promptBar.querySelector('#ok').disabled = true;
promptBar.querySelector('#ok').innerHTML = '...';
promptBar.querySelector('#header').innerHTML = '...';
promptBar.querySelector('#body').innerHTML = '...';
}
var videosContainer = document.getElementById('videos-container');
</script>
<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>
<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 src="//cdn.webrtc-experiment.com/commits.js" async>
</script>
</body>
</html>