View difference between Paste ID: h6tpN0xS and XgpJ8VfF

 <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>