JSFiddle - React, Tailwind, and code Playground

by Hector de la Rosa

HTML

<script src="https://rtcmulticonnection.herokuapp.com:443/dist/RTCMultiConnection.min.js"></script>
<script src="https://rtcmulticonnection.herokuapp.com:443/socket.io/socket.io.js"></script>

<script src="https://cdn.webrtc-experiment.com:443/FileBufferReader.js"></script>
        <!-- custom layout for HTML5 audio/video elements -->
<script src="https://cdn.webrtc-experiment.com/getMediaElement.js"></script>

<input id="Sala" placeholder="Ingresar una Sala" value="">
<button id="btn-open-or-join-room">Abrir/Compartir Sala</button>
<button id="disconnect-room">Desconectarse de Sala</button>
<hr>
<div id="local-videos-container"></div>
<hr>
<div id="remote-videos-container"></div>

CSS

video{
  width:35%;
  border-radius:3%;
}

button,input, select {
  font-weight: normal;
  padding: 2px 4px;
  text-decoration: none;
  display: inline-block;
  text-shadow: none;
  font-size: 16px;
  outline: none;
}

JavaScript

var connection = new RTCMultiConnection();

// Es la señal libre del servidor seguro. This line is muy importante
connection.socketURL = '/';
connection.socketURL = 'https://rtcmulticonnection.herokuapp.com:443/';

// all below lines are optional; however recommended.

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

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

var localVideosContainer = document.getElementById('local-videos-container');
var remoteVideosContainer = document.getElementById('remote-videos-container');

connection.onstream = function(event) {
   var video = event.mediaElement;
     if(event.type === 'local') {
       localVideosContainer.appendChild(video); 
     }
     
     if(event.type === 'remote') {
       remoteVideosContainer.appendChild(video); 
     }
     
};

var roomid = document.getElementById('Sala');
roomid.value = connection.token();


document.getElementById('btn-open-or-join-room').onclick = function() {
  this.disable = true;
  connection.openOrJoin(roomid.value || '');
};

document.getElementById('disconnect-room').onclick = function() {
  connection.close(); 
};