Cutting PWA Camera Memory by 60%: WebRTC, Web Workers & Chunked Processing

Background and Challenges

The existing DeWu ERP image‑capture workflow requires manual photo shooting and upload, consuming excessive labor and causing resource contention; only about 30 items can be processed per day, far short of the volume needed to build a high‑quality product image library.

Complex image‑upload path.

Compressed images often need re‑shooting.

Borrow/return operations are limited to PC.

High‑resolution captures create severe memory and CPU pressure.

Implementation Plan

A PWA camera application was built to perform the entire capture, processing, and upload flow on a handheld device, removing the need for PC‑side steps.

Overall Technical Solution

The solution is based on WebRTC, HTML5 , , and Web Workers.

WebRTC navigator.mediaDevices.getUserMedia accesses the camera.

The element displays the live stream.

captures frames for image generation.

Web Workers handle heavy image processing off the UI thread.

Overall Architecture

Key architecture components include camera stream management, off‑screen rendering, and worker‑based image processing.

Process Flow

Open the PWA page and enable the camera.

CameraStreamManager provides a video element.

Wait for frame stability.

Create an ImageBitmap directly from the video stream.

Pass the ImageBitmap to a Web Worker for processing.

Select a processing strategy based on device capabilities.

The worker processes the image using chunked or chunkedConvert strategies.

Generate an ObjectURL for preview and add the image to the upload queue.

Recycle resources and release memory.

Finish the step or proceed to the next image.

Performance Optimization

Optimization was required because the original implementation caused UI lag, low‑end devices could not shoot smoothly, image conversion was slow, and frequent failures occurred due to memory peaks that triggered throttling or page reloads.

Memory analysis showed a single 4032×3024 frame consumes roughly 46 MB; total peak memory exceeds 300 MB on an iPhone X, leading to crashes.

Optimizations Implemented

Off‑screen canvas rendering to move drawing off the main thread.

Video stream pre‑warming and device‑specific resolution management.

Web Worker for image processing, isolating memory usage.

Device‑specific strategy selection (direct, chunked, chunkedConvert).

Asynchronous upload using Blob instead of base64.

Page reload fallback and cache of historical data.

Memory allocation model with canvas reuse and timely release.

Strategy Details

The initial approach used canvas.toDataURL() to produce a base64 string, increasing payload size by about 33 % and slowing uploads.

Switching to canvas.toBlob() produced binary data, reducing size and memory consumption.

Introducing ImageBitmap allowed zero‑copy transfer to workers and avoided extra pixel copying.

Chunked processing splits large images into smaller tiles, dramatically lowering peak memory usage.

const videoConstraints = useRef({ video: { facingMode: 'environment', width: { min: 1280, ideal: 4032, max: 4032 }, height: { min: 720, ideal: 3024, max: 3024 }, frameRate: { ideal: 30, min: 15 }, advanced: [{ focusMode: "continuous" }] } as MediaTrackConstraints });

Results

Single‑image peak memory reduced by 33 % (≈123 MB → ≈82 MB).

Persistent memory per image reduced by 61 % (≈76.7 MB → ≈30.2 MB).

Overall PWA memory usage lowered 16‑26 % depending on image count.

Capture capacity increased from 3‑4 images before warning to up to 50 images without failure.

Daily shooting volume grew 330 % and labor cost per item dropped 41 %.

Image library contribution rose to 72.5 % of total intake, with flow efficiency reaching 20 %.

Business Results

The optimized PWA now meets high‑resolution image requirements, eliminates workflow interruptions, and significantly improves operational efficiency.

Planning and Outlook

Future work includes:

More granular device capability assessment and strategy branching for low, medium, and high‑end devices.

Category‑specific image‑quality rules (e.g., shoes, luxury goods).

Intelligent shooting guidance based on lighting and composition analysis.

Integration of H5 capture into the broader inventory pipeline and automated gallery acceptance.