Home

Description

VDVideo captures a selfie video of the user, guiding them in a self-contained and accessible system. VDVideo retrieves the following information:

One selfie video of the user completing the following tasks.

• Showing the face.
• Spelling a custom sentence/words.
• Showing the obverse document (front side).
• Showing the reverse document (back side) for supported two-sided documents

VDVideo takes into account the type of device being used and attempts to launch the camera (front facing or rear) that will provide the user with the best experience:

• Rear camera is used on mobile devices (smartphones, tablets…)
• Front camera is used on computers (desktops, laptops…)

The following permission is required for the framework to work:

• Camera.
• Microphone.

The camera attempts to start at Full HD (1080p), but lower resolutions are intended whether the devices are unable to support the optimal one. A 15 seconds 1080p video is about 3.5Mb in size.

Specifications

The SDK supports the following devices and browsers:

Desktop Browsers

Browser Name	Minimum version	Current version
Chrome	57	121
Firefox	52	122
Safari	11.2	17.3
Opera	44	106
Edge	16	121

Mobile and Tablets Browsers

Browser Name	Platform	Minimum version	Current version
Chrome	Android	57	120
Firefox	Android	52	119
Edge	Android	42	121
Opera Mobile	Android	46	73
Samsung Internet	Android	7.2	23
Safari	iOS	11.2	17.3

Current version at 2024/01/12 GetUserMedia WebAssembly

The size of the SDK is 4.6 MB

Integration

VDVideo is built as a stand-alone module with a single external dependency:

• VDVideo.js file contains the core functionality.
• cv.js file contains the external dependency.

Place VDVideo.js and cv.js with the other static assets of your website.

In your HTML, right before the closing tag of the body element, place one script tag:

<script type="application/javascript" src="path_to_static_assets/VDVideo.js" charset="UTF-8"></script>
<script type="application/javascript" src="path_to_static_assets/cv.js" onerror="CVLoadError()"></script>

At the location in your HTML where VDVideo should mount, place a div element with a unique id or class name. The id “target” is used here as an example:

<div id='target'></div>

The target must have defined width and height sizes values; here is an example taking relative values from the parent node:

#target {
  width: 100%,
  height: 100%,
}

VDVideo can be launched at any point in your JavaScript code, the only requirement being that the HTML document be totally loaded. The following code shows how to mount the SDK with the recommended configuration:

function sdkStart() {
  const VDVideo = makeVDVideoWidget();
  VDVideo({
    targetSelector: '#target',
    documents: ['ES2'],
    detectionMessageBackgroundColor: '#000D44',
    detectionMessageTextColor: '#FFFFFF',
    confirmationDialogBackgroundColor: '#ffffff',
    confirmationColorTick: '#078B3C',
    confirmationDialogTextColor: '#000D44',
    infoUserVideoBackgroundColorTop: '#000D44',
    infoUserVideoBackgroundColor: '#ffffff',
    infoUserVideoTextColor: '#000D44',
    infoUserVideoBackgroundColorButton: '#000D44',
    infoUserVideoTextColorButton: '#ffffff',
    sdkBackgroundColorInactive: '#ffffff',
    errorActionButtonTextColor: '#000D44',
    errorDisplayTextColor: '#000D44',
    errorDisplayBackgroundColor: '#ffffff',
    errorDisplayIconColor: '#000D44',
    borderColorCenteringAidDetecting: '#078B3C',
    errorBoxTextColor: '#000D44',
    errorBoxButtonTextColor: '#000D44',
    errorBoxBackgroundColor: '#FFFFFF',
    errorBoxButtonColor: '#FFFFFF',
  });
}

Before sdkStart function, it is needed a pre-load of the models that uses cv.wasm for detecting documents. The next picture shows this calling process:

try {
  var Module = {
    onRuntimeInitialized: function () {
      if (window.cv instanceof Promise) {
        window.cv.then(target => {
          window.cv = target;
          sdkStart();
        });
      } else {
        // for backward compatible
        sdkStart();
      }
    },
  };
} catch (e) {
  console.error(e);
}

Example

