Simple WebRTC Video Conference

Build on top of Bistri WebRTC API. https://api.developers.bistri.com/tutorial

HTML

<script src="https://api.bistri.com/bistri.conference.min.js"></script>
<div>
    <input type="button" value="Join Conference" onclick="joinRoom();" class="join" \>
    <input type="button" value="Quit Conference" onclick="quitRoom();" class="quit" \>
</div>
<div class="video-container"></div>

CSS

.join {
	display: inline;
}

.quit {
	display: none;
}

video {
	float left;
	margin: 10px;
	width: 300px;
}

JavaScript

/*
 * Need some explanations about this code ? Take a look at our API tutorial:
 * https://api.developers.bistri.com/tutorial
 */

onBistriConferenceReady = function(){

	// at first we test if the browser is WebRTC enable
    if( !BistriConference.isCompatible() ){
		alert( "your browser is not WebRTC compatible !" );
		return;
	}

	window.localStreamReady = false;

	/*
     * this is the function called when the button "Join Conference" is pressed
     */
    window.joinRoom = function(){
        
        // if the local stream (webcam) is ready 

        
        // then when are ready to join the conference room called "myMeetingRoom"
		BistriConference.joinRoom( "milostestbre" );
	};

    /*
     * this is the function called when the button "Quit Conference" is pressed
     */
	window.quitRoom = function(){
        
        // We stop calls with all conference room members
		BistriConference.endCalls();
        
        // then we quit the conference room
		BistriConference.quitRoom();
	};

	/*
     * API is initialized with personal keys
     * To get your own keys, go to https://api.developers.bistri.com/login
     * debug is set to true to print some logs in the javascript console
     */
    BistriConference.init( {
		// don't forget to replace the following keys by your own
		appId: "38077edb",
		appKey: "4f304359baa6d0fd1f9106aaeb116f33",
		debug: true
	} );

    /*
     * we add a handler to manage "onConnected" event triggered by the signaling server
     * this event occurs when user is connected to the signaling server
     */
	BistriConference.signaling.addHandler( "onConnected", function(){
        
        // we are now connected to the signaling server, 
        // we can request access to the user webcam
		BistriConference.startStream( "webcamSD" );
	} );

    /*
     * we add a handler to manage "onJoinedRoom" event triggered by the signaling server
     * this event occurs when user join the conference room
    ...