From 2216669d36b2d58e5be64b9ff7a86a936ce29775 Mon Sep 17 00:00:00 2001
From: Rocka <i@rocka.me>
Date: Mon, 7 Oct 2024 22:59:05 +0800
Subject: [PATCH] fix(web): remove hardcoded capture frame rate

---
 web/shared/components/dialog-preview.tsx | 14 ++++++++++----
 web/shared/qrcode-stream.ts              |  5 +++--
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/web/shared/components/dialog-preview.tsx b/web/shared/components/dialog-preview.tsx
index cc80b71..236d9cf 100644
--- a/web/shared/components/dialog-preview.tsx
+++ b/web/shared/components/dialog-preview.tsx
@@ -28,7 +28,7 @@ export const PreviewDialog = forwardRef<IPreviewDialog, Props>((props, ref) => {
     const refDialog = useRef<HTMLDialogElement>(null);
     const refVideo = useRef<HTMLVideoElement>(null);
     const refStreamDecoder = useRef<QRCodeStreamDecoder>(null);
-    const [latency, setLatency] = useState(0);
+    const [latency, setLatency] = useState<string>();
 
     useImperativeHandle(ref, () => {
         return {
@@ -161,13 +161,14 @@ export const PreviewDialog = forwardRef<IPreviewDialog, Props>((props, ref) => {
 
     const handleDecodeLatency = (e: TargetedEvent) => {
         e.preventDefault();
+        setLatency('-- ms');
         if (refVideo.current != null && refStreamDecoder.current == null) {
             refStreamDecoder.current = new QRCodeStreamDecoder(refVideo.current);
         }
         const decoder = refStreamDecoder.current!;
         decoder.start();
         decoder.addEventListener('latency', (e: CustomEvent<number>) => {
-            setLatency(e.detail);
+            setLatency(`${e.detail} ms`);
         })
     };
 
@@ -187,8 +188,13 @@ export const PreviewDialog = forwardRef<IPreviewDialog, Props>((props, ref) => {
             <form method="dialog">
                 <button onClick={handleCloseDialog}>Hide</button>
                 <button onClick={handlePreviewStop} class="text-red-500">Stop</button>
-                <button onClick={handleDecodeLatency}>Decode Latency</button>
-                {latency > 0 ? (<span>Latency: {latency}ms</span>) : null}
+                {
+                    typeof latency === 'string' ? (
+                        <span>Latency: {latency}</span>
+                    ) : (
+                        <button onClick={handleDecodeLatency}>Decode Latency</button>
+                    )
+                }
             </form>
         </dialog>
     );
diff --git a/web/shared/qrcode-stream.ts b/web/shared/qrcode-stream.ts
index 4ec8404..bc7b6b0 100644
--- a/web/shared/qrcode-stream.ts
+++ b/web/shared/qrcode-stream.ts
@@ -68,7 +68,7 @@ export class QRCodeStream {
             this.scheduled = true;
             window.requestAnimationFrame(this.frameRequestCallback);
         }
-        const ms = this.canvas.captureStream(60);
+        const ms = this.canvas.captureStream();
         this.capturing = ms;
         return ms;
     }
@@ -121,6 +121,7 @@ export class QRCodeStreamDecoder extends TypedEventTarget<QRCodeStreamDecoderEve
         );
     }
 
+    // TODO: move decoding to worker
     private decodeFrame(now: number, width: number, height: number) {
         this.canvas.width = width;
         this.canvas.height = height;
@@ -139,7 +140,7 @@ export class QRCodeStreamDecoder extends TypedEventTarget<QRCodeStreamDecoderEve
 
     private videoFrameCallback_unbound(_now: DOMHighResTimeStamp, metadata: VideoFrameCallbackMetadata) {
         this.seq++;
-        // TODO make it configurable
+        // TODO: make it configurable
         if (this.seq >= 5) {
             this.seq = 0;
             const now = Date.now();