<body>
  <!-- installation of sdk starts -->
  <div id="target"></div>
  <script>
    function sdkStart() {
      const VDVideo = makeVDVideoWidget();
      VDVideo({
        targetSelector: '#target',
        reviewImage: true,
        documents: ['ES2',],
        logEventsToConsole: true,
        recordingTimeStates: [5000, 5000],
        videoRecordingMaxTime: 20000,
        faceDetectionTime: 5000,
        faceWarningDelayTime: 1500,
        obverseDocumentWarningDelayTime: 2000,
        reverseDocumentWarningDelayTime: 3000,
        sdkBackgroundColorInactive: '#FFFFFF',
        backgroundColorEffectMessage: '#000D44',
        detectionMessageBackgroundColor: '#000D44',
        detectionMessageTextColor: '#FFFFFF',
        confirmationColorTick: '#078B3C',
        infoUserVideoBackgroundColorTop: '#000D44',
        infoUserVideoBackgroundColor: '#FFFFFF',
        infoUserVideoTextColor: '#000D44',
        infoUserVideoBackgroundColorButton: '#000D44',
        infoUserVideoTextColorButton: '#FFFFFF',
        infoUserButtonBackgroundColor: '#000D44',
        infoUserButtonTextColor: '#FFFFFF',
        errorBoxTextColor: '#000D44',
        errorBoxBackgroundColor: '#FFFFFF',
        errorBoxButtonColor: '#FFFFFF',
        errorBoxButtonTextColor: '#000D44',
        detectedDocumentOutlineColor: '#000D44',
        ovalFaceDetectionColor: '#000D44',
        confirmationDialogTextColor: '#000D44',
        confirmationDialogBackgroundColor: '#FFFFFF',
        confirmationDialogButtonBackgroundColor: '#FFFFFF',
        confirmationDialogLinkTextColor: '#000D44',
        errorDisplayBackgroundColor: '#FFFFFF',
        errorDisplayTextColor: '#000D44',
        errorActionButtonBackgroundColor: '#FFFFFF',
        errorActionButtonTextColor: '#000D44',
        errorDisplayIconColor: '#000D44',
      });
    }
    function CVLoadError() {
      Module.printErr('Failed to load/initialize cv.js');
    }
    try {
      var Module = {
        onRuntimeInitialized: function () {
          if (window.cv instanceof Promise) {
            window.cv.then((target) => {
              window.cv = target;
              sdkStart();
            })
          } else {
            // for backward compatible
            sdkStart();
          }
        }
      }
    } catch (e) {
      console.error(e)
    }
  </script>
  <script type="application/javascript" src="../assets/sdk/VDDocument.js" charset="UTF-8"></script>
  <script type="application/javascript" src="../assets/sdk/cv.js" onerror="CVLoadError()"></script>
  <!-- installation of sdk ends -->
</body>

Integration in Angular

In file, angular.json: "scripts": [ "src/assets/libs/cv_init.js", "src/assets/libs/cv.js", "src/assets/libs/VDVideo.js" ],

In folder, src/assets/libs add new file cv_init.js, with this code:

try {
  var Module = {
    onRuntimeInitialized: function () {
      if (window.cv instanceof Promise) {
        window.cv.then(target => {
          window.cv = target;
          sdkStart();
        });
      } else {
        // for backward compatible
        sdkStart();
      }
    },
  };
} catch (e) {
  console.error(e);
}

Use

The SDK gives one global method called getSDKversion, this method when called, it will return the version of the SDK.

Once VDVideo mounts, it can be unmounted programmatically by invoking the global function destroyVDVideoWidget.

VDVideo unmounts itself after completing the tasks required, or after process times out. You can control how long it takes for the process to time out to a certain extent. Refer to the configuration section.

Other global mehtod call restartToken, this method when called, it will inyect a new numeric token into the SDK. It must be pass the token as parameter and must be subscribed to VDVideo_restartToken event beacuse is this event the one that indicate when to inyect new token.

Other events are available from SDK that are listed on Type Definitions section.

Properties

• needsEncoding (Boolean) -> Whether the output needs encoding using the Videoconverter server. (see Video Converter API section)The standard output returns False. The alternative output returns True.

• recording (Array of objects) -> Standard Output: video → Blob type, contains the recorded video in webm format except safari browser version >= 14.8 that is in mp4 format. Alternative Output: video → Array of recorded frames, includes base64 images and metadata for allowing the video creation through the Videoconverter. audio → Blob type, contains the recorded audio in mp3 format. Required by Videoconverter. id → Unique identifier for every video to be created. Required by Videoconverter.

• xml (File) -> A xml which includes the needed metadata to compute certain operations on the SAAS side.