@microblink/camera-manager

This package provides camera management for web applications. It handles camera selection, permissions, video stream management, and provides access to video frames for further processing. It is framework-agnostic and can be used with or without a UI.

Overview

• Handles camera selection, permissions, and video stream lifecycle.
• Provides access to video frames for downstream processing.
• Can be used standalone or with the included UI components.

Browser Support

This package supports camera-based flows in these browser versions and newer:

• Chrome / Chromium 91 (desktop and Android)
• Edge 91
• Opera 84
• Firefox 132 (desktop)
• Safari 15.4 (macOS)
• iOS Safari 15.4

The package must run in a secure context because browsers only expose camera APIs such as getUserMedia() on HTTPS or localhost.

Firefox for Android

Firefox for Android is not supported for camera-based flows. Its navigator.mediaDevices.enumerateDevices() behavior can hide video input devices before an active camera capture, which makes camera device discovery and permission handling unreliable for this package. Mozilla tracks this behavior as intentional and resolved it as WONTFIX because exposing device information before camera access has fingerprinting implications: Bugzilla 1611998.

Installation

Install from npm using your preferred package manager:

npm install @microblink/camera-manager
# or
yarn add @microblink/camera-manager
# or
pnpm add @microblink/camera-manager

Usage

Basic Example

import { CameraManager } from "@microblink/camera-manager";

const cameraManager = new CameraManager();

// Start the camera stream (auto-selects the best camera)
await cameraManager.startCameraStream();

// Optionally, attach the video to a DOM element
const video = document.getElementById("video");
cameraManager.initVideoElement(video);

// Capture frames for processing
const removeCallback = cameraManager.addFrameCaptureCallback((imageData) => {
  // Process imageData (instance of ImageData)
});

// Stop the camera when done
cameraManager.stopStream();

See the camera-manager example for more usage details.

API

CameraManager class

• startCameraStream(options?): Starts the camera stream. Options allow selecting a specific camera or facing mode.
• initVideoElement(videoElement): Attaches a video element for preview.
• addFrameCaptureCallback(callback): Registers a callback to receive frames as ImageData during capture. Returns a cleanup function.
• startFrameCapture(): Starts capturing frames for processing.
• stopFrameCapture(): Stops capturing frames but keeps the stream active.
• stopStream(): Stops the camera stream and video playback.
• setResolution(resolution): Sets the desired video resolution (e.g., "1080p").
• setFacingFilter(facingModes): Filters available cameras by facing mode ("front" or "back").
• getCameraDevices(): Returns available camera devices.
• selectCamera(camera): Selects a specific camera device.
• setCameraMirrorX(mirrorX): Mirrors the video horizontally if needed.
• reset(): Resets the camera manager and stops all streams.

UI Integration

To use the built-in UI, use:

import { createCameraManagerUi } from "@microblink/camera-manager";

const cameraUi = await createCameraManagerUi(cameraManager, document.body);
// Optionally, add cleanup:
cameraUi.dismount();

Internationalization

You can customize UI strings either when creating the camera UI or at runtime:

const cameraUi = await createCameraManagerUi(cameraManager, undefined, {
  localizationStrings: {
    selected_camera: "My Updated String",
  },
});

At runtime:

cameraUi.updateLocalization({
  select_camera: "My updated string",
});

Provided Translations

• ak.ts
• am.ts
• ar.ts
• bn.ts
• cs.ts
• da.ts
• de.ts
• el.ts
• en.ts
• en_GB.ts
• es.ts
• es_MX.ts
• fa-latn.ts
• fi.ts
• fil.ts
• fr.ts
• fr_CA.ts
• ha.ts
• he.ts
• hi.ts
• hr.ts
• hu.ts
• id.ts
• is.ts
• it.ts
• ja.ts
• ka_GE.ts
• kk.ts
• km_KH.ts
• ko.ts
• lv.ts
• ms.ts
• ne.ts
• nl.ts
• no.ts
• pl.ts
• ps_AF.ts
• pt.ts
• pt_BR.ts
• ro.ts
• ru.ts
• si.ts
• sk.ts
• sl.ts
• sr.ts
• sv.ts
• sw.ts
• th.ts
• tr.ts
• uk.ts
• ur.ts
• uz.ts
• vi.ts
• yo.ts
• zh_CN.ts
• zh_TW.ts

You can import any of these files directly or use them as a starting point for your own localization.