BasicRTC WebRTC Video Chat and Groups

01.html

<div id="vid-box"></div>
<div id="vid-thumb"></div>

<form name="loginForm" id="login" action="#" onsubmit="return login(this);">
    <input type="text" name="username" id="username" placeholder="Pick a username!" />
    <input type="submit" name="login_submit" value="Log In">
</form>


<form name="callForm" id="call" action="#" onsubmit="return makeCall(this);">
	<input type="text" name="number" placeholder="Enter user to dial!" />
	<input type="submit" value="Call"/>
</form>

<div id="inCall"> <!-- Buttons for in call features -->
	<button id="end" onclick="end()">End</button> <button id="mute" onclick="mute()">Mute</button> <button id="pause" onclick="pause()">Pause</button>
</div>

02.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.pubnub.com/pubnub-3.7.14.min.js"></script>
<script src="https://cdn.pubnub.com/webrtc/webrtc.js"></script>
<script src="https://cdn.pubnub.com/webrtc/rtc-controller.js"></script>

03.js

var video_out = document.getElementById("vid-box");
var vid_thumb = document.getElementById("vid-thumb");

04.js

function login(form) {
	var phone = window.phone = PHONE({
	    number        : form.username.value || "Anonymous", // listen on username line else Anonymous
	    publish_key   : 'your_pub_key',
	    subscribe_key : 'your_sub_key',
	});	
	var ctrl = window.ctrl = CONTROLLER(phone);
	ctrl.ready(function(){ ... });				// Called when ready to receive call
	ctrl.receive(function(session){
		session.connected(function(session){ ... }); // New Call
	    session.ended(function(session) { ... });    // Call Ended
	});	// Called on incoming call/call ended
	...	
	return false; //prevents form from submitting
}

05.js

ctrl.ready(function(){
	form.username.style.background="#55ff5b"; // Turn input green
	form.login_submit.hidden="true";	// Hide login button
	ctrl.addLocalStream(vid_thumb);		// Place local stream in div
});

06.js

ctrl.receive(function(session){
    session.connected(function(session){ video_out.appendChild(session.video); });
    session.ended(function(session) { ctrl.getVideoElement(session.number).remove(); });
});

07.js

function makeCall(form){
	if (!window.phone) alert("Login First!");
	var num = form.number.value;
	if (phone.number()==num) return false; // No calling yourself!
	ctrl.isOnline(num, function(isOn){		// Check if other user is listening for calls
		if (isOn) ctrl.dial(num);		// Dial if they are online
		else alert("User if Offline");	// Alert if not
	});
	return false; // So form does not submit
}

08.js

function end(){
	ctrl.hangup();
}

09.js

function mute(){
	var audio = ctrl.toggleAudio();
	if (!audio) $("#mute").html("Unmute");
	else $("#mute").html("Mute");
}

function pause(){
	var video = ctrl.toggleVideo();
	if (!video) $('#pause').html('Unpause');
	else $('#pause').html('Pause');
}

10.js

function login(form){
	...
	ctrl.videoToggled(function(session, isEnabled){
		ctrl.getVideoElement(session.number).toggle(isEnabled); // Hide video is stream paused
	});
	ctrl.audioToggled(function(session, isEnabled){
		ctrl.getVideoElement(session.number).css("opacity",isEnabled ? 1 : 0.75); // 0.75 opacity is audio muted
	});
	return false;
}

bash.sh

cd <project-dir>

# Python 2
python -m SimpleHTTPServer <portNo>

# Python 3
python -m http.server <portNo>