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() {

  var room = "myMeetingRoom";

  // 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 
    if (!window.localStreamReady) {
      alert("local media is not ready");
      return;
    }

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

  /*
   * 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(room);

    // then we quit the conference room
    BistriConference.quitRoom(room);
  };

  /*
   * 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", function(localStream) {

      window.localStreamReady = true;

      var node = document.querySelector('.video-container');

      // we...