Permalink
Browse files

differentiate broadcast from watching

  • Loading branch information...
1 parent 28cfb2a commit 75cedd9680b004d6e95ae14299e6c98a35e183e5 @fadomire committed Mar 25, 2013
Showing with 82 additions and 78 deletions.
  1. +29 −22 app.js
  2. +1 −1 package.json
  3. +52 −53 public/js/client.js
  4. +0 −2 views/index.ejs
View
51 app.js
@@ -8,32 +8,35 @@ var app = express(),
server = require('http').createServer(app),
bs = BinaryServer({server : server});
-// Wait for new user connections
-bs.on('connection', function (client){
+function broadcast(){
// Define streams we must push to
var clientStreams = [];
- // Incoming stream from a client
- client.on('stream', function (stream, meta){
- // Find all connected clients
- var clients = bs.clients;
- // Create a stream for each clients
- for(i in clients){
- // Dont send data to the broadcaster and dont create a new stream if already exists
- if(client!=clients[i] && Object.keys(clients[i].streams).length == 0){
- console.log(clients[i].id);
- clientStreams.push(clients[i].createStream({clientId : clients[i].id}));
- }
- }
- // Push data to clients
- for(i in clientStreams){
- stream.pipe(clientStreams[i]);
- }
- stream.on('end', function (){
- console.log("stream is received 100% on server")
+
+ // Wait for new user connections
+ bs.on('connection', function (client){
+ console.log("Client "+client)
+ // Incoming stream from a client
+ client.on('stream', function (stream, meta){
+ // Find all connected clients
+ var clients = bs.clients;
+ // Create a stream for each clients
+ for(i in clients){
+ // Dont send data to the broadcaster and dont create a new stream if already exists
+ if(client!=clients[i] && Object.keys(clients[i].streams).length == 0){
+ console.log(clients[i].id);
+ clientStreams.push(clients[i].createStream({clientId : clients[i].id}));
+ }
+ }
+ // Push data to clients
+ for(i in clientStreams){
+ stream.pipe(clientStreams[i]);
+ }
+ stream.on('end', function (){
+ console.log("stream is received 100% on server");
+ });
});
});
-});
-
+}
server.listen(port);
app.set('view engine', 'ejs');
@@ -42,6 +45,10 @@ app.configure(function(){
app.use(express.static(__dirname + '/public'));
app.use(express.bodyParser());
});
+app.get('/broadcast', function(req, res){
+ broadcast();
+ res.render('index', {})
+});
app.get('/', function(req, res){
res.render('index', {})
});
View
2 package.json
@@ -1,6 +1,6 @@
{
"name": "coccoon",
- "version": "0.0.1-25",
+ "version": "0.0.1-28",
"dependencies": {
"express": "3.0.6",
"binaryjs": "0.1.7",
View
105 public/js/client.js
@@ -1,6 +1,6 @@
//(function() {
window.MediaSource = window.MediaSource || window.WebKitMediaSource;
- var client = new BinaryClient('ws://'+window.location.hostname);
+ var client = new BinaryClient('ws://'+window.location.hostname+);
var URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
if( ! URL ){
URL={};
@@ -9,61 +9,60 @@
URL.createObjectURL=function(obj){return obj;}
}
+ $("#videoSource").change(function (e){
+ var file = e.target.files[0];
+ var fileURL = URL.createObjectURL(file);
+ // Remove old stream video tag
+ if(document.getElementById('streamSource')){
+ document.getElementById('app').removeChild(document.getElementById('streamSource'));
+ }
+ var streamSource = document.createElement('video');
+ streamSource.id = 'streamSource';
+ streamSource.src = fileURL;
+ streamSource.controls = true;
+ streamSource.addEventListener('play', function(){
+ client.send(file, {name: file.name, size: file.size});
+ }, false);
+ document.getElementById('app').appendChild(streamSource);
+ });
- $("#videoSource").change(function (e){
- var file = e.target.files[0];
- var fileURL = URL.createObjectURL(file);
+ // Wait for client to connect to server
+ client.on('open', function (stream){
+ // Stream received from server
+ client.on('stream', function (stream){
+ console.log("new stream from server")
// Remove old stream video tag
- if(document.getElementById('streamSource')){
- document.getElementById('app').removeChild(document.getElementById('streamSource'));
+ if(document.getElementById('streamClient')){
+ document.getElementById('app').removeChild(document.getElementById('streamClient'));
}
- var streamSource = document.createElement('video');
- streamSource.id = 'streamSource';
- streamSource.src = fileURL;
- streamSource.controls = true;
- streamSource.addEventListener('play', function(){
- client.send(file, {name: file.name, size: file.size});
+ // Create media source
+ var mediaSource = new MediaSource();
+ var streamClient = document.createElement('video');
+ streamClient.id = 'streamClient';
+ streamClient.src = URL.createObjectURL(mediaSource);
+ streamClient.controls = true;
+ streamClient.autoplay = true;
+ document.getElementById('app').appendChild(streamClient);
+ // Wait for media source to be loaded before appending buffer
+ mediaSource.addEventListener('webkitsourceopen', function(e) {
+ // Append buffer
+ mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
+
+ // Wait for streamed data from server
+ stream.on('data', function (data){
+ console.log("data coming")
+ //console.log(mediaSource)
+ // Append data to client buffer
+ mediaSource.sourceBuffers[0].append(new Uint8Array(data));
+ });
+ stream.on('end', function (){
+ console.log("stream 100% received on client")
+ stream.destroy();
+ });
}, false);
- document.getElementById('app').appendChild(streamSource);
- });
-
- // Wait for client to connect to server
- client.on('open', function (stream){
- // Stream received from server
- client.on('stream', function (stream){
- console.log("new stream from server")
- // Remove old stream video tag
- if(document.getElementById('streamClient')){
- document.getElementById('app').removeChild(document.getElementById('streamClient'));
- }
- // Create media source
- var mediaSource = new MediaSource();
- var streamClient = document.createElement('video');
- streamClient.id = 'streamClient';
- streamClient.src = URL.createObjectURL(mediaSource);
- streamClient.controls = true;
- streamClient.autoplay = true;
- document.getElementById('app').appendChild(streamClient);
- // Wait for media source to be loaded before appending buffer
- mediaSource.addEventListener('webkitsourceopen', function(e) {
- // Append buffer
- mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
- // Wait for streamed data from server
- stream.on('data', function (data){
- console.log("data coming")
- //console.log(mediaSource)
- // Append data to client buffer
- mediaSource.sourceBuffers[0].append(new Uint8Array(data));
- });
- stream.on('end', function (){
- console.log("stream 100% received on client")
- stream.destroy();
- });
- }, false);
- });
- });
- client.on('close', function (){
- console.log('client closed')
});
-
+ });
+ client.on('close', function (){
+ console.log('client closed')
+ });
//})();
View
2 views/index.ejs
@@ -32,8 +32,6 @@
<div class="row">
<div class="span5 center">
<section id="app">
- <p>Experiment for video streaming in node.js with binaryjs package</p>
- <p>To use it, open 2 chrome browser on this page and choose a video webm file on one. Once you click play the video will be streamed to the other browser.</p>
<input id="videoSource" type="file" accept="video/*"/>
</section>
</div>

0 comments on commit 75cedd9

Please sign in to comment.