WebRTC-YouTubeTogether snippets

01.html

<div id="player"></div>
<div style="float: left; width: 50%;">
    <div id="video-chat" hidden="true" style="margin-bottom: 10px;">
		<div id="vid-box"></div>
		<button onclick="end()">End Call</button>
    </div>
    
    <form name="loginForm" id="login" action="#" onsubmit="return login(this);">
        	<input type="text" name="username" id="username" placeholder="Enter 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" id="call" placeholder="Enter User To Call!"/>
        <input type="submit" value="Call">
	</form>
	
	<form name="cueForm" id="cue" action="#" onsubmit="return cueFromURL(this);">
        <input type="text" name="url" id="url" placeholder="Enter YouTube Video URL"/>
        <input type="submit" value="Queue Video">
	</form>
</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.23.min.js"></script>
<script src="https://cdn.kevingleason.me/webrtc.js"></script>

03.js

var video_hold = document.getElementById("video-chat");
var video_out  = document.getElementById("vid-box");
var user_name = "";

function login(form) {
	user_name = form.username.value || "Anonymous";
	var phone = window.phone = PHONE({
	    number        : user_name, // listen on username line else Anonymous
	    publish_key   : 'your-pub-key', // Your Pub Key
	    subscribe_key : 'your-sub-key', // Your Sub Key
	    datachannels  : true,
	});	
	phone.ready(function(){form.username.style.background="#55ff5b"; form.login_submit.hidden="true"; });
	phone.receive(function(session){
	    session.connected(function(session) { video_hold.hidden=false; video_out.appendChild(session.video); });
	    session.ended(function(session) { video_out.innerHTML=''; });
	});
	// Configure DataChannel
	return false;
}

04.js

function makeCall(form){
    if (!window.phone) alert("Login First!");
    else phone.dial(form.number.value);
    return false;
}

05.js

function end(){
	if (!window.phone) return;
	window.phone.hangup();
	video_hold.hidden = true;
}

06.js

// This code loads the IFrame Player API code asynchronously. From YouTube API webpage.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// This function creates an <iframe> (and YouTube player) after the API code downloads.
var player;
var vidId = "dQw4w9WgXcQ";  // The youtube Video ID for your starting video
function onYouTubeIframeAPIReady() {
	player = new YT.Player('player', {
	height: '390',
	width: '640',
	videoId: vidId, // Starting video ID
	events: {
		'onStateChange': onPlayerStateChange
		}
	});
}

07.js

var done = false; // Variable to tell if the video is done or not
var seek = false; // Used to decide if we seeked elsewhere in the video.
var VID_CUE = 6;  // We define a VID_CUE event type. Used in msg.data when queueing a video.

08.js

function onPlayerStateChange(event) {
	if (!window.phone) return; // No active video chat, return.
	event.username = user_name;
	switch (event.data) {
		case YT.PlayerState.PLAYING:
			if (done) return;
			window.phone.sendData(event);
			break;
		case YT.PlayerState.PAUSED:
			window.phone.sendData(event);
			break;
		case YT.PlayerState.BUFFERING: // If they seeked, dont send this.
			if (seek) seek = false;
			else window.phone.sendData(event);
	}
}

09.js

function onDataReceived(msg){
	if (msg.username==user_name) return; // Ignore what I sent.
	switch(msg.data){
		case YT.PlayerState.PLAYING:
			player.playVideo();
			break;
		case YT.PlayerState.PAUSED:
			player.pauseVideo();
			break;
		case YT.PlayerState.BUFFERING: // They are buffering, we must seek.
			seek = true;
			player.seekTo(msg.target.B.currentTime, true);
			break;
		case VID_CUE:
			player.cueVideoById(msg.video,0,"large");
			break;
	}
}

10.js

function login(form) {
	// Setup phone
	// Ready and Receive Callbacks
	...
	phone.datachannel(onDataReceived);
	return false;
}

11.js

function cueFromURL(form){
	if (!form.url.value) return false;
	var url = form.url.value;
	var video_id = url.split('v=')[1];
	var ampersandPosition = video_id.indexOf('&');
	if(ampersandPosition != -1) {
		video_id = video_id.substring(0, ampersandPosition);
	}
	player.cueVideoById(video_id,0,"large");
	if (!window.phone) return; // Send event if phone connected.
	var msg = {username:user_name, data:VID_CUE, video:video_id};
	window.phone.sendData(msg);
	return false;
}