ngeab

    1.0.9 • Public • Published

    Leia Capture npm version

    Leia Capture allows you to perform liveness challenges, take pictures and record videos in your browser

    Installation

    Via npm:

    npm install leia-capture

    Via script tags:

    <script src="https://unpkg.com/@tensorflow/tfjs-core@3.3.0/dist/tf-core.js"></script>
    <script src="https://unpkg.com/@tensorflow/tfjs-backend-cpu@3.3.0/dist/tf-backend-cpu.js"></script>
    <script src="https://unpkg.com/@tensorflow/tfjs-backend-webgl@3.3.0/dist/tf-backend-webgl.js"></script>
    <script src="https://unpkg.com/@tensorflow/tfjs-backend-wasm@3.3.0/dist/tf-backend-wasm.js"></script>
    <script src="https://unpkg.com/@tensorflow/tfjs-layers@3.3.0/dist/tf-layers.js"></script>
    <script src="https://unpkg.com/@tensorflow/tfjs-converter@3.3.0/dist/tf-converter.js"></script>
    <script src="https://unpkg.com/@tensorflow-models/face-landmarks-detection@0.0.3/dist/face-landmarks-detection.js"></script>
    <script src="https://unpkg.com/@leia-capture/1.0.0/leia-capture.js"></script>

    Usage

    Basic face challenge (type can be 'head_turn_left', 'head_turn_right', 'mouth_open'):

    // Create a camera
    const camera = new LeiaCapture()
    
    // Register EventListeners
    window.addEventListener("cameraReady", () => {
      // Set your overlay and start a challenge when our camera is ready
      camera.setOverlay(overlayDiv)
      camera.startFaceChallenge("head_turn_left", "challenge01")
    })
    
    // If you choose to record challenges, it'll be returned using this event
    window.addEventListener("videoProcessed", event => {
      const video = event.detail.blob
      const name = event.detail.name
      // Do something with the video
    })
    
    // Start our camera when Facemesh model is ready
    // It can take some time depending on the device so it's better not to load it when the camera is running
    camera.loadFacemeshModel().then(() => {
      // Need a div to add our camera
      camera.start(containerDiv, "front")
    })

    Basic document capture:

    // Create a camera
    const camera = new LeiaCapture()
    
    onTakePicture(blob) {
      // Do something with the picture
    }
    
    // Add a callback to your button when an user takes a picture
    myOverlayCaptureButton.onclick = function() {
      camera.takePicture(that.onTakePicture);
      // You can also record a video
      camera.startRecording("document01")
    }
    
    // Register EventListeners
    window.addEventListener("cameraReady", () => {
      // Set your overlay and start a challenge when our camera is ready
      camera.setOverlay(overlayDiv)
    })
    
    window.addEventListener("videoProcessed", event => {
      const video = event.detail.blob
      const name = event.detail.name
      // Do something with the video
    })
    
    // Start our camera when Facemesh model is ready
    // It can take some time depending on the device so it's better not to load it when the camera is running
    camera.loadFacemeshModel().then(() => {
      // Need a div to add our camera
      camera.start(containerDiv, "back")
    })

    API

    start(container, facingMode, videoWidth, videoHeight, frameRate, drawFaceMask)

    Start camera in a given container

    Params:

    • container - an HTML element to insert the camera
    • facingMode - a sensor mode. Can be 'front' or 'back' (default: 'front')
    • videoWidth - a video width. Cannot be below 1280 (default: 1280)
    • videoHeight - a video height. Cannot be below 720 (default: 720)
    • frameRate - framerate. Cannot be below 25 (default: 25)
    • drawFaceMask - if true, detected face masks are drawn (default: true)

    stop()

    Stop camera and remove it from its container

    setOverlay(overlay)

    Display an overlay on top of the video

    Params:

    • overlay - an HTML element

    startFaceChallenge(type, videoOutputName, record)

    Start a challenge

    Params:

    • type - a challenge type. Can be 'head_turn_left', 'head_turn_right' or 'mouth_open'
    • videoOutputName - a name for the recorded video, if record is set to true (default: 'challenge')
    • record - if true, the current challenge will be automatically recorded (default: true)

    startRecording(videoOutputName)

    Start recording a video. Note: during challenges, you don't have to use this method if you call 'startFaceChallenge' with 'record' to true

    Params:

    • videoOutputName - a name for the recorded video

    stopRecording(processVideo)

    Stop recording a video. Note: during challenges, you don't have to use this method if you call 'startFaceChallenge' with 'record' to true

    Params:

    • processVideo - if true, the current recorded video should be processed. Thus 'videoProcessing' and 'videoProcessed' are sent

    takePicture(callback, quality, area)

    Take a picture

    Params:

    • callback - a callback method for when the picture is returned as a blob. Your callback method must be in this format to receive the picture: nameofyourmethod(pictureBlob)
    • quality - quality of the returned picture, from 0.0 to 1.0 (default: 1.0)
    • area - (optional) an area of capture. Must be in this format [x, y, width, height]

    getVideoDimensions()

    Get video dimensions in this format: [width, height]

    Events

    cameraReady

    Licence

    MIT

    Keywords

    none

    Install

    npm i ngeab

    DownloadsWeekly Downloads

    1

    Version

    1.0.9

    License

    MIT

    Unpacked Size

    32 kB

    Total Files

    3

    Last publish

    Collaborators

    • sbstcano