Very Simple WebRTC Conference

Mnimalistic conference built on top of Bistri WebRTC API

HTML

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

CSS

video {
    width: 320px;
}

JavaScript

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

var roomMembers;

// when Bistri API client is ready, function
// "onBistriConferenceReady" is invoked
onBistriConferenceReady = function () {
    
    var localStream;
    
    // 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: "38077edb",
        appKey: "4f304359baa6d0fd1f9106aaeb116f33",
        debug: true
    } );

    /* Set events handler */

    // when local user is connected to the server
    bc.signaling.bind( "onConnected", function () {
        // ask the user to access to his webcam and set the resolution to 320x240
        bc.startStream( "320x240", function( stream ){
            // set "localStream" variable with the local stream
            localStream = stream;
             // insert the local webcam stream into the page body, mirror option invert the display
            bc.attachStream( stream, document.body, { mirror: true } );
            // join a conference room called "conference_demo" and limit conference to 4 participants
            bc.joinRoom( "conference_demo", 4 );
        });
    });

    // when the user has joined a room
    bc.signaling.bind( "onJoinedRoom", function ( result ) {
        // set room members array in a var "roomMembers"
        roomMembers = result.members;
         // then, for every single members already present in the room ...
        for ( var i=0, max=roomMembers.length; i<max; i++ ) {
            // ... request a call
            bc.call( roomMembers[i].id, "conference_demo", { stream: localStream, 'video-codec': 'H264/9000' } );
        }
    });

    // when a new remote stream is received
    bc.streams.bind( "onStreamAdded", function ( remoteStream ) {
        // insert the new remote stream into the page body
        bc.attachStream( remoteStream, document.body );
    });
   ...