# Getting Started - JavaScript SDK

Quick start guide for integrating VerifEye JavaScript SDK into your web applications.

# Prerequisites

Modern web browser (Chrome 90+, Firefox 88+, Safari 14+, Edge 90+)
Node.js 14+ and npm/yarn (for npm installation)
A VerifEye account and API key
HTTPS enabled (required for webcam access)

# Installation

# Option 1: NPM

npm install @verifeye/js-sdk

# Option 2: Yarn

yarn add @verifeye/js-sdk

# Option 3: CDN

<script src="https://cdn.verifeye.com/js-sdk/v1/verifeye.min.js"></script>

# Quick Start

# ES6 Modules

import { FaceLiveness } from '@verifeye/js-sdk';

const liveness = new FaceLiveness({
 apiKey: 'YOUR_API_KEY',
 videoElement: document.getElementById('video')
});

// Start liveness detection
await liveness.start();

liveness.on('result', (result) => {
 if (result.isLive) {
 console.log('Live face detected!', result.confidence);
 }
});

# HTML + Script Tag

<!DOCTYPE html>
<html>
<head>
 <title>VerifEye Demo</title>
 <script src="https://cdn.verifeye.com/js-sdk/v1/verifeye.min.js"></script>
</head>
<body>
 <video id="video" autoplay></video>
 <div id="result"></div>

 <script>
 const liveness = new VerifEye.FaceLiveness({
 apiKey: 'YOUR_API_KEY',
 videoElement: document.getElementById('video')
 });

 liveness.start().then(() => {
 console.log('Liveness detection started');
 });

 liveness.on('result', (result) => {
 document.getElementById('result').textContent = 
 result.isLive ? 'Live ' : 'Spoof ';
 });
 </script>
</body>
</html>

# Framework Examples

# React

import React, { useEffect, useRef, useState } from 'react';
import { FaceLiveness } from '@verifeye/js-sdk';

function LivenessDetector() {
 const videoRef = useRef(null);
 const [result, setResult] = useState(null);

 useEffect(() => {
 const liveness = new FaceLiveness({
 apiKey: 'YOUR_API_KEY',
 videoElement: videoRef.current
 });

 liveness.start();
 liveness.on('result', setResult);

 return () => liveness.stop();
 }, []);

 return (
 <div>
 <video ref={videoRef} autoPlay />
 {result && (
 <div>{result.isLive ? 'Live ' : 'Spoof '}</div>
 )}
 </div>
 );
}

# Vue 3

vue
<template>
 <div>
 <video ref="videoRef" autoplay></video>
 <div v-if="result">
 Live 
 </div>
 </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { FaceLiveness } from '@verifeye/js-sdk';

const videoRef = ref(null);
const result = ref(null);
let liveness = null;

onMounted(() => {
 liveness = new FaceLiveness({
 apiKey: 'YOUR_API_KEY',
 videoElement: videoRef.value
 });

 liveness.start();
 liveness.on('result', (data) => {
 result.value = data;
 });
});

onUnmounted(() => {
 if (liveness) {
 liveness.stop();
 }
});
</script>

# Angular

import { Component, ElementRef, ViewChild, OnInit, OnDestroy } from '@angular/core';
import { FaceLiveness } from '@verifeye/js-sdk';

@Component({
 selector: 'app-liveness',
 template: `
 <video #video autoplay></video>
 <div *ngIf="result">
 Live 
 </div>
 `
})
export class LivenessComponent implements OnInit, OnDestroy {
 @ViewChild('video') videoElement!: ElementRef;
 liveness: any;
 result: any;

 ngOnInit() {
 this.liveness = new FaceLiveness({
 apiKey: 'YOUR_API_KEY',
 videoElement: this.videoElement.nativeElement
 });

 this.liveness.start();
 this.liveness.on('result', (data: any) => {
 this.result = data;
 });
 }

 ngOnDestroy() {
 if (this.liveness) {
 this.liveness.stop();
 }
 }
}

# Next Steps

Explore the JavaScript SDK features:

Face Liveness Detection
Face Match Verification
Face Search
DeepFake Detection
Age/Gender Verification

# Need Help?

../../contact/

Last updated: 2025-01-13