@realeyes/preview-internal-face-detection-sdk

preview-internal-face-detection-sdk

Description

This program is for face duplication detection.

This program can display camera content in video element and draw ellipse where face should be placed. If face checking is started and the face positioned inside of ellipse, then a picture of the face will be checked for face uniqueness and color of the ellipse represents the result.

Meaning of color of ellipse:

• gray: face checking has not been started yet
• yellow: face checking is running
• green: no face duplication found
• green: face duplication found

Feature list:

• face detection,
• change camera
• take picture of video

npm

repository

Install

npm i @realeyes/preview-internal-face-detection-sdk

Getting started

1. Copy models from npm package to public folder

cp -r  node_modules/@realeyes/preview-internal-face-detection-sdk/lib/models/  public/models/

2. Create instance of Video class
3. Attach video element by calling attachVideo method
4. Call checkFace method

React

import { useEffect, useRef, useState } from "react";
import "./App.css";
import { Video } from "@realeyes/preview-internal-face-detection-sdk";
const ExternalId = "*";
const CollectionIds = ["*"];
function App() {
  const videoRef = useRef(null);
  const canvasPictureRef = useRef(null);

  const [video] = useState(
    new Video(
      "https://{stage}collect.realeyesit.com",
      process.env.REACT_APP_ACCESS_KEY!
    )
  );

  useEffect(() => {
    if (videoRef && videoRef.current) {
      video.attachVideo(videoRef.current);
      video.start();
    }
  }, [videoRef,videoRef.current]);

  const onTakePicture = () => {
    const pic = video.takePicture(canvasPictureRef.current); // if provide canvas the picture will be displayed inside canvas
  };

  const onChangeCamera = async () => {
    await video.changeCamera();
  };

  const onDetectFace = async () => {
    const result = await video.checkFace(ExternalId, CollectionIds);
  };

  return (
    <div className="App">
      <video
        id="vid"
        className="video-circle"
        ref={videoRef}
        width={320}
        autoPlay
        height={240}
      ></video>
      <canvas ref={canvasPictureRef} width={155} height={240}></canvas>
      <div>
        <button onClick={onChangeCamera}>Change camera</button>
        <button id="startbutton" onClick={onTakePicture}>
          Take photo
        </button>
        <button onClick={onDetectFace}>Detect face</button>
      </div>
    </div>
  );
}

export default App;

Vue

<script setup lang="ts">

import { Video } from "@realeyes/preview-internal-face-detection-sdk"
import { onMounted, ref } from "vue";

const ExternalId = "*";
const CollectionIds = ["*"];

const video = new Video("*")
const videoRef = ref<HTMLVideoElement | undefined>(undefined)
const canvasPictureRef = ref<HTMLCanvasElement | undefined>(undefined)

onMounted(() => {
  if (!videoRef.value) {
    throw new Error("videoRef.value null")
  }
  video.attachVideo(videoRef.value);
  video.start();
})

const onChangeCamera = () => {
  video.changeCamera()
}
const onTakePicture = () => {
  video.takePicture(canvasPictureRef.value)
}
const onDetectFace = () => {
  video.checkFace(ExternalId, CollectionIds)
}
</script>

<template>
  <video className="video-circle" ref="videoRef" width="320" height="240"></video>
  <canvas ref="canvasPictureRef" width=155 height=240></canvas>
  <div>
    <button @click="onChangeCamera">Change camera</button>
    <button @click="onTakePicture">
      Take photo
    </button>
    <button @click="onDetectFace">Detect face</button>
  </div>
</template>