srd-web-sdk-demo

slug: web-getting-started title: Getting Started with JavaScript authors: [bla] tags: [JavaScript, usage]

Installation

npm i https://bitbucket.org/ballastlane/srd-web-sdk/src/master/

Once installed, copy the dist/model folder to you project's public or assets folder.

Initialization

Initialize the sdk with your apiKey, which is used to persist and retrieve the emitted events. Without a valid API key, the SDK will emit errors when attempting to persist the events.

import { FYFOFaceTracker, FYFOFace, FYFOTrackingEventPublisher, FYFOTrackingEvent } from 'fyfo-web-sdk'
const sdk = new FYFOFaceTracker('apiKey')

Setting up the Camera

const video: HTMLVideoElement = document.getElementById("my-video")
const constraints = {
    audio: false,
    video: {
        facingMode: "user",
        resizeMode: "crop-and-scale",
        width: video.width,
        height: video.height,
    },
};
video.srcObject  = await navigator.mediaDevices.getUserMedia(constraints);

video.onloadeddata = async () => {
    video.play()
}

Add Face

The primary purpose of FYFOFaceTracker is to identify a face which can be added to the tracker using the addFace method. This method accepts a FYFOFace object, and returns a promise. The added face is considered authorized when the the model starts the loop and emits events.

//1. Get an HTMLVideoElement or HTMLCanvasElement
const imageRef: HTMLImageElement = document.getElementById('my-image')

// 2. Create a FYFOFace
const face: FYFOFace = new FYFOFace('id_01', [imageRef])

// 3. Get back the same FYFOFace with a Float32Array of descriptors from the model 
const faceDescriptor: FYFOFace = await sdk.addFace(face)

Start recognition and tracking

With one or more added faces, begin the recognition loop with the start method

    const videoRef = document.getElementById('my-video')

    const emitter: FYFOTrackingEventPublisher = sdk.start({ cameraSelector: videoRef })

    emitter.addEventListener("data", (event) => {
        const evt = event.detail as FYFOTrackingEvent
        console.log(evt)
    })

    emitter.addEventListener("error", (err) => {
        console.log(err.detail)
    })

    // ...
    sdk.stop()