JSFiddle - React, Tailwind, and code Playground

by bistri

HTML

<script src="https://api.bistri.com/bistri.conference.min.js"></script>
<div id="remote">
	<div id="local"></div>
</div>

CSS

video {
	width: 100%;
	height: auto;
}

#remote {
	position: relative;
	width: 320px;
	height: 240px;
	border: 1px solid #c0c0c0;
}

#local {
	position: absolute;
	right: 5px;
	bottom: 5px;
	width: 80px;
	height: 60px;
	border: 1px solid #c0c0c0;
}

JavaScript

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



// when Bistri API client is ready, function
// "onBistriConferenceReady" is invoked
onBistriConferenceReady = function () {

	"use strict";

    // initialize API client with application keys
    // if you don't have your own, you can get them at:
    // https://api.developers.bistri.com/login
    bc.init ( {
        appId: "14d1cc96",
        appKey: "6821d876ba9ec4713c99116a7e2d680d",
        debug: true
    } );

    /* Set events handler */

    // when local user is connected to the server
    bc.signaling.bind ( "onConnected", () => {
	
        // join a conference room called "conference_demo"
    	bc.joinRoom ( "conference_demo" );
    } );

    // when the user has joined a room
    bc.signaling.bind ( "onJoinedRoom", result => {
	
        // request access to user webcam
    	bc.startStream ( { audio: true, video: true }, stream => {
		
        	// insert the local stream into the page
            bc.attachStream ( stream, document.querySelector ( '#local' ), { mirror: true } );

			 // then, for every members present in the room
			result.members.forEach ( member => {
				// request a call
				bc.call ( member.id, result.room, { stream: stream } );
			} );
		} );
    } );

    // when a remote stream is received
    bc.streams.bind ( "onStreamAdded", remoteStream => {
        // insert the remote stream into the page
        bc.attachStream ( remoteStream, document.querySelector ( '#remote' ) );
    } );
    
    // when a stream has been stopped
    bc.streams.bind ( "onStreamClosed", stream => {
        // remove the stream from the page
        bc.detachStream ( stream );
    } );
	
    bc.streams.bind ( 'onStreamError', error => {
	
        switch ( error.name ) {
	
            case 'NotFoundError':
                //required track is missing
                alert ( 'microphone and/or camera have not been found' );
                break;
           ...