Advanced

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,
    //...
 }
};

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