Back up photos in a peer-to-peer app

Add the dependencies

npm install bare-ffmpeg bare-media get-mime-type hyperblobs hypercore-blob-server hypercore-id-encoding

bare-ffmpeg and bare-media are Bare native modules—they ship prebuilt binaries via bare-sidecar and only work inside the Bare worker, never in Electron's main or renderer.

Store the file and generate a preview inside the worker

workers/video-room.js (VideoRoom, shared with the video-stream how-to but extended for images) defines addVideo (L181), which checks the MIME type with get-mime-type and rejects anything that is not an image or video (L183–L186). It then streams the full file bytes into a Hyperblobs write stream (L188–L194) and captures the resulting blob id (L195). Only then does it generate a small inline preview—bare-media for images, bare-ffmpeg for video (L197)—and append the record to the base (L200–L202):

  async addVideo (filePath, info) {
    const name = path.basename(filePath)
    const type = getMimeType(name)
    if (!(type.startsWith('image/') || type.startsWith('video/'))) {
      throw new Error('Only image/video files are allowed')
    }

    const rs = fs.createReadStream(filePath)
    const ws = this.blobs.createWriteStream()
    await new Promise((resolve, reject) => {
      ws.on('error', reject)
      ws.on('close', resolve)
      rs.pipe(ws)
    })
    const blob = { key: idEnc.normalize(this.blobs.core.key), ...ws.id }

    const preview = type.startsWith('image/') ? await createPreviewImage(filePath) : await createPreviewVideo(filePath)

    const id = Math.random().toString(16).slice(2)
    await this.base.append(
      VideoDispatch.encode('@pear-photo-backup/add-video', { id, name, type, blob, info: { ...info, preview } })
    )
  }

The preview is a base64 data: URL kept inline in the record's info, so the grid can paint immediately without fetching the full blob. Images are resized with bare-media: createPreviewImage decodes the file, resizes it to a 256×256 bound, and re-encodes it as WebP (L6–L9), then returns the bytes as a base64 data: URL (L10):

const { image } = require('bare-media')

const MIMETYPE = 'image/webp'

async function createPreviewImage (filePath) {
  const buffer = await image(filePath)
    .decode()
    .resize({ maxWidth: 256, maxHeight: 256 })
    .encode({ mimetype: MIMETYPE })
  return `data:${MIMETYPE};base64,${buffer.toString('base64')}`
}

module.exports = createPreviewImage

workers/create-preview-video.js is the bare-ffmpeg counterpart for video files (a stub in the reference app—wire up bare-ffmpeg frame extraction here to generate a video thumbnail). Both preview helpers are worker-side modules (they call bare-media/bare-ffmpeg), so they live alongside the worker in workers/, not in the renderer. Each record stored in the view is { id, name, type, blob, info: { preview, ... } }—small metadata plus a blob id pointing at the full bytes.

Reuse the standard close order

Photo backup does not add an interval or any other timer, so WorkerTask._close keeps the same chain as hello-pear-electron: room → swarm → store. The room itself closes its blob server and blobs core first (VideoRoom._close). The graceful-goodbye handler in workers/index.js fires it.

Render a photo grid

In the renderer, render <img src={entry.info.preview} loading="lazy"> straight from the inline preview, and open the full-size image (or video) via entry.info.link—the blob-server URL the worker attaches in getVideos. Use the renderer's drag-and-drop to call getPathForFile(file) on each dropped file (exposed by the preload bridge) and write { type: 'add-video', path } over the worker pipe, which the worker forwards to its addVideo handler.