Add Callback Event Listener with MirrorFly Angular SDK

Add Callback Event Listeners#

Add all following callback methods while initializing the SDK. Callback listeners are functions that will be called whenever the specified event happens.

Note: Callback Listener name should be the same as described below.

Status Listener#

Handles Meet Status, triggered whenever status changes.

function callStatusListener(response) {}

Sample Response:#

// Response Structure
{
    localUser: 'BOOLEAN',
    sessionStatus: null|'closed',
    status: "connecting|connected|ended|reconnecting|disconnected|hold",
    userJid: "FROM_USER_JID",
    usersStatus: "USERS_ARRAY_OF_OBJECT"
}

Response Property Details:#

Property	Description
status	user status
userJid	From user JID
localUser	User JID is current logged in user or another user.
sessionStatus	Describe status of the meet.
usersStatus	Array of users with the details.

Possible Status:#

Status	Description
`connected`	Connection is established between the users
`reconnecting`	There is a problem in connection between users
`disconnected`	User disconnect from the meet
`ended`	When another user ended the meet
`hold`	When user hold the meet

User Track Listener#

In this listener, Receive the local & remote users audio & video tracks. We have localUser property to differentiate the remote & local users.

function userTrackListener(response) {}

Sample Response:#

// Response Structure
{
    localUser: 'BOOLEAN',
    track: 'TRACK_OBJECT',
    trackType: "audio|video",
    userJid: "FROM_USER_JID",
    usersStatus: "USERS_ARRAY_OF_OBJECT"
}

Response Property Details:#

Property	Description
localUser	Identify whether the track is belongs to local or remote user true - Local user false - Remote user.
track	Track object
trackType	Contain audio or video to identify type of track.
userJid	From user JID
usersStatus	Array of users with details.

Sample Javascript code to play the track#

<html>
  <audio id="audio" autoplay playsinline></audio>
  <video id="video" autoplay playsinline></video>
  <script>
    //let track = TRACK_OBJECT from the callback method
    //let element = ELEMENT_OBJECT in which you need to play the audio/video
    let stream = new MediaStream([track]);
    try {
        element.srcObject = stream;
    } catch (e) {
        try {
          element.src = URL.createObjectURL(stream);
        } catch (e) {
          console.error("Error attaching stream to element", e);
      }
  }
  </script>
</html>

You need to supply the track object which was received in the callback method to the audio/video element based on the track type that you have received.

note

You need to have multiple Audio and Video tag element to play all user's audio and video.

warning

You shouldn't play your own Audio track.

Mute Status Listener#

Whenever a user mute/unmute the video/audio, this event listener will be called with mute/unmute status details.

function muteStatusListener(response) {}

Sample Response:#

// Response Structure
{
    isMuted: 'BOOLEAN',
    trackType: "audio|video",
    userJid: "FROM_USER_JID"
}

Response Property Details:#

Property	Description
isMuted	Indetify whether the track is muter/unmuted. true - Muted false - Unmuted.
trackType	Contain audio or video to identify type of track is muted/unmuted.
userJid	From user JID.

Media Error Listener#

When user deny the audio/video browser permission or audio/video devices are not able to read by browser, at the time this event will be called with error details.

function mediaErrorListener(response) {}

Sample Response:#

// Response Structure
{
    action: "subscribeCall",
    device: "camera",
    error: "NotAllowedError",
    statusCode: "STATUS_CODE"
    message: "Permission denied",
    userJid: "FROM_USER_JID"
}

Response Property Details:#

Property	Description
action	In which action error occurred.
device	Name of the device which has error (mic, camera, mic & camera)
error	Describe the error type
statusCode	Status Code
message	Error meesage

Possible Error:#

Error	Description
`NotAllowedError`	Permission denied.
`NotFoundError`	Requested device not found or readable.

Speaking Listener#

Handles the audio level, triggered whenever there is a change in the audio level of the current user or any other users on the meet.

function callSpeakingListener(response) {}

Sample Speaking Response:#

// Response Structure
{
    isSpeaking: "true|false"
    localUser: "true|false"
    userJid: "FROM_USER_JID"
    volumeLevel: 3
}

Response Property Details:#

Property	Description
userJid	Speaking user JID
isSpeaking	Whether the user is speaking or not
localUser	Speaking user JID is current logged in user or another user.
volumeLevel	Volume level is at which the user is speaking. Based on this level you can show the mic indicator for a particular user. Possible values will be between 0 to 10. When the value is 0, it’s referred to as the silent. When the value is 10, it’s referred to as the loudest.

Users Update Listener#

When there is an update in the users list of the meet, callUsersUpdateListener() will be triggered with the list of the users on the meet. You can update the UI based on this callback.

function callUsersUpdateListener(response) {}

Sample Response:#

// Response Structure
{
    userJid: "FROM_USER_JID",
    localUser: true,
    usersList: ["USER_JID", "USER_JID"]
}

Response Property Details:#

Property	Description
userJid	User JID of current user
localUser	User JID is current logged in user or another user
usersList	List of users on the meet

User Joined Listener#

Call user joined listener callUserJoinedListener() will be triggered when a new user joined into the meet. You can use this method to show user joined toast in the UI.

function callUserJoinedListener(response) {}

Sample Response:#

// Response Structure
{
    userJid: "USER_JID",
    localUser: false
}

Response Property Details:#

Property	Description
userJid	User JID of the user who joined the meet
localUser	User JID is current logged in user or another user.

User Left Listener#

User left listener callUserLeftListener() will be triggered when a user left the meet. You can use this method to show user left toast in the UI.

function callUserLeftListener(response) {}

Sample Response:#

// Response Structure
{
    userJid: "USER_JID",
    localUser: false
}

Response Property Details:#

Property	Description
userJid	User JID of the user who left the meet
localUser	User JID is current logged in user or another user.