QuickBlox Documentation

QuickBlox provides powerful Chat API and SDK to add real-time messaging and video calls to your web and mobile apps. Learn how to integrate QuickBlox across multiple platforms.

Advanced

Learn how to mute audio, disable video, switch camera, share your screen, configure media settings, etc.

Mute audio

Mute the audio by calling the mute() method. Using this method, we can tell SDK to send/not send audio data either from a local or remote peer. Unmute the audio by calling the unmute() method.

session.mute('audio');
session.unmute('audio');

Disable video

Disable the video by calling the mute() method. Using this method, we can tell SDK to send/not send video data either from a local or remote peer. Enable the video by calling the unmute() method.

session.mute('video');
session.unmute('video');

Switch camera

You can switch the video camera during a call by calling the getMediaDevices() method.

QB.webrtc.getMediaDevices("videoinput").then(function(devices) {
  if (devices.length) {
    // here is a list of all available cameras
    for (var i = 0; i < devices.length; i++) {
      var deviceInfo = devices[i];
      var deviceId = deviceInfo.deviceId;
      var deviceLabel = deviceInfo.label;
    }
  }
});

Then you can choose some deviceId and switch the video stream to the exact device.

var constraints = {
  audio: audioDeviceId || undefined,
  video: { exact: deviceId }
};
session.switchMediaTracks(constraints, function(error, stream) {

});

Screen sharing

Use the screen sharing functionality to allow your users to share their screen. To enable screen sharing, you need to have an active call session that becomes active after the call() method is called, and the onCallListener() callback is received by the remote user. Learn more details from the Initate call section.

As soon as you have a running call session use methods below:

  • Use the runScreenSharing() to enable the screen sharing. As a result, the camera video track in the local stream will be switched to the screen-sharing video track.

  • Use the stopScreenSharing() to interrupt the screen sharing. As a result, the screen-sharing video track will be switched to the camera video track in the local stream.

QB.webrtc.onCallListener = function onCallListener(session, extension) {
  /**
    @type {qbWebRTCSession}
  */
  app.currentSession = session;
};

var runScreenSharing = function () {
    navigator.mediaDevices
      .getDisplayMedia({
        video: true,
      })
      .then((stream) => {
        var videoTrack = stream.getVideoTracks()[0];
        videoTrack.onended = stopScreenSharing;
        switchMediaTrack(videoTrack);
      });
  },
  stopScreenSharing = function () {
    navigator.mediaDevices
      .getUserMedia({
        video: true,
      })
      .then((stream) => {
        switchMediaTrack(stream.getVideoTracks()[0]);
      });
  },
  switchMediaTrack = function (track) {
    app.currentSession.localStream.getVideoTracks()[0].stop();
    var stream = app.currentSession.localStream.clone();
    stream.removeTrack(stream.getVideoTracks()[0]);
    stream.addTrack(track);
    app.currentSession.localStream.getAudioTracks()[0].stop();
    app.currentSession._replaceTracks(stream);
    app.currentSession.localStream = stream;
    return true;
  };

runScreenSharing();
stopScreenSharing();

Mirror local video

A mirror functionality allows to flip the video horizontally. Enable the mirroring when getting access to the local media steam using the getUserMedia() method. Set the mirror as to true to enable mirroring.

var mediaParams = {
  audio: true,
  video: true,
  options: {
    muted: true,
    mirror: true,
  },
  elemId: "localVideo",
};

session.getUserMedia(mediaParams, function (error, stream) {
  if (error) {
  } else {
  }
});

WebRTC stats reporting

You are able to receive the information report about the current connection, audio, video tracks, and other useful information. To set a receiving time interval, use the code snippet below. Review our Setup guide to learn more about CONFIG configuration.

var CONFIG = {
  webrtc: {
    //...
    statsReportTimeInterval: true,
  },
  //...
};

Then you should use the onCallStatsReport callback to listen to the stats report.

QB.webrtc.onCallStatsReport = function onCallStatsReport(session, userId, stats, error) {

General settings

You can change different settings for your calls using CONFIG object. Review our Setup guide to learn more about CONFIG configuration.

Custom ICE servers

You can customize a list of ICE servers. By default, WebRTC module will use internal ICE servers that are usually enough, but you can always set your own. WebRTC engine will choose the TURN relay with the lowest round-trip time. Thus, setting multiple TURN servers allows your application to scale-up in terms of bandwidth and number of users. Review our Setup guide.

Video calling settings

Set video calling settings using the webrtc fields.

var CONFIG = {
  webrtc: {
    answerTimeInterval: 60,
    autoReject: true,
    incomingLimit: 1,
    dialingTimeInterval: 5,
    disconnectTimeInterval: 30,
    statsReportTimeInterval: false,
    //...
 }
};

Parameters

Description

answerTimeInterval

Maximum answer time
for the QB.webrtc.onUserNotAnswerListener callback to be fired. The answer time interval shows how much time an opponent has to answer your call.

autoReject

If there is at least one active (recurring) call session and the autoReject is true, the call gets rejected.

incomingLimit

If the number of active (recurring) call sessions
is more than it is defined by incomingLimit, the call gets rejected.

dialingTimeInterval

The interval between call requests produced by the session.call() method. Dialing time interval indicates how often to notify your opponents about your call.

disconnectTimeInterval

If an opponent has lost the connection then, after this time, the caller will know about it via the QB.webrtc.onSessionConnectionStateChangedListener callback.

statsReportTimeInterval

Allows access to the statistical information about peer connection state (connected, failed, disconnected, etc). Set the number of seconds for the statistical information to be received.

Media settings

Learn how to configure media settings following the sections below.

Bitrate

A bitrate is a video stream encoding parameter. Set the bitrate and pass it within the createNewSession() method. Default: 0.

QB.webrtc.createNewSession(Object.keys(app.callees), isAudio ? QB.webrtc.CallType.AUDIO : QB.webrtc.CallType.VIDEO, null, {'bandwidth': bandwidth});

📘

If the parameter is set to more than 0, the quality of the video is degraded.

Camera resolution

A camera resolution is a video stream encoding parameter. It's possible to set custom video resolution using getUserMedia constraints. See getUserMedia for more examples.

var params = {
  audio: true,
  video: { min: 320, ideal: 720, max: 1920 }
};

var callback = function(error, stream) { /* ... */ };

session.getUserMedia(params, callback);

Updated 17 days ago


What's Next

Video Conference

Advanced


Learn how to mute audio, disable video, switch camera, share your screen, configure media settings, etc.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.