srd-web-sdk-demo
v1.0.12
Published
SRD Web javascript sdk
Downloads
13
Readme
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()