rtcmulticonnection
Version:
RTCMultiConnection is a WebRTC JavaScript wrapper library runs top over RTCPeerConnection API to support all possible peer-to-peer features.
283 lines (235 loc) • 8.67 kB
HTML
<!-- Demo version: 2018.10.01 -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Call-By-UserName using RTCMultiConnection</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<link rel="shortcut icon" href="/demos/logo.png">
<link rel="stylesheet" href="/demos/stylesheet.css">
<script src="/demos/menu.js"></script>
<style type="text/css">
table {
width: 100%;
}
td {
vertical-align: top;
}
td:first-child {
text-align: right;
width: 45%;
}
td:last-child {
text-align: left;
padding-left: 10px;
width: 45%;
}
</style>
</head>
<body>
<header>
<a class="logo" href="/demos/"><img src="/demos/logo.png" alt="RTCMultiConnection"></a>
<a href="/demos/" class="menu-explorer">Menu<img src="/demos/menu-icon.png" alt="Menu"></a>
<nav>
<li>
<a href="/demos/">Home</a>
</li>
<li>
<a href="https://www.rtcmulticonnection.org/docs/getting-started/">Getting Started</a>
</li>
<li>
<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://rtcmulticonnection.herokuapp.com/demos/">Demos</a>
</li>
<li>
<a href="https://github.com/muaz-khan/RTCMultiConnection/wiki">Wiki</a>
</li>
<li>
<a href="https://github.com/muaz-khan/RTCMultiConnection">Github</a>
</li>
</nav>
</header>
<h1>
Call-By-UserName
<p class="no-mobile">
Call Any Person By His UserName.
</p>
</h1>
<section class="make-center">
<table>
<tr>
<td style="padding-bottom: 40px;">
<label for="current-username">Your UserName:</label>
<input type="text" id="current-username" value="you" autocorrect=off autocapitalize=off size=20>
</td>
<td>
<button id="change-your-own-username">Set Your UserName</button>
</td>
</tr>
<tr>
<td>
<label for="callee-username">Callee UserName:</label>
<input type="text" id="callee-username" value="he" autocorrect=off autocapitalize=off size=20>
</td>
<td>
<button id="join-callee-using-his-username">Make a Video Call</button>
</td>
</tr>
<tr>
<td colspan="2">
<div id="videos-container" style="margin: 20px 0;"></div>
</td>
</tr>
</table>
</section>
<script src="/dist/RTCMultiConnection.min.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>
// ......................................................
// ..................RTCMultiConnection Code.............
// ......................................................
var connection = new RTCMultiConnection();
// by default, socket.io server is assumed to be deployed on your own URL
connection.socketURL = '/';
// comment-out below line if you do not have your own socket.io server
// connection.socketURL = 'https://rtcmulticonnection.herokuapp.com:443/';
connection.socketMessageEvent = 'call-by-username-demo';
// do not shift room control to other users
connection.autoCloseEntireSession = true;
connection.session = {
audio: true,
video: true,
broadcast: true // if you remove this, then it becomes MANY-to-MANY
};
connection.sdpConstraints.mandatory = {
OfferToReceiveAudio: true,
OfferToReceiveVideo: true
};
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');
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.volume = 0;
try {
video.setAttributeNode(document.createAttribute('muted'));
} catch (e) {
video.setAttribute('muted', true);
}
connection.dontCaptureUserMedia = true;
}
video.srcObject = event.stream;
var width = parseInt(connection.videosContainer.clientWidth / 3) - 20;
var mediaElement = getHTMLMediaElement(video, {
title: event.userid,
buttons: ['full-screen'],
width: width,
showOnMouseEnter: false
});
connection.videosContainer.appendChild(mediaElement);
setTimeout(function() {
mediaElement.media.play();
}, 5000);
mediaElement.id = event.streamid;
};
connection.onstreamended = function(event) {
var mediaElement = document.getElementById(event.streamid);
if (mediaElement) {
mediaElement.parentNode.removeChild(mediaElement);
}
};
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!!!
// ..................................
var joinCalleeUsingHisUsername = document.getElementById('join-callee-using-his-username');
joinCalleeUsingHisUsername.onclick = function() {
this.disabled = true;
connection.checkPresence(calleeUserName.value, function(isOnline, username) {
if(!isOnline) {
joinCalleeUsingHisUsername.disabled = false;
alert(username + ' is not online.');
return;
}
connection.join(username);
});
setTimeout(function() {
joinCalleeUsingHisUsername.disabled = false;
}, 1000);
};
// caller
var currentUserName = document.getElementById('current-username');
currentUserName.onkeyup = currentUserName.onpaste = currentUserName.oninput = function() {
localStorage.setItem(this.id, this.value);
};
currentUserName.value = localStorage.getItem(currentUserName.id) || connection.token();
connection.open(currentUserName.value);
document.getElementById('change-your-own-username').onclick = function() {
this.disabled = true;
location.reload();
};
// callee
var calleeUserName = document.getElementById('callee-username');
calleeUserName.onkeyup = calleeUserName.onpaste = calleeUserName.oninput = function() {
localStorage.setItem(this.id, this.value);
};
calleeUserName.value = localStorage.getItem(calleeUserName.id) || connection.token();
// 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>
<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>
Microsoft Edge is also supported.
</p>
</section>
<footer>
<small id="send-message"></small>
</footer>
<script src="https://cdn.webrtc-experiment.com/common.js"></script>
</body>
</html>