web-gphoto2-npm-test
v0.24.0
Published
WebAssembly implementation of gphoto2 and libusb to control DSLR cameras over USB on the Web
Downloads
22
Readme
Web-gPhoto2
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
Installation
npm install web-gphoto2
// or
yarn add web-gphoto2
Usage
A short example on how to use this package:
import { Camera } from "web-gphoto2";
let camera = new Camera();
async function connectCamera() {
await camera.showCameraPicker();
await camera.connect();
}
async function getSupportedOps() {
const ops = await camera.getSupportedOps();
console.log("Supported Ops:", ops);
}
async function getCameraConfig() {
const config = await camera.getConfig();
console.log("Config:", config);
}
async function updateConfig() {
await camera.setConfigValue("iso", "800");
}
async function capturePreviewAsBlob() {
// Capture a frame while in live view mode
const blob = await camera.capturePreviewAsBlob();
imageUrl = URL.createObjectURL(blob);
// Set the imageUrl as the src of an image element in your HTML
}
async function captureImageAsFile() {
// Capture an image
const file = await camera.captureImageAsFile();
imageUrl = URL.createObjectURL(file);
// Set the imageUrl as the src of an image element in your HTML
}
Demo
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
Building
To build, you'll need Docker. Then:
./build.sh # runs build in Docker
npx serve examples/preact # starts a local server with COOP/COEP
Then, navigate to http://localhost:3000/ in Chrome.
Common Issues
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
Information from Stackoverflow
In vite, both of the above mentioned issues are solved by adding the following to your vite.config.js:
import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";
/** @type {import('vite').Plugin} */
const viteServerConfig = {
name: "add headers",
configureServer: (server) => {
server.middlewares.use((req, res, next) => {
res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
next();
});
},
};
export default defineConfig({
plugins: [sveltekit(), viteServerConfig],
optimizeDeps: {
exclude: ["web-gphoto2"],
},
});
See also
RReverser/eos-remote-web - my other project for controlling Canon cameras over Web Bluetooth.
License
Like the dependencies, this demo is licensed under LGPL v2.1.