This feature is available for customers on the Enterprise plan only. Take advantage of Enterprise features to unlock new value and opportunities for users. For more information and if you want to request a Demo, please contact us by mail: [email protected].
QuickBlox provides Multiparty Video Conferencing solution allowing to set up a video conference between 10-12 people. It is built on top of WebRTC SFU technologies.
Features supported:
- Video/Audio Conference with 10-12 people.
- Join/Rejoin video room functionality (like Skype).
- Mute/Unmute audio/video stream (own and opponents).
- Display bitrate.
- Switch video input device (camera).
Initialize
In order to start working with Multiparty Video Conferencing API, you need to initialize a client.
var MULTIPARTY_SERVER_ENDPOINT = "wss://...:8989";
var config = {
server: MULTIPARTY_SERVER_ENDPOINT,
iceServers: [{urls: "stun:stun.l.google.com:19302"}]
// video: {quality: 'stdres'} // Possible values: 'lowres' (320x240), 'stdres' (640x480), 'hdres' (1280x720), 'fhdres' (1920x1080). Default is 'stdres'.
};
var client = new QBVideoConferencingClient(config);
Note
Default multiparty server endpoint is not shared. To request the endpoint for you, contact us at https://quickblox.com/contact/.
Create session
Once the library has been initialized, you can start creating a session. Normally, each browser tab will need a single session with the server.
client.createSession({
success: function() {},
error: function(error) {},
destroyed: function() {},
timeoutSessionCallback: function() {}
});
Once the session is created, you can interact with a Video Conferencing API.
Attach video conferencing plugin
Video conferencing allows you to exploit the features of the plugin to manipulate the media sent and/or received by peer connection on your web page. This method will create a plugin handle internally for which you can configure callbacks. You also have to attach the plugin to each remote user.
var isRemote = "...";
var userId = "...";
client.attachVideoConferencingPlugin(isRemote, userId, {
success: function() {},
error: function(error) {},
consentDialog: function(on) {},
webrtcState: function(on) {},
mediaState: function(medium, on) {},
iceState: function(iceConnectionState) {},
slowLink: function(uplink, nacks) {},
oncleanup: function() {}
});
Note
To attach the plugin to a local user plugin, set
userIdtonullandisRemotetofalse.
Join video room
To jump into a video chat, join it using the join() method.
var chatDialogId = "...";
var currentUserId = "...";
var isAudioCallOnly = false;
client.join(chatDialogId, currentUserId, isAudioCallOnly, {
success: function() {},
error: function(error) {}
});
To check the current joined video room, use the following property.
client.currentDialogId
List online participants
To list online users in a video chat, use the listOnlineParticipants() method.
client.listOnlineParticipants(chatDialogId, {
success: function(participants) {},
error: function(error) {}
});
Callbacks
There are 4 callbacks you can listen for: participantjoined, participantleft, localstream, and remotestream . You can use the on() method to add them.
client.on("participantjoined", function(userId, userDisplayName) {});
client.on("participantleft", function(userId, userDisplayName) {});
client.on("localstream", function(stream) {
QBVideoConferencingClient.attachMediaStream($("#myvideo").get(0), stream);
});
client.on("remotestream", function(stream, userId) {
// do not add stream if it's already here
if (feedViewIsAlreadyAdded(userId)) {
return;
}
addFeedView(userId, false);
QBVideoConferencingClient.attachMediaStream(
$("#remotevideo" + userId).get(0),
stream
);
});
To remove all listeners the following code can be applied:
client.removeAllListeners("participantjoined");
client.removeAllListeners("participantleft");
client.removeAllListeners("localstream");
client.removeAllListeners("remotestream");
Mute local audio
You can mute/unmute your own audio.
var muted = client.toggleAudioMute();
console.info("Now audio is muted=" + muted);
Mute remote audio
You also can mute/unmute a remote user's audio.
var muted = client.toggleRemoteAudioMute(userId);
console.info("Now remote audio is muted=" + muted);
Disable local video
You can enable/disable your own video.
var muted = client.toggleVideoMute();
console.info("Now video is muted=" + muted);
Disable remote video
You also can enable/disable a remote user's video.
var muted = client.toggleRemoteVideoMute(userId);
console.info("Now remote video is muted=" + muted);
Display bitrate
There is a way to show the video bitrate of a remote user. The following string will be shown in element - 180 kbits/sec and will be refreshed each one second.
var userId = "...";
client.showBitrate(userId, $("#curbitrate" + userId));
var userId = "...";
client.hideBitrate(userId, $("#curbitrate" + userId));
List video input devices
To get the list of all video input devices (cameras), use the following code snippet.
QBVideoConferencingClient.listVideoinputDevices(function(videoinputDevices) {
for (var i = 0; i !== videoinputDevices.length; ++i) {
var deviceInfo = videoinputDevices[i];
//deviceInfo.label
//deviceInfo.deviceId
if(deviceInfo.deviceId == client.currentMidiaDeviceId){
//selected
}
}
});
Switch video input device
In order to switch video camera, you have to obtain a list of currently plugged video cameras with the QBVideoConferencingClient.listVideoinputDevices() method.
var deviceId = "...";
client.switchVideoinput(deviceId, {
error: function(error) {},
success: function() {}
});
Leave video room
To leave the video room, use the leave() method.
client.leave({
success: function() {},
error: function(error) {}
});
Detach video conferencing plugin
When the job is done, you should detach the video conferencing plugin. The detachVideoConferencingPlugin() method detaches the plugin and destroys the handle tearing down to the related peer connection if it exists.
client.detachVideoConferencingPlugin({
success: function() {},
error: function(error) {}
});
Destroy session
To destroy a session, use the destroySession() method.
client.destroySession({
success: function() {},
error: function(error) {}
});
Camera resolution
A camera resolution is a video stream encoding parameter. Yo can set video resolution via video property.
var config = {
server: MULTIPARTY_SERVER,
iceServers: ["..."],
video: { quality: "hires" },
};
client = new QBVideoConferencingClient(config);
| Parameters | Description |
|---|---|
| video | Video property. The possible values are lowres (320x240) and hires (640x480). Default: hires. |
Updated 23 days ago
What's Next
| Content |