# 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