Web-gphoto2-npm-test NPM

Web-gPhoto2

A gPhoto2 implementation using WebAssembly to control DSLR cameras from the browser.

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: A picture of DSLR camera connected via a USB cable to a laptop. The laptop is running the Web demo mentioned in the article, which mirrors a live video feed from the camera as well as allows to tweak its settings via form controls.

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"],
  },
});