@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.
- Used by
@microblink/blinkid-ux-manager
and @microblink/blinkid
.
Installation
Install from npm using your preferred package manager:
npm install @microblink/camera-manager
yarn add @microblink/camera-manager
pnpm add @microblink/camera-manager
Usage
Basic Example
import { CameraManager } from "@microblink/camera-manager";
const cameraManager = new CameraManager();
await cameraManager.startCameraStream();
const video = document.getElementById("video");
cameraManager.initVideoElement(video);
const removeCallback = cameraManager.addFrameCaptureCallback((imageData) => {
});
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);
cameraUi.dismount();