Building the Open-Source Conferencing App for Javascript

{% include_relative nav.html selected="javascript" %}

{% capture prerequisites%}

{% endcapture %}

{% capture build_instructions%}

Hosting the App

Running the web app is as simple as:
  1. Open the folder web/live-demo
  2. Serve this folder securely(*requires HTTPS)
  3. Open index.html in your web browser
  4. That’s it! You should now see the login page {% endcapture %}

{% capture login %} Invoke the login REST API as follows. Refer to the source code in login.jsopen_in_new.

...
 sendRequest(MESIBO_API_BACKEND, loginCallback, 'op=login&appid=' + appid + '&email=' + email + '&name=' + name + '&code=' + code);
...

If login is successful, your server will generate an access token using mesibo User Management API and send it to you in the response. You need to use this access token later while initializing the mesibo real-time API. Refer to the example source code in login.jsopen_in_new to learn more.

function loginCallback(r) {
  ...
  var resp = JSON.parse(r);
  var token = resp['token'];
  if (resp.result == 'OK') {
    ...
    if (isValidString(token)) {
      
       ...
       // Store token
      _storeLoginCredentials(resp);
    }
    ...
}

{% endcapture %}

{% capture create_room %} Refer to the source code hereopen_in_new

var request = 'token=' + room.token + '&op=setgroup&name=' + room.name + '&resolution=' + room.quality + '&captcha=' + token;

sendRequest(MESIBO_API_BACKEND, createRoomCallback, request);

{% endcapture %}

{% capture create_room_pin %} If a room is created successfully using setgroup, you will receive the room pin and spin in the response. See login.jsopen_in_new


function createRoomCallback(r) {
  var resp = JSON.parse(r);

  if ('OK' == resp.result) {
    var rv = _storeRoomCredentials(resp);
    ...
  }
  ...
}

Refer to the function _storeRoomCredentialsopen_in_new.

Share the room-id and room-pin(either pin for active participants or spin for subscriber-only participants) with other users who you want to join the conference. Refer to the source code hereopen_in_new to see how the invite text is generated in the app. {% endcapture %}

{% capture join_room %} Refer to login.jsopen_in_new

var request = 'token=' + room.token + '&op=joingroup&gid=' + room.gid + '&pin=' + room.pin + '&captcha=' + token;
sendRequest(MESIBO_API_BACKEND, enterRoomCallback, request);

If joingroup is successful, you can enter the room and start the group call. See login.jsopen_in_new.

function openRoom(groupid) {
  if (!isValid(groupid) || groupid <= 0)
    return -1;

  var room_page = isMobileDetected() ? 'mobile.html' : 'index.html';
  window.open(room_page + '?room=' + groupid, '_self');
}

{% endcapture %}

{% capture launch_group_call %} Refer to controller.jsopen_in_new

{% endcapture %}

{% capture start_group_call %}

$scope.live = $scope.mesibo.groupCall($scope, $scope.room.gid);
$scope.live.join($scope);


if (!isValid($scope.room.publish) || $scope.room.publish != 1) {
  toastr.error('You do not have the permission to publish');
}
else {
  if($scope.room){
    var init_audio = $scope.room.init.audio;
    var init_video = $scope.room.init.video;
  }
  $scope.publisher = $scope.live.createPublisher(0);
  $scope.publisher.setVideoSource(MESIBOCALL_VIDEOSOURCE_CAMERADEFAULT); 

  $scope.publisher.call();
}

{% endcapture %}

{% capture viewing_others %} In this app, we have implemented GroupCallListener in controller.jsopen_in_new.

When someone joins the room and starts publishing, you will receive their Participant object through MesiboGroupCall_OnPublisheropen_in_new.

$scope.MesiboGroupcall_OnPublisher = function(p, joined) {

  ...
  $scope.subscribe(p, true, true);
  ...
};

{% endcapture %}

{% capture listeners %}

{% endcapture %}

{% capture display_streams %} When you receive the video stream from a participant MesiboGroupcall_OnVideoopen_in_new will be called. You can then use, setVideoViewopen_in_new to display them. {% endcapture %}

{% capture conf_ops %} {% endcapture %}

{% capture mute %} MesiboGroupcall_OnMuteopen_in_new is called when the publisher mutes audio or video.

$scope.MesiboGroupcall_OnMute = function(p, audioMuted, videoMuted, remote) {
  if(remote){
    // Remote participant has muted
  }

  // Check mute status
  if(audioMuted){
    // Audio Muted
  }

  if(videoMuted){
    // Video Muted
  }

};

You can toggle the audio using toggleAudioMuteopen_in_new and toggle the video using toggleVideoMuteopen_in_new.

{% endcapture %}

{% capture talk_detection %} MesiboGroupcall_OnTalkingopen_in_new is called when the participant starts or stops talking.

GroupCallInProgressListener.prototype.MesiboGroupcall_OnTalking = function(participant, talking) {
    if(talking){
      // If talking is true, participant started talking
      // if it is false, participant stopped talking
      // Handle talking. For example, Show a talking icon 
    }
}

{% endcapture %}

{% capture screen_sharing %} Refer to the source code in controller.jsopen_in_new for an example where we change the video source.

$scope.getLocalScreen = function(screen_id){
  if(!isValid(screen_id) || screen_id <= 0)
    return null

  var screen = null;

  for (var i = $scope.local_screens.length - 1; i >= 0; i--) {
    screen = $scope.local_screens[i];
    if(screen.getType() === screen_id)
      return screen;
  }

  //No existing screen with that id, create & return a new one
  screen = $scope.live.createPublisher(screen_id);
  screen.setVideoSource(MESIBOCALL_VIDEOSOURCE_SCREEN);
  if(!screen)
    return null;

  $scope.local_screens.push(screen);

  return screen;
}

{% endcapture %}

{% capture play_sound %}

For example, in this app, we are playing a sound whenever a new participant joins the room. (When MesiboGroupcall_OnPublisher is calledopen_in_new).

{% endcapture %}

{% capture chat %} Refer to showPopupChatopen_in_new

In this app, we have made use of the web popup chat appopen_in_new to display chat popups for group and one-to-one chat.

{% endcapture %}

{% capture hang_up%} Whenever a publisher hangs up, MesiboGroupcall_OnHangupopen_in_new will be called.

To, stop viewing a participant you need to call hangup on their participant objectopen_in_new.

participant.hangup();

{% endcapture %}

{% capture leave_room%}

$scope.live.leave();

In this app, we call leave when the exit button is pressed. {% endcapture %}

{% capture conclusion %} In the next part, we will get into setting up your server that contains the REST APIs you are using in this app.

On to Part 5 >> {% endcapture %}

{% include_relative conf-app.md %}