Code snippets for Embeddable Live Streams

01.html

<div id="vid-box"><!-- Stream goes here --></div>

<form name="streamForm" id="stream" action="#" onsubmit="return stream(this);">
    <input type="text" name="streamname" id="streamname" placeholder="Pick a stream name!" />
    <input type="submit" name="stream_submit" value="Stream"> 
    <div id="stream-info">Watching: <span id="here-now">0</span></div>
</form>

<form name="watchForm" id="watch" action="#" onsubmit="return watch(this);">
	<input type="text" name="number" placeholder="Enter stream to join!" />
	<input type="submit" value="Watch"/>
</form>

<div id="inStream">
	<button id="end" onclick="end()">Done</button> <br>
	Generate Embed: <button onclick="genEmbed(400,600)">Tall</button><button onclick="genEmbed(600,400)">Wide</button><button onclick="genEmbed(500,500)">Square</button><br>
	<div id="embed-code"></div>
</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 embed_code = document.getElementById("embed-code");
var here_now   = document.getElementById('here-now');
var streamName;

04.js

function stream(form) {
	streamName = form.streamname.value || Math.floor(Math.random()*100)+''; // Random stream if not provided
	var phone = window.phone = PHONE({
	    number        : streamName, // listen on username else random
	    publish_key   : 'your_pub_key', // Your Pub Key
	    subscribe_key : 'your_sub_key', // Your Sub Key
	    oneway        : true,	// One-Way streaming enabled
	    broadcast     : true	// True since you are the broadcaster
	});
	var ctrl = window.ctrl = CONTROLLER(phone);
	ctrl.ready(function(){
		form.streamname.style.background="#55ff5b"; 
		form.stream_submit.hidden="true"; 
		ctrl.addLocalStream(video_out);
		ctrl.stream(); 	// Begin streaming video
	});
	ctrl.streamPresence(function(m){ here_now.innerHTML=m.occupancy; });
	return false;  // So form does not submit
}

05.js

function watch(form){
	var num = form.number.value;  // Stream to join
	var phone = window.phone = PHONE({
	    number        : "Viewer" + Math.floor(Math.random()*100), // Random name
	    publish_key   : 'your_pub_key', // Your Pub Key
	    subscribe_key : 'your_sub_key', // Your Sub Key
	    oneway        : true	// One way streaming enabled
	});
	var ctrl = window.ctrl = CONTROLLER(phone, true);
	ctrl.ready(function(){
		ctrl.isStreaming(num, function(isOn){
			if (isOn) ctrl.joinStream(num);
			else alert("User is not streaming!");
		});
	});
	ctrl.receive(function(session){
	    session.connected(function(session){ video_out.appendChild(session.video); });
	});
	ctrl.streamPresence(function(m){ here_now.innerHTML=m.occupancy; });
	return false;  // Prevent form from submitting
}

06.js

function genEmbed(w,h){
	if (!streamName) return;  // If global var not set, not streaming
	var url = "http://<your-webstie>/embed.html?stream=" + streamName;
	var embed    = document.createElement('iframe');
	embed.src    = url;
	embed.width  = w;
	embed.height = h;
	embed.setAttribute("frameborder", 0);
	embed_code.innerHTML = 'Embed Code: ';
	embed_code.appendChild(document.createTextNode(embed.outerHTML));
}

07.html

<div id="vid-box"></div>
<div id="stream-info"><span id="here-now">0</span></div>

08.css

#vid-box{
	width: 100%;
	height: 100%;
	text-align: center;
}

#vid-box video{
	width: 100%;
	height: 100%;
}

#stream-info{
	position: absolute;
	bottom: 3vh;
	right: 5vw;
}

09.html

<script src="https://cdn.pubnub.com/pubnub.min.js"></script>
<script src="http://kevingleason.me/SimpleRTC/js/webrtc.js"></script>
<script src="http://kevingleason.me/SimpleRTC/js/rtc-controller.js"></script>

10.js

(function(){

var urlargs     = urlparams();
var video_out   = document.getElementById("vid-box");
var stream_info = document.getElementById("stream-info");
var here_now    = document.getElementById("here-now"); 

// Handle error if stream is not in urlargs.
if (!('stream' in urlargs)) {
	handleNoStream();
    return;
}

// Get URL params
function urlparams() {
    var params = {};
    if (location.href.indexOf('?') < 0) return params;
    PUBNUB.each(
        location.href.split('?')[1].split('&'),
        function(data) { var d = data.split('='); params[d[0]] = d[1]; }
    );
    return params;
}

function handleNoStream(){
	video_out.innerHTML="<h2>That stream no longer exists!</h2>";
	stream_info.hidden=true;
}
...

}())

11.js

var phone = window.phone = PHONE({
    number        : "EmbedViewer" + Math.floor(Math.random()*100), // random viewer name
    publish_key   : 'your_pub_key', // Your Pub Key
    subscribe_key : 'your_sub_key', // Your Sub Key
    oneway        : true,
});
var ctrl = window.ctrl = CONTROLLER(phone);
ctrl.ready(function(){
	ctrl.isStreaming(stream, function(isOn){
		if (isOn) ctrl.joinStream(stream);
		else handleNoStream();
	}); 
});
ctrl.receive(function(session){
    session.connected(function(session){ stream_info.hidden=false; video_out.appendChild(session.video); });
    session.ended(function(session){ handleNoStream(); });
});
ctrl.streamPresence(function(m){
	here_now.innerHTML = m.occupancy;
});
ctrl.unable(function(){ handleNoStream(); });

bash.sh

cd <project-dir>

# Python 2
python -m SimpleHTTPServer <portNo>

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