title: Webrtc for one to many/broadcast using node.js
body: <p>I got this code from the following website  <a href="http://asher2003.wordpress.com/2013/11/18/webrtc-code-example/" rel="nofollow noreferrer">http://asher2003.wordpress.com/2013/11/18/webrtc-code-example/</a></p>
  
  <p>the html file</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
  &lt;meta name='keywords' content='WebRTC, HTML5, JavaScript' /&gt;
  &lt;meta name='description' content='WebRTC Reference App' /&gt;
  &lt;meta name='viewport' content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1'&gt;
  
  &lt;base target='_blank'&gt;
  
  &lt;title&gt;WebRTC client&lt;/title&gt;
  
  &lt;!-- &lt;link rel='stylesheet' href='css/main.css' /&gt; --&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id='container'&gt;
  
    &lt;div id='videos'&gt;
      &lt;video id='localVideo' autoplay muted&gt;&lt;/video&gt;
      &lt;video id='remoteVideo' autoplay&gt;&lt;/video&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;script src='/socket.io/socket.io.js'&gt;&lt;/script&gt;
  &lt;script src='js/main.js'&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The server.js file</p>
  
  <pre><code>var static = require('node-static');
  var http = require('http');
  var file = new(static.Server)();
  var app = http.createServer(function (req, res) {
    file.serve(req, res);
  }).listen(2013);
  
  var io = require('socket.io').listen(app);
  io.sockets.on('connection', function (socket){
  
      function log(){
          var array = ["&gt;&gt;&gt; Message from server: "];
        for (var i = 0; i &lt; arguments.length; i++) {
          array.push(arguments[i]);
        }
          socket.emit('log', array);
      }
  
      socket.on('message', function (message) {
          log('Got message: ', message);
      // For a real app, should be room only (not broadcast)
          socket.broadcast.emit('message', message);
      });
  
      socket.on('create or join', function (room) {
          var numClients = io.sockets.clients(room).length;
  
          log('Room ' + room + ' has ' + numClients + ' client(s)');
          log('Request to create or join room', room);
  
          if (numClients == 0){
              socket.join(room);
              socket.emit('created', room);
          } else if (numClients == 1) {
              io.sockets.in(room).emit('join', room);
              socket.join(room);
              socket.emit('joined', room);
          } else { // max two clients
              socket.emit('full', room);
          }
          socket.emit('emit(): client ' + socket.id + ' joined room ' + room);
          socket.broadcast.emit('broadcast(): client ' + socket.id + ' joined room ' + room);
  
      });
  
  });
  </code></pre>
  
  <p>This works fine for one to one video conference.But how do I convert this for a broadcast/one to many?</p>
  
  <p>I tried changing the above line </p>
  
  <pre><code>} else if (numClients == 1) {
                  io.sockets.in(room).emit('join', room);
                  socket.join(room);
                  socket.emit('joined', room);
  </code></pre>
  
  <p>to numClients==2 but it didnt work.Nothing appeared on the screen</p>
  
  <p><strong>UPDATE</strong>
  I have this in my main.js</p>
  
  <pre><code>function handleRemoteStreamAdded(event) {
    console.log('Remote stream added.');
    remoteVideo.src = window.URL.createObjectURL(event.stream);
    remoteStream = event.stream;
  }
  </code></pre>
  
  <p>So the above function changes to </p>
  
  <pre><code>function handleRemoteStreamAdded(event){
  remoteVideo = document.createElement('video');
  if(document.getElementById( "remoteVideos" ).childNodes.length == 0){
      remoteVideo.setAttribute('id','remoteVideo1');
  } else {
      remoteVideo.setAttribute('id','remoteVideo2');
  }
  document.getElementById( "remoteVideos" ).appendChild(remoteVideo);
  remoteVideo.src = window.URL.createObjectURL(event.stream);
  remoteVideo.play();
  
  }
  </code></pre>
  
  <p><strong>UPDATE2</strong></p>
  
  <p><img src="https://i.stack.imgur.com/zfhIe.jpg" alt="enter image description here"></p>
  
  <p>I get this error..</p>