Voximplant. Blog

Video Recording

Video Recorder

We have recently released video recording functionality (not to be confused with client side recording released by browser vendors) and there is a number of cases when it can be very useful. This tutorial explains how to use this new functionality to build video recorder web app using our Web SDK in minutes.

Functionality

The application will have rather simple functionality – user logs in, click record button and the video recording starts, after he clicks stop button video being saved and URL to the video is sent to the client for further playback in HTML video element.

Creating VoxImplant entities

First of all we need to create scenario that will be processing inbound call and record it:

  1. VoxEngine.addEventListener(AppEvents.CallAlerting, function(e) {
  2. e.call.addEventListener(CallEvents.Connected, handleCallConnected);
  3. e.call.addEventListener(CallEvents.RecordStarted, handleRecordStarted);
  4. e.call.addEventListener(CallEvents.Failed, VoxEngine.terminate);
  5. e.call.addEventListener(CallEvents.Disconnected, VoxEngine.terminate);
  6. e.call.answer();
  7. });
  8.  
  9. function handleCallConnected(e) {
  10. // Record call including video
  11. e.call.record({video:true});
  12. }
  13.  
  14. function handleRecordStarted(e) {
  15. // Send video URL to client
  16. e.call.sendMessage(JSON.stringify({url: e.url}));
  17. }

Let’s call it VideoRecorder and save. Then we need to create VoxImplant application , and application Rule that will route the call made on a browser side to our scenario (if we dial videorec number – see the Pattern input):
app

rule
Then we need to assign at least one user to the application and it’s time to work on the client application.

Web application

We have started to use TypeScript and React for web app development recently, so let’s make our app using this stack. You can get the app from https://github.com/voximplant/videorecorder

Comments