Package Exports

ts-webcam
ts-webcam/dist/ts-webcam.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ts-webcam) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ts-webcam

A TypeScript library for managing webcam access using the MediaDevices API. This library provides a simple, type-safe interface for initializing and controlling webcam streams in web applications.

Features

Type-safe configuration with TypeScript interfaces
Support for multiple resolution options with automatic fallback
Mirror and auto-rotation capabilities
Customizable preview element integration
Event callbacks for start and error handling
Comprehensive set of basic methods

Installation

npm install ts-webcam

Usage

Basic Example

import { Webcam } from "ts-webcam";

// Initialize Webcam
const webcam = new Webcam({
  audio: true,
  device: "your-device-id", // Optional: specific device ID
  resolutions: [
    { name: "HD", width: 1280, height: 720, aspectRatio: 16 / 9 },
    { name: "VGA", width: 640, height: 480, aspectRatio: 4 / 3 },
  ],
  fallbackResolution: {
    name: "VGA",
    width: 640,
    height: 480,
    aspectRatio: 4 / 3,
  },
  mirror: true, // Enable mirror mode
  autoRotation: true, // Auto-rotate based on device orientation
  previewElement: document.getElementById("preview") as HTMLVideoElement, // Preview element
  onStart: () => console.log("Webcam started successfully"),
  onError: (error) => console.error("Error:", error),
});

// Start the webcam
webcam.start();

// Stop the webcam
webcam.stop();

Additional Methods Example

// Check active status
console.log("Is active:", webcam.isActive());

// Get current resolution
const resolution = webcam.getCurrentResolution();
console.log("Resolution:", resolution);
// Output: Resolution: { name: "Current", width: 1280, height: 720, aspectRatio: 1.7777777777777777 }

// Update configuration
webcam.updateConfig({
  mirror: true,
  resolutions: [
    { name: "FHD", width: 1920, height: 1080, aspectRatio: 16 / 9 },
  ],
});

Resolution Interface

interface Resolution {
  name: string; // Resolution name (e.g., "HD", "FHD", "VGA")
  width: number; // Width in pixels
  height: number; // Height in pixels
  aspectRatio?: number; // Optional aspect ratio (e.g., 16/9, 4/3)
}

System Requirements

Browser with MediaDevices API support (Chrome, Firefox, Edge, Safari)
TypeScript (if using in a TypeScript project)

License

MIT License

Support

If you encounter any issues or would like to request new features, please create an issue at our GitHub repository