Very Simple WebRTC Conference

Mnimalistic conference built on top of Bistri WebRTC API

by bistri

HTML

<script src="https://cdn.jsdelivr.net/gh/bistri/bistri-conference-js/dist/bistri.conference-3.5.1.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

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( { audio: true, video: true }, 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 } );
  }
});

// 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 );
});

// when a stream has been stopped
bc.streams.bind( "onStreamClosed", function ( stream ) {
  // remove the stream from the page
  bc.detachStream( stream );
} );

// open a new session on the server
bc.connect();