<script>
  if(!location.hash.replace('#', '').length) {
    location.href = location.href.split('#')[0] + '#' + (Math.random() * 100).toString().replace('.', '');
    location.reload();
  }
</script>

<title>Broadcast Multiple-Cameras using RTCMultiConnection.js</title>
<h1>Broadcast Multiple-Cameras using <a href="http://www.rtcmulticonnection.org/">RTCMultiConnection.js</a>
</h1>
<style>


    button {
        font-family: Myriad, Arial, Verdana;
        font-weight: normal;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
        padding: 4px 12px;
        text-decoration: none;
        color: rgb(27, 26, 26);
        display: inline-block;
        box-shadow: rgb(255, 255, 255) 1px 1px 0px 0px inset;
        text-shadow: none;
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0.05, rgb(241, 241, 241)), to(rgb(230, 230, 230)));
        font-size: 20px;
        border: 1px solid red;
    }

    button[disabled] {
        background: rgba(216, 205, 205, 0.2);
        border: 1px solid rgb(233, 224, 224);
        outline: none;
        box-shadow: none;
    }

    blockquote {
        font-size: 20px;
        color: rgb(172, 10, 10);
        border: 1px solid rgb(172, 10, 10);
        padding: 5px 10px;
        border-radius: 5px;
        margin: 9px 10px;
    }

</style>
<hr />
<div id="buttons-container">
    <button id="broadcast-all-cameras" disabled>Broadcast All Cameras</button>
</div>
<blockquote>
    This demo is using <a href="http://www.rtcmulticonnection.org/">RTCMultiConnection.js</a>. This demo enumerates over all available video devices, and appends &lt;button&gt; for each device. You can click any button to capture relevant webcam. Then you can click "Broadcast All Cameras" button to broadcast your "multiple-cameras" over multiple users.
</blockquote>
<hr />

<div id="videos-container">
    <video muted autoplay id="one" style="display:inline-block;  background:black;" controls></video>
</div>

<script src="https://cdn.webrtc-experiment.com/RTCMultiConnection.js"></script>
<script src="https://cdn.webrtc-experiment.com/DetectRTC.js"></script>
<script src="https://cdn.webrtc-experiment.com/socket.io.js"></script>
<script src="dist/video-stream-merger.js"></script>
<script src="videoResize.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/simple-peer/7.0.0/simplepeer.min.js"></script>
<script>
  var CANVAS_MULTIPLIER = 3
  var connection = new RTCMultiConnection();

  // https://github.com/muaz-khan/WebRTC-Experiment/tree/master/socketio-over-nodejs
  var SIGNALING_SERVER = 'https://webrtcweb.com:9559/';
  connection.openSignalingChannel = function(config) {
    var channel = config.channel || connection.channel || 'default-namespace';
    var sender = Math.round(Math.random() * 9999999999) + 9999999999;

    io.connect(SIGNALING_SERVER).emit('new-channel', {
      channel: channel,
      sender: sender
    });

    var socket = io.connect(SIGNALING_SERVER + channel);
    socket.channel = channel;

    socket.on('connect', function() {
      if (config.callback) config.callback(socket);
    });

    socket.send = function(message) {
      socket.emit('message', {
        sender: sender,
        data: message
      });
    };

    socket.on('message', config.onmessage);
  };

  connection.onNewSession = function(session) {
    connection.join(session);
  };

  // connection.getExternalIceServers = false; // optional--remove it.
  // connection.iceServers.length = 1;         // optional--remove it.

  connection.dontCaptureUserMedia = true;

  // Parent <div> for videos
  connection.body = document.getElementById('videos-container');

  connection.session = {
    audio: true,
    video: true
  };

  connection.direction = 'one-way';

  connection.sdpConstraints.mandatory = {
    OfferToReceiveAudio: true,
    OfferToReceiveVideo: true
  };

  var buttonsContainer = document.getElementById('buttons-container');
  // DetectRTC.load --- to make sure all devices are captured
  // connection.enumerateDevices --- to get list of all captured devices
  var merger = new VideoStreamMerger({
    width: 640*CANVAS_MULTIPLIER,
    height: 360*CANVAS_MULTIPLIER
  })
  var players = document.querySelectorAll('video')
  var buttons = document.querySelectorAll('button')


  var peer1 = new SimplePeer({initiator: true, stream:merger.result})
  peer1.on('stream', function (stream) {
    players[0].srcObject = stream
  })


  var skipDuplicateDevies = {};
  var uniqueCamerasLength = 0;
  var numStreams = 0
  var curStream = 0
  DetectRTC.load(function() {
    // iterate over devices-array
    DetectRTC.videoInputDevices.forEach(function(device) {
      if (skipDuplicateDevies[device.id]) return;
      skipDuplicateDevies[device.id] = true;

      // skip audio devices
      if (device.kind.indexOf('audio') != -1) return;
     // if(device.label.indexOf("Logitech HD") !== -1) {
        uniqueCamerasLength++;

        var button = document.createElement('button');
        button.id = device.id;
        button.innerHTML = device.label || device.id;
        button.onclick = function () {
          this.disabled = true;

          connection._mediaSources.video = this.id;

          connection.dontCaptureUserMedia = false;
          connection.captureUserMedia(function (stream) {

            merger.addStream(stream, {
              x: 300,
              y: 0,
              width: merger.width - 100,
              height: merger.height,
              mute: numStreams > 0,
              draw: function (ctx, frame, done) {
                // merger.width = 1920
                // merger.height = 1080

                if (curStream >= numStreams) curStream = 0

                var unit = merger.width / numStreams
                ctx.drawImage(frame, unit * curStream, 0, unit, merger.height)
                // console.log(curStream)

                curStream++

                // players[0].style.width = 640+'px'
                // players[0].style.height = 360+'px'
                done()
              }
            })
            connection.attachStreams.push(stream);
            connection.dontCaptureUserMedia = true;

            merger.start()
            players[0].srcObject = merger.result

            //videoResize("#video-container","#video-container video");

            numStreams++
            //console.log(stream)

          });
        };
        buttonsContainer.appendChild(button);

    });
  });

  connection.connect();



</script>