v2.0 — Now with Pinch-to-Zoom

js-camera

Zero-dependency camera element for the web. Drop in one tag, capture frames, and ship.

Try Live Demo GitHub

npm install js-camera

Features

Everything you need. Nothing you don't.

A single custom element that handles camera access, live preview, image capture, and gesture zoom.

⚙

Web Components V1

Works with React, Vue, Svelte, or vanilla HTML. No framework lock-in.

📷

Capture & Export

PNG, JPEG, WebP. Resize, crop, and fit — all in one call.

🔍

Pinch-to-Zoom

Two-finger zoom on touch devices. Captured images respect the zoom level.

🎬

Built-in Controls

Play/pause, capture button, face-switch. Or go fully programmatic.

🔁

Front & Back

Switch between cameras. Select specific devices by ID.

⚡

Zero Dependencies

~10 KB gzipped. No runtime bloat. Just drop it in.

Quick Start

3 lines to camera.

Add the tag, import the module, done.

HTML

            <js-camera autoplay facing="back" controls></js-camera>
          

JavaScript

import 'js-camera';

Programmatic Usage

import 'js-camera';

const camera = document.querySelector('js-camera');

// Open rear camera at Full HD
await camera.open({ facingMode: 'back', width: 1920, height: 1080 });

// Capture as JPEG
const jpeg = camera.capture({ format: 'image/jpeg' });

// Crop a region
const cropped = camera.capture({ extract: { x: 100, y: 50, width: 200, height: 200 } });
      

Live Demo

See it in action.

This is a real <js-camera> element running right here. Try the controls — capture, pause, switch cameras.

Camera access required. Works best on mobile for face-switch and pinch-to-zoom.