JSFiddle - React, Tailwind, and code Playground

by bistri

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="https://api.bistri.com/bistri.conference-3.2.1.js"></script>
    <div class="pane" id="pane_0" style="display: none">
        Connection in progress ...
    </div>

    <div class="pane" id="pane_1">
        <input type="text" placeholder="Nickname" id="nick_field" class="form-control">
        <br>
        <input type="button" value="Set Nickname" id="nick" class="btn btn-info btn-default btn-block">
    </div>
   
    <div class="pane" id="pane_2" style="display: none">
        <div id="remote-video">
            <div id="local-video"></div>
        </div>
        <div id="messages_container"></div>
        <p>
            <input type="text" placeholder="Message" id="message_field" class="form-control">
        </p>
        <input type="button" value="Send Message" id="send" class="btn btn-success btn-default btn-block">
        <input type="button" value="Start Video" id="video" class="btn btn-warning btn-default btn-block">
        <input type="button" value="Quit" id="quit" class="btn btn-danger btn-default btn-block">
    </div>

CSS

.pane {
    margin: 20px;
    text-align: center;
}

.message {
    text-align: left;
}

#messages_container {
    height: 200px;
    overflow-y: auto;
    border: 1px solid #dedede;
    padding: 10px;
    margin-bottom: 2px;
}

video {
    width: 100%;
}

#remote-video {
    position: relative;
    margin: 0 auto;
    width: 320px;
    height: 240px;
    background-color: #c0c0c0;
}

#local-video {
    position: absolute;
    margin: 0 10px 10px 0;
    right: 0;
    bottom: 0;
    width: 30%;
}

JavaScript

/*
    JS library reference:
    http://developers.bistri.com/webrtc-sdk/js-library-reference
*/

var room;
var localStream;
var timeout;
var users = {};
var dataChannels = {};
var support_users = [ "support_1", "support_2" ]; // available support users id

onBistriConferenceReady = function () {

    if ( !bc.isCompatible() ) {
        alert( "your browser is not WebRTC compatible !" );
        return;
    }
   
    bc.signaling.bind( "onError", function () {
        alert( error.text + " (" + error.code + ")" );
    } );

    bc.signaling.bind( "onConnected", function () {      
        bc.joinRoom( getRandomString( 20 ), 2 );
    } );
     
    bc.signaling.bind( "onJoinedRoom", function ( data ) {     
        function doCall(){   
            showPanel( "pane_0" );
            support_users.forEach( function( user ){
                bc.openDataChannel( user, "chat", room );
            } );
            // Note: if support doesn't answer, the call is stopped after 60s
            timeout = setTimeout( function(){
                bc.quitRoom( room );
            }, 60 * 1000 );
        }
        if( data.room.indexOf( "__video_" ) != -1 ){
            doCall();
        }
        else{
            room = data.room;    
            bc.signaling.joinRoom( "__video_" + data.room, data.capacity );
        }
    } );

    bc.signaling.bind( "onJoinRoomError", function ( error ) {
        alert( error.text + " (" + error.code + ")" );
    } );
       
    bc.signaling.bind( "onQuittedRoom", function( data ) {
        if( data.room.indexOf( "__video_" ) != -1 ){
            room = undefined;
            q( "#messages_container" ).innerHTML = "";
            showPanel( "pane_1" );
            if( localStream ){
                bc.detachStream( localStream );
                bc.stopStream( localStream, function(){
                    localStream = undefined;
                     q( "#video" ).value = "Start Video";
                } );
            }
           ...