web: shoot through the live camera

The one path where the look is chosen before the picture exists: OPEN CAMERA
grades the camera's own feed with the recipe in force, many times a second, and
the shutter hands the studio the sensor's still under that same recipe. Preview
and file differ in resolution only — the still is `takePhoto`'s own frame, not a
copy of the small preview video, with `grabFrame` and a 2d copy of the element
behind it for the browsers that ship no ImageCapture.

The renderer gains two inputs for it: `sourceImage`, a picture the caller
already decoded (re-encoding the camera's frame to JPEG only to decode it again
would cost more than the whole render), and `drawTo`, which paints the finished
picture instead of encoding it. One render is in flight at a time; a frame that
arrives during one is dropped, so a slow device shows a lower frame rate rather
than a queue of moments that have passed.

The view flashed black on a phone. Setting width/height on a canvas resets its
bitmap: measured on the preview, a resize leaves mean 0 until the next render
lands, which on this box is 0.5s and on a phone more. The buffer was sized from
every incoming frame, and a capture that renegotiates its resolution — which
Chromium does when the page is too slow to consume its frames, and this pipeline
runs ~2 fps at 720p under software GL — strobed black/picture at every switch.
The buffer is now sized on the first frame and after that only when the frame's
aspect changes: a same-aspect frame is scaled into it. Swapping a 1280x720
stream for a 640x360 one mid-view now leaves the buffer at 1280x720 with no
black frame, and 640x360 renders at 6-13 fps instead of 2.

The frames are read from a <video>, which is now IN the document (1px, behind
the black backdrop) rather than detached: Safari draws blank frames from a
detached video, which is the same black-between-pictures. It leaves the document
with the view, and the tracks are stopped, so the camera light goes out.

Probes: cam-smoke (feed painted, resolution, frame rate, a monochrome sim
reaching the live frames, shutter into the studio, close, console clean),
cam-renegotiate (no resize, no blank frame, status line on the frames),
cam-close-flip (flip returns a picture; video gone on close).

docker/frontend/src/i18n/en.ts

@@ -32,6 +32,17 @@ export const en: Dict = {
   'drop.keepHint': 'Save the untouched photo to the device photo library. A browser that cannot share files downloads it instead.',
   'drop.demoLimit': 'Demo build: exports are capped at {px}px and carry a watermark.',
 
+  // The live viewfinder (see vi.ts for what the status line is for).
+  'cam.open': 'OPEN CAMERA',
+  'cam.shot': 'SHOOT',
+  'cam.flip': 'Switch front/back camera',
+  'cam.starting': 'Opening the camera…',
+  'cam.status': '{w}×{h} · {fps} fps',
+  'cam.denied': 'The browser was not allowed the camera. Grant it, then open again.',
+  'cam.unsupported': 'This address cannot use a camera — it needs HTTPS or localhost.',
+  'cam.fail': 'The camera did not open.',
+  'cam.shotFail': 'The shot failed — try again.',
+
   'hist.title': 'HISTOGRAM',
   'hist.drag': 'Drag to move',
   'hist.hide': 'Hide the histogram',

docker/frontend/src/i18n/vi.ts

@@ -39,6 +39,19 @@ export const vi = {
   'drop.keepHint': 'Lưu nguyên ảnh gốc chưa chỉnh vào thư viện ảnh của máy. Trình duyệt không chia sẻ được tệp thì ảnh sẽ được tải về.',
   'drop.demoLimit': 'Bản demo: ảnh xuất ra tối đa {px}px và có watermark.',
 
+  // The live viewfinder. The status line is the one fact the user cannot see
+  // for themselves: the preview runs at its own resolution, and how fast the
+  // device grades it is what tells them the phone is keeping up.
+  'cam.open': 'MỞ CAMERA',
+  'cam.shot': 'CHỤP',
+  'cam.flip': 'Đổi camera trước/sau',
+  'cam.starting': 'Đang mở camera…',
+  'cam.status': '{w}×{h} · {fps} fps',
+  'cam.denied': 'Trình duyệt chưa được cho phép dùng camera. Hãy bật quyền rồi mở lại.',
+  'cam.unsupported': 'Trình duyệt không cho dùng camera ở địa chỉ này — cần HTTPS hoặc localhost.',
+  'cam.fail': 'Không mở được camera.',
+  'cam.shotFail': 'Chụp không thành công — thử lại.',
+
   // The histogram overlay. 'HISTOGRAM' is the word Vietnamese photographers use.
   'hist.title': 'HISTOGRAM',
   'hist.drag': 'Kéo để di chuyển',