Skip to content

Instantly share code, notes, and snippets.

@GleasonK
Last active December 28, 2018 02:02
Show Gist options
  • Save GleasonK/cec0a1a48cbd44901508 to your computer and use it in GitHub Desktop.
Save GleasonK/cec0a1a48cbd44901508 to your computer and use it in GitHub Desktop.
Code snippets for Embeddable Live Streams
<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>
<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>
var video_out = document.getElementById("vid-box");
var embed_code = document.getElementById("embed-code");
var here_now = document.getElementById('here-now');
var streamName;
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
}
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
}
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));
}
<div id="vid-box"></div>
<div id="stream-info"><span id="here-now">0</span></div>
#vid-box{
width: 100%;
height: 100%;
text-align: center;
}
#vid-box video{
width: 100%;
height: 100%;
}
#stream-info{
position: absolute;
bottom: 3vh;
right: 5vw;
}
<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>
(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;
}
...
}())
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(); });
cd <project-dir>
# Python 2
python -m SimpleHTTPServer <portNo>
# Python 3
python -m http.server <portNo>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment