Update README examples

This commit is contained in:
Ingvar Stepanyan
2023-08-05 19:49:02 +01:00
parent 0380077969
commit 7d5ed6d2ff

View File

@@ -14,43 +14,38 @@ npm install web-gphoto2
A short example on how to use this package: A short example on how to use this package:
```ts ```js
import { Camera } from "web-gphoto2"; import { Camera } from "web-gphoto2";
let camera = new Camera(); let camera = new Camera();
async function connectCamera() { // Triggers the browser's native USB picker listing all connected cameras.
await Camera.showPicker(); 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(); await camera.connect();
}
async function getSupportedOps() { console.log("Operations supported by the camera:", await camera.getSupportedOps());
const ops = await camera.getSupportedOps();
console.log("Supported Ops:", ops);
}
async function getCameraConfig() { console.log("Current configuration tree:", await camera.getConfig());
const config = await camera.getConfig();
console.log("Config:", config);
}
async function updateConfig() { // Update camera configuration by the setting's name.
await camera.setConfigValue("iso", "800"); await camera.setConfigValue("iso", "800");
}
async function capturePreviewAsBlob() { // Capture a lower-quality preview frame, useful for high-FPS live view stream.
// Capture a frame while in live view mode // Returns a Blob with image mime type and contents.
const blob = await camera.capturePreviewAsBlob(); const blob = await camera.capturePreviewAsBlob();
imageUrl = URL.createObjectURL(blob); // Use `URL.createObjectURL` to create an image URL from the blob or `createImageBitmap` to decode it directly.
// Set the imageUrl as the src of an image element in your HTML const img = new Image();
} img.src = URL.createObjectURL(blob);
async function captureImageAsFile() { // Capture a full-resolution image in format currently selected on the camera (JPEG or RAW).
// Capture an image // 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 file = await camera.captureImageAsFile();
imageUrl = URL.createObjectURL(file); const a = document.createElement("a");
// Set the imageUrl as the src of an image element in your HTML a.href = URL.createObjectURL(file);
} a.download = file.name;
``` ```
## Demo ## Demo
@@ -96,11 +91,9 @@ SharedArrayBuffer can not be found
</summary> </summary>
SharedArrayBuffer has been disabled across all browsers due to the Spectre vulnerability. This package uses SharedArrayBuffer to communicate with the WebAssembly module. To work around this issue, you need to set two response headers for your document: SharedArrayBuffer has been disabled across all browsers due to the Spectre vulnerability. This package uses SharedArrayBuffer to communicate with the WebAssembly module. To work around this issue, you need to set two response headers for your document:
``` ```http
Cross-Origin-Opener-Policy: same-origin Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp Cross-Origin-Embedder-Policy: require-corp
``` ```
Information from [Stackoverflow](https://stackoverflow.com/questions/64650119/react-error-sharedarraybuffer-is-not-defined-in-firefox) Information from [Stackoverflow](https://stackoverflow.com/questions/64650119/react-error-sharedarraybuffer-is-not-defined-in-firefox)
@@ -114,7 +107,7 @@ Vite tries to optimize the dependencies by default. This causes the WebAssembly
In vite, both of the above mentioned issues are solved by adding the following to your vite.config.js: In vite, both of the above mentioned issues are solved by adding the following to your vite.config.js:
```ts ```js
import { sveltekit } from "@sveltejs/kit/vite"; import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite"; import { defineConfig } from "vite";