Camera & media

Take photos, capture a screenshot, record audio, and scan barcodes from the device.

Take a photo

Open the camera to take a photo. The image arrives on the photoCaptured event, so subscribe before you call, and ask for camera permission first.

capturePhoto emits photoCaptured; pickPhoto emits photoSelected. They are not interchangeable.

import { createBdkNative } from "@bdk/native/browser";

const bdk = createBdkNative();

bdk.on("photoCaptured", (photo) => {
  console.log(photo.fileUrl, photo.contentType); // MediaResult
});

await bdk.permissions.ask("camera");
await bdk.media.capturePhoto();

Use the photo result

The photoCaptured listener receives a MediaResult. Use dataUri to preview inline and fileUrl to upload. bdk.on(...) returns an unsubscribe function.

PropertyTypeDescription
fileUrlstring | nullHosted URL of the file — use this to upload.
dataUristring | nullData URI — use this to preview inline.
contentTypestring | nullThe file's MIME type.
dataThe raw file data from the device.
const off = bdk.on("photoCaptured", (photo) => {
  if (photo.dataUri) {
    (document.querySelector("#preview") as HTMLImageElement).src = photo.dataUri;
  }
  if (photo.fileUrl) {
    void uploadAvatar(photo.fileUrl);
  }
});

await bdk.media.capturePhoto();

off(); // when done

Pick from the photo library

Open the photo library instead of the camera. Results arrive on the photoSelected event, not photoCaptured.

bdk.on("photoSelected", (photo) => console.log("picked", photo.fileUrl));

await bdk.media.pickPhoto();

Take a screenshot

Capture a screenshot of the current screen. The image arrives on the screenshot event.

bdk.on("screenshot", (image) => console.log("captured", image));

await bdk.media.captureScreenshot();

Record audio

Open the native audio recorder. The recording arrives on the audioRecorded event as a MediaResult — use fileUrl to upload it.

bdk.on("audioRecorded", (audio) => {
  if (audio.fileUrl) void uploadClip(audio.fileUrl); // MediaResult
});

await bdk.media.recordAudio();

Scan a barcode

Open the scanner for QR codes and barcodes. The decoded value arrives on the barcodeScanned event.

bdk.on("barcodeScanned", (code) => console.log("scanned", code));

await bdk.media.scanBarcode();

Fall back on the web

Outside the app the call resolves skipped or pending and photoCaptured never fires. Detect this and show a standard <input type="file" capture> instead.

const result = await bdk.media.capturePhoto();

if (result.skipped || result.pending) {
  document.querySelector("#file-input")?.removeAttribute("hidden");
}