A gPhoto2 implementation using WebAssembly to control DSLR cameras from the browser.
Powered by a custom fork of libgphoto2, the WebUSB backend of libusb, and WebAssembly via Emscripten.
npm install web-gphoto2
A short example on how to use this package:
import { Camera } from "web-gphoto2";
let camera = new Camera();
// Triggers the browser's native USB picker listing all connected cameras.
await Camera.showPicker();
// Connects to the camera exposed in the previous step.
// In the future we might allow to connect to multiple cameras by passing a specific instance.
await camera.connect();
console.log("Operations supported by the camera:", await camera.getSupportedOps());
console.log("Current configuration tree:", await camera.getConfig());
// Update camera configuration by the setting's name.
await camera.setConfigValue("iso", "800");
// Capture a lower-quality preview frame, useful for high-FPS live view stream.
// Returns a Blob with image mime type and contents.
const blob = await camera.capturePreviewAsBlob();
// Use `URL.createObjectURL` to create an image URL from the blob or `createImageBitmap` to decode it directly.
const img = new Image();
img.src = URL.createObjectURL(blob);
// Capture a full-resolution image in format currently selected on the camera (JPEG or RAW).
// This can be used in the same way as Blob above, but also has extra information such as filename useful for download.
const file = await camera.captureImageAsFile();
const a = document.createElement("a");
a.href = URL.createObjectURL(file);
a.download = file.name;
This repository also contains a demo app running gPhoto2 on the Web:
For the detailed technical write-up, see the official blog post. To see the demo in action, visit the hosted version here (but make sure to read the cross-platform compatibility notes first).
If you don't have a DSLR, you can check out a recording of the demo below:
https://user-images.githubusercontent.com/557590/152155035-a1664656-a7d9-411f-8cb3-5f04320f1391.mp4
To build the WebAssembly part of the repo, you'll need Docker on Linux (WSL works too) or macOS machine. Then:
npm run build:wasm # runs build in Docker
If you are just updating the JS library (src/camera.ts
), then it's enough to do
npm run build:ts
on any system as Wasm parts are committed to this repo.
To serve the demo, run:
npx serve examples/preact # starts a local server with COOP/COEP
Then, navigate to http://localhost:3000/ in Chrome.
RReverser/eos-remote-web - my other project for controlling Canon cameras over Web Bluetooth.
Like the dependencies, this demo is licensed under LGPL v2.1.