SIGN UP

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) helps with the quality of communication (law 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 the access to the VoxImplant Control Panel.

Lets open the Applications section of the Control Panel, create a new app and name it videochat. After that go to the Users section and create two users for the application (for example, testuser1 and testuser2), they can be assigned to the app while the process or later (by editing).Users

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

VoxEngine.forwardCallToUserDirect();

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 scenario, so let's check another example:

let call1, call2;
VoxEngine.addEventListener(AppEvents.CallAlerting, function(e) {
  call1 = e.call;
  call2 = VoxEngine.callUserDirect(e.call, e.destination, e.displayName, e.headers);
  VoxEngine.easyProcess(e.call, call2, handleCallConnected, true);
});
function handleCallConnected(call1, call2) {
  // Disconnect the call from VoxEngine side after 5 seconds
  setTimeout(VoxEngine.terminate, 5000);
}

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 Rules 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.

Application RuleNow we have finished our VoxImplant account setup for 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 {
  voxAPI.init({
    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 + ".voximplant.com", 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 = e.call;
  // 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.
  currentCall.answer('',null,{receiveVideo:true,sendVideo:true});
}

// Make outbound call
function createCall() {
  // application_username - app username that will be dialed (with video)
  currentCall = voxAPI.call(application_username, {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    
  voxAPI.sendVideo(true);
  currentCall.showRemoteVideo(true);
}

// 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:voximplantwebrtcvideochatpeer-to-peerturnstunicewebbrowser
B6A24216-9891-45D1-9D1D-E7359CEB8282 Created with sketchtool.

Comments(0)

Add your comment

To leave a comment, first confirm that you are not a robot. It's free

Recommend

Get your free developer account or talk with our sales team to learn more about Voximplant solutions
SIGN UP
Contact sales

Please complete this field.

Please complete this field.

Please complete this field.

Choose the solution

Please complete this field.

Please complete this field.