Peer-to-peer video chat

Peer-to-peer video chat

VoxImplant is a perfect choice if you need to build real-time web-based video chat application in minutes. VoxImplant Web SDK supports WebRTC and lets developers integrate this functionality with any other web application. Peer-to-peer data transfer capabilities available in WebRTC-enabled browsers (Chrome/Firefox/Opera/other) help with the quality of communication (low latency) and scalability. All infrastructure required for WebRTC p2p communication is offered by VoxImplant, including signaling built-in the SDK, STUN/TURN/ICE support, etc. Let's see what steps are required to get simple video chat application up and running.

Creating VoxImplant Application, App Users, App Rule, and VoxEngine Scenario

Before we start building our web app using Web SDK we need to setup Voximplant account. If you don't have one you can get it for free at here. After account activation you will get access to the VoxImplant Control Panel.

Let's open the Applications section of the Control Panel, create a new app and name it videochat. After that go to the Users tab of the application and create two users (for example, testuser1 and testuser2).

Now we need to create the VoxEngine scenario that will process calls between the app users, we can name it User2User:


That's all scenario code we need for peer-to-peer calls between users. But this example doesn't show call control logic that can be implemented in a scenario, so let's check another example:

VoxEngine.addEventListener(AppEvents.CallAlerting, (e) => {
  const newCall = VoxEngine.callUserDirect(, 
  VoxEngine.easyProcess(, newCall, ()=>{}, true);

The last thing we need is to create the application Rule that will tell VoxImplant which scenario should be used for which call. Edit the application, open the Routing tab and create a new rule. Let's name it Intercom, put .* in the Pattern input field (it means we will process all calls using the assigned scenario) and drag'n'drop our User2User scenario to the Assigned scenarios list.

Now we have finished our VoxImplant account setup for the video chat application.

Building web application using Web SDK

For web client we will need voximplant.min.js library (Web SDK), it's available from our CDN and basic understanding of the SDK. We won't put the whole application code here, but you can always grab it from our GitHub page.

// Load the SDK

// Create VoxImplant instance
var voxAPI = VoxImplant.getInstance();
// Add event listeners
voxAPI.addEventListener(VoxImplant.Events.SDKReady, onSdkReady);
voxAPI.addEventListener(VoxImplant.Events.ConnectionEstablished, onConnectionEstablished);
voxAPI.addEventListener(VoxImplant.Events.ConnectionFailed, onConnectionFailed);
voxAPI.addEventListener(VoxImplant.Events.ConnectionClosed, onConnectionClosed);
voxAPI.addEventListener(VoxImplant.Events.AuthResult, onAuthResult);
voxAPI.addEventListener(VoxImplant.Events.IncomingCall, onIncomingCall);
voxAPI.addEventListener(VoxImplant.Events.MicAccessResult, onMicAccessResult);

// Initialize the SDK
try {
    useRTCOnly: true, // force usage of WebRTC
    micRequired: true, // ask mic/cam access before connection to VoxImplant
    videoSupport: true  // enable video support
} catch (e) {
  // showing the message if browser doesn't support WebRTC
  if (e.message == "NO_WEBRTC_SUPPORT") alert("WebRTC support isn't available");

// Now we can use SDK functions - establish connection with VoxImplant
function onSdkReady() {
  voxAPI.connect(); // mic/cam access dialog will be shown after the function call

// Process mic/cam dialog input result
function onMicAccessResult(e) {
  if (e.result) {
    // access was allowed
  } else {
    // access was denined - no connection will happen

// Establishing connection with VoxImplant
function onConnectionEstablished() {
  // Authorization - show the dialog for user to let enter username/password and use login function
  // Change application_user, application_name, account_name and application_user_password to your data for testing
  voxAPI.login(application_user + "@" + application_name + "." + account_name + "", application_user_password);

// Couldn't establish connection with VoxImplant
function onConnectionFailed() {
  // Websockets or UDP connection is unavailable

// Connection with VoxImplant was closed
function onConnectionClosed() {
  // Can call connect here to reconnect

function onAuthResult(e) {
  if (e.result) {
    // authorization was successful - can make/receive calls now
  } else {
    // authorization failed - check e.code to see the error code

var currentCall = null; // current call

// handle incoming call
function onIncomingCall(e) {
  currentCall =;
  // add event listeners
  currentCall.addEventListener(VoxImplant.CallEvents.Connected, onCallConnected);
  currentCall.addEventListener(VoxImplant.CallEvents.Disconnected, onCallDisconnected);
  currentCall.addEventListener(VoxImplant.CallEvents.Failed, onCallFailed);
  // Answer automatically. It's better to show the dialog to let answer/reject the call in real app.

// Make outbound call
function createCall() {
  // application_username - app username that will be dialed (with video)
  currentCall =, {receiveVideo:true,sendVideo:true});
  // add event listeners
  currentCall.addEventListener(VoxImplant.CallEvents.Connected, onCallConnected);
  currentCall.addEventListener(VoxImplant.CallEvents.Disconnected, onCallDisconnected);
  currentCall.addEventListener(VoxImplant.CallEvents.Failed, onCallFailed);

// Call connected
function onCallConnected(e) {
  // Start sending video and show incoming video    

// Call disconnected
function onCallDisconnected(e) {
  currentCall = null;

// Call failed
function onCallFailed(e) {
  // Error code -  e.code, error reason - e.reason

That's all events and functions we need. Of course, it's just plain JS, we need to add HTML/CSS. The app available on our GitHub account looks this way:

Mic/cam access dialog

UI idle state

UI call state

Project files (GitHub)

Tags:web sdkvideopeer-to-peer
B6A24216-9891-45D1-9D1D-E7359CEB8282 Created with sketchtool.


Add your comment

Please complete this field.


Sign up for a free Voximplant developer account or talk to our experts