jon/web-dslr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixes for review

Browse Source
This commit is contained in:
ICheered
2023-08-05 13:43:44 +02:00
parent 9d03408513
commit b0c044aa3a
7 changed files with 92 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -4,6 +4,7 @@
!/deps/libgphoto2
!/deps/libusb
/api.o
examples/svelte
# Local Netlify folder
.netlify

54
README.md
View File

@@ -7,7 +7,6 @@ Powered by a [custom fork](https://github.com/RReverser/libgphoto2) of [libgphot
# NPM
## Installation
```bash
npm install web-gphoto2
// or
@@ -15,7 +14,6 @@ yarn add web-gphoto2
```
## Usage
A short example on how to use this package:
```ts
@@ -43,16 +41,42 @@ async function updateConfig() {
}
async function capturePreviewAsBlob() {
// Capture a frame while in live view mode
const blob = await camera.capturePreviewAsBlob();
console.log("Blob:", blob);
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();
console.log("File:", file);
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](https://web.dev/porting-libusb-to-webusb/) 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.](https://web-dev.imgix.net/image/9oK23mr86lhFOwKaoYZ4EySNFp02/MR4YGRvl0Z9AWT6vv3sQ.jpg?auto=format&w=1600)
For the detailed technical write-up, see [the official blog post](https://web.dev/porting-libusb-to-webusb/). To see the demo in action, visit the hosted version [here](https://web-gphoto2.rreverser.com/) (but make sure to read the [cross-platform compatibility notes](https://web.dev/porting-libusb-to-webusb/#important-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:
```bash
./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
### SharedArrayBuffer can not be found
@@ -96,28 +120,6 @@ export default defineConfig({
});
```
# Demo
This repository also contains a [demo app](https://web.dev/porting-libusb-to-webusb/) 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.](https://web-dev.imgix.net/image/9oK23mr86lhFOwKaoYZ4EySNFp02/MR4YGRvl0Z9AWT6vv3sQ.jpg?auto=format&w=1600)
For the detailed technical write-up, see [the official blog post](https://web.dev/porting-libusb-to-webusb/). To see the demo in action, visit the hosted version [here](https://web-gphoto2.rreverser.com/) (but make sure to read the [cross-platform compatibility notes](https://web.dev/porting-libusb-to-webusb/#important-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:
```bash
./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.
## See also
[RReverser/eos-remote-web](https://github.com/RReverser/eos-remote-web) - my other project for controlling Canon cameras over Web Bluetooth.

6
examples/preact/ops.js
View File

@@ -25,8 +25,7 @@ const ModulePromise = initModule();
export function rethrowIfCritical(err) {
// If it's precisely Error, it's a custom error; anything else - SyntaxError,
// WebAssembly.RuntimeError, TypeError, etc. - is treated as critical here.
if (err.constructor !== Error)
{
if (err.constructor !== Error) {
throw err;
}
}
@@ -45,8 +44,7 @@ export async function connect() {
* @param {(ctx: Context) => Promise<T>} op
* @returns {Promise<T>}
*/
function schedule(op)
{
function schedule(op) {
let res = queue.then(() => op(context));
queue = res.catch(rethrowIfCritical);
return res;

2
examples/preact/preview.js
View File

@@ -23,7 +23,7 @@ export const isDebug = new URLSearchParams(location.search).has('debug');
const Stats = isDebug
? await import('stats.js').then(
res => /** @type {typeof import('stats.js')} */ (res['default'])
res => /** @type {typeof import('stats.js')} */(res['default'])
)
: null;

4
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "web-gphoto2",
"version": "1.0.0",
"name": "web-gphoto2-npm-test",
"version": "0.14.0",
"description": "WebAssembly implementation of gphoto2 and libusb to control DSLR cameras over USB on the Web",
"type": "module",
"main": "src/camera.js",

77
src/camera.js
View File

@@ -1,5 +1,5 @@
/*
* Copyright 2021 Google LLC
* Copyright 2023 Google LLC
*
* This library is free software; you can redistribute it and/or
* modify it under the terms of the GNU Lesser General Public
@@ -16,21 +16,12 @@
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA
*/
/** @typedef {import('./libapi.mjs.d.ts').Context} Context */
// To avoid errors for users who use SSR or Hybrid rendering (e.g. Nuxt.js), we need to check if we're in the browser.
let initModule;
async function initializeModule() {
if (typeof window !== "undefined") {
const module = await import("../build/libapi.mjs");
initModule = module.default;
return initModule;
} else {
console.warn("web-gphoto2 is only available in the browser");
return null;
}
}
/**
* @typedef {import('./libapi.mjs').Config} Config
* @typedef {import('./libapi.mjs').SupportedOps} SupportedOps
* @typedef {import('./libapi.mjs').Context} Context
*/
import initModule from "../build/libapi.mjs";
export function rethrowIfCritical(err) {
// If it's precisely Error, it's a custom error; anything else - SyntaxError,
@@ -43,6 +34,9 @@ export function rethrowIfCritical(err) {
const INTERFACE_CLASS = 6; // PTP
const INTERFACE_SUBCLASS = 1; // MTP
/**
* This class provides methods for interacting with the camera.
*/
class Camera {
constructor() {
/** @type {Promise<unknown>} */
@@ -52,6 +46,10 @@ class Camera {
this.ModulePromise = null;
}
/**
* This method shows the camera picker.
* @returns {Promise<void>}
*/
async showCameraPicker() {
// @ts-ignore
await navigator.usb.requestDevice({
@@ -64,24 +62,24 @@ class Camera {
});
}
/**
* This method connects to the camera.
* @returns {Promise<void>}
*/
async connect() {
if (!this.ModulePromise) {
this.ModulePromise = initializeModule().then((initModule) => {
if (initModule) {
return initModule();
} else {
return null;
}
});
this.ModulePromise = initModule()
}
this.Module = await this.ModulePromise;
this.context = await new this.Module.Context();
}
/** Schedules an exclusive async operation on the global context.
/**
* This method schedules an exclusive async operation on the global context.
* @template T
* @param {(ctx: Context) => Promise<T>} op
* @returns {Promise<T>}
* @private
*/
async schedule(op) {
let res = this.queue.then(() => op(this.context));
@@ -89,16 +87,28 @@ class Camera {
return res;
}
/**
* This method disconnects from the camera.
* @returns {Promise<void>}
*/
async disconnect() {
if (!this.context.isDeleted()) {
this.context.delete();
}
}
/**
* This method gets the camera configuration.
* @returns {Promise<Config>}
*/
async getConfig() {
return this.schedule((context) => context.configToJS());
}
/**
* This method gets the supported operations of the camera.
* @returns {Promise<SupportedOps>}
*/
async getSupportedOps() {
if (this.context) {
return await this.context.supportedOps();
@@ -106,23 +116,40 @@ class Camera {
throw new Error("You need to connect to the camera first");
}
/**
* This method sets a configuration value on the camera.
* @param {string} name
* @param {number | string | boolean} value
* @returns {Promise<void>}
*/
async setConfigValue(name, value) {
const uiTimeout = new Promise((resolve) => setTimeout(resolve, 800));
const setResult = this.schedule((context) =>
context.setConfigValue(name, value)
);
// wait for both the config set operation and the timeout to complete
return Promise.all([setResult, uiTimeout]);
}
/**
* This method captures a preview as a Blob.
* @returns {Promise<Blob>}
*/
async capturePreviewAsBlob() {
return this.schedule((context) => context.capturePreviewAsBlob());
}
/**
* This method captures an image as a File.
* @returns {Promise<File>}
*/
async captureImageAsFile() {
return this.schedule((context) => context.captureImageAsFile());
}
/**
* This method consumes camera events.
* @returns {Promise<boolean>}
*/
async consumeEvents() {
return this.schedule((context) => context.consumeEvents());
}

25
src/libapi.mjs.d.ts vendored
View File

@@ -16,7 +16,7 @@
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA
*/
export type Config = {
type Config = {
name: string;
info: string;
label: string;
@@ -58,32 +58,11 @@ declare class Context {
isDeleted(): boolean;
}
export declare class Camera {
constructor();
showCameraPicker(): Promise<void>;
connect(): Promise<void>;
disconnect(): Promise<void>;
getConfig(): Promise<any>; // replace "any" with the actual type of the config if you have it
getSupportedOps(): SupportedOps;
setConfigValue(name: string, value: number | string | boolean): Promise<void>;
capturePreviewAsBlob(): Promise<Blob>;
captureImageAsFile(): Promise<File>;
consumeEvents(): Promise<boolean>;
private rethrowIfCritical(err: any): void; // any error type can be replaced by more specific if available
private schedule<T>(op: (ctx: any) => Promise<T>): Promise<T>; // ctx and T types can be replaced by more specific if available
}
export interface Module extends EmscriptenModule {
Context: typeof Context;
}
export type { Context };
export type { Config, Context, SupportedOps };
declare const initModule: EmscriptenModuleFactory<Module>;
export default initModule;