JSFiddle - React, Tailwind, and code Playground

HTML

<!-- RTCMultiConnection current latest version -->
<script src="https://cdn.webrtc-experiment.com/RTCMultiConnection-v2.2.1.js"></script>

<!-- Currently Firebase.js is auto-loaded when data:true -->
<script src="https://cdn.webrtc-experiment.com/FileBufferReader.js"></script>

<!-- Firebase is used as default signaling medium -->
<script src="https://cdn.webrtc-experiment.com/firebase.js"></script>

<!-- button used to open a session -->
<button id="setup-new-session">setup new session</button> -- click this button to start a session.

<br><br><hr>
<h2>To Add/Remove Streams</h2>
<!-- buttons used to add/remove streams -->
<button id="add-stream" disabled>add stream</button>
<button id="remove-stream" disabled>remove stream</button>

CSS

video {
    width: 30%;
}

JavaScript

var connection = new RTCMultiConnection();

connection.getExternalIceServers = false; // don't get ice servers from xirsys
connection.iceServers.length = 1; // use first STUN server; skip others

// data is NEVER been "oneway"
// don't need to set anything "false" because it is a
// redundant action
// because NULL is considered as false
connection.session = {
    data: true
};

connection.onopen = function(event) {
    console.error('onopen', event, event.channel);
    connection.send('cool from : ' + connection.userid);
};

connection.onmessage = function(event) {
    console.error('onmessage', event.data);
};

// renegotiation requires this
// it is a known behaviour in chrome
// not sure, if it is a bug in chromium!
connection.sdpConstraints.mandatory = {
    OfferToReceiveAudio: true,
    OfferToReceiveVideo: true
};

// "onMediaCaptured" is fired when:
// 1) a session is successfully opened
// 2) or, a media stream is captured
connection.onMediaCaptured = function() {
    document.getElementById('add-stream').disabled = false;
};

document.getElementById('setup-new-session').onclick = function() {
    this.disabled = true;

    // start a session and keep transmitting session info
    connection.open();
};

// start signaling channel
// and if a session is available, quickly join it.
connection.connect();

// object passed over "addStraem" and "removeStream" methods
var renegotiate = {
    video: true,
    audio: true,
    stop: true // ---- this one is used only for "removeStream" method
};

document.getElementById('add-stream').onclick = function() {
    document.getElementById('remove-stream').disabled = false;
    this.disabled = true;
    
    connection.addStream(renegotiate);
};

document.getElementById('remove-stream').onclick = function() {
    document.getElementById('add-stream').disabled = false;
    this.disabled = true;
    
    connection.removeStream(renegotiate);
};

connection.onstreamended = function(event) {
    if (event.mediaElement &&...