0.1.1

frontend/index.html

@@ -4,6 +4,8 @@
 <meta charset="UTF-8" />
 <link rel="stylesheet" href="styles.css" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<meta http-equiv="Content-Security-Policy"
+	content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; connect-src 'self';" />
 <title>Tauri GST Record + Preview</title>
 </head>
 

frontend/main.ts

@@ -58,8 +58,8 @@ async function refreshPreviewFrame(): Promise<void> {
     try {
         const encoded = await invoke<string | null>("get_video_preview_frame_base64");
 
-        if (encoded !== null && encoded.length > 0 && videoPreview) {
-            videoPreview.src = `data:image/jpeg;base64,${encoded}`;
+        if (encoded !== null && encoded.length > 0) {
+            updatePreviewImageFromBase64(encoded);
         }
     } catch (error) {
         console.error("preview refresh failed", error);
@@ -73,6 +73,12 @@ function startPreviewPolling(): void {
         return;
     }
 
+    console.log("starting preview polling");
+
+    window.setTimeout(() => {
+        void refreshPreviewFrame();
+    }, 120);
+
     previewTimer = window.setInterval(() => {
         void refreshPreviewFrame();
     }, 200);
@@ -87,6 +93,11 @@ function stopPreviewPolling(): void {
     previewRequestInFlight = false;
     if (videoPreview)
         videoPreview.removeAttribute("src");
+
+    if (previewObjectUrl !== null) {
+        URL.revokeObjectURL(previewObjectUrl);
+        previewObjectUrl = null;
+    }
 }
 
 startAudioBtn.addEventListener("click", async () => {
@@ -142,4 +153,35 @@ stopVideoBtn.addEventListener("click", async () => {
         setVideoStatus(`Stop video failed.\n${String(error)}`);
         setVideoButtons(true);
     }
-});
+});
+
+let previewObjectUrl: string | null = null;
+
+function base64ToUint8Array(base64: string): Uint8Array {
+    const binary = window.atob(base64);
+    const bytes = new Uint8Array(binary.length);
+
+    for (let index = 0;index < binary.length;index += 1) {
+        bytes[index] = binary.charCodeAt(index);
+    }
+
+    return bytes;
+}
+
+function updatePreviewImageFromBase64(encoded: string): void {
+    const bytes = base64ToUint8Array(encoded);
+    const copied = new Uint8Array(bytes.byteLength);
+
+    copied.set(bytes);
+
+    const blob = new Blob([copied.buffer], { type: "image/jpeg" });
+    const objectUrl = URL.createObjectURL(blob);
+
+    if (previewObjectUrl !== null) {
+        URL.revokeObjectURL(previewObjectUrl);
+    }
+
+    previewObjectUrl = objectUrl;
+    if (videoPreview)
+        videoPreview.src = objectUrl;
+}

frontend/styles.css

@@ -45,6 +45,7 @@ button:disabled {
 .preview-wrap {
 	width: 100%;
 	aspect-ratio: 16/9;
+	min-height: 240px;
 	background: #0b1220;
 	border: 1px solid #374151;
 	border-radius: 8px;