Skip to content

Instantly share code, notes, and snippets.

@tsujio
Created July 10, 2014 08:48
  • Star 1 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save tsujio/b64ab9db1e9ccc672ba9 to your computer and use it in GitHub Desktop.
Sample of video streaming relay using WebRTC
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>
<script type="text/javascript" src="http://cdn.peerjs.com/0.3.8/peer.js"></script>
<script type="text/javascript" src="./webrtc-relay.js"></script>
</head>
<body>
<button id="btn" class="start">Start</button><br />
<div id="container">
</div>
<script type="text/template" id="template-node">
<div>
<video autoplay="autoplay"></video>
</div>
</script>
</body>
</html>
$(function() {
var config = {
key: 'lwjd5qra8257b9'
};
var nodeNum = 0;
var streams = {};
var peers = {};
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
$("#btn").click(function() {
$(this).attr("disabled", "disabled");
var peer = new Peer(config);
peer.on('open', function(id) {
var $html = $(_.template($("#template-node").html())());
nodeNum++;
$html.attr("id", nodeNum);
$("#container").append($html);
peers[nodeNum] = peer;
if ($("#btn").hasClass("start")) {
$("#btn").removeClass("start")
$("#btn").text("Add");
navigator.getUserMedia({video: true}, function(stream) {
streams[nodeNum] = stream;
$html.find("video").attr("src", window.URL.createObjectURL(stream));
$("#btn").removeAttr("disabled");
}, function(error) {
$("#btn").removeAttr("disabled");
console.log(error);
});
} else {
var call = peers[nodeNum - 1].call(peer.id, streams[nodeNum - 1]);
call.on('error', function(error) {
console.log(error);
});
}
});
peer.on('call', function(call) {
call.answer();
call.on('stream', function(remoteStream) {
$("#btn").removeAttr("disabled");
streams[nodeNum] = remoteStream;
$("#" + nodeNum + " video").attr("src", window.URL.createObjectURL(remoteStream));
});
call.on('error', function(error) {
$("#btn").removeAttr("disabled");
console.log(error);
});
});
peer.on('error', function(error) {
$("#btn").removeAttr("disabled");
console.log(error);
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment