0.1.1

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "tauri-video02"
-version = "0.1.0"
+version = "0.1.1"
 description = "A Tauri Video App"
 authors = ["sinus@sasedev.net"]
 edition = "2024"

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) {
+        if (encoded !== null && encoded.length > 0) {
-            videoPreview.src = `data:image/jpeg;base64,${encoded}`;
+            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;

package.json

@@ -1,7 +1,7 @@
 {
     "name": "tauri-video02",
     "private": true,
-    "version": "0.1.0",
+    "version": "0.1.1",
     "type": "module",
     "scripts": {
         "dev": "vite",

src/media_video.rs

@@ -52,7 +52,7 @@ fn build_pipeline(output_path: &std::path::Path) -> Result<gst::Pipeline, AppErr
             "autovideosrc ! videoconvert ! tee name=t ",
             "t. ! queue ! vp8enc deadline=1 ! webmmux ! filesink location=\"{}\" ",
             "t. ! queue leaky=downstream max-size-buffers=1 ! videoconvert ! ",
-            "jpegenc quality=80 ! appsink name=preview_sink emit-signals=false max-buffers=1 drop=true sync=false"
+            "jpegenc quality=80 ! appsink name=preview_sink max-buffers=1 drop=true sync=false"
         ),
         location
     );
@@ -123,6 +123,8 @@ fn attach_preview_callbacks(
 
             let bytes = map.as_slice().to_vec();
 
+            tracing::info!(size = bytes.len(), "preview sample received");
+
             let lock_result = preview_store.lock();
             match lock_result {
                 Ok(mut guard) => {
@@ -284,9 +286,12 @@ pub fn get_video_preview_frame_base64(
     };
 
     let Some(bytes) = guard.as_ref() else {
+        tracing::info!("preview frame requested but none is available yet");
         return Ok(None);
     };
 
+    tracing::info!(size = bytes.len(), "preview frame requested and returned");
+
     let encoded = base64::engine::general_purpose::STANDARD.encode(bytes);
     Ok(Some(encoded))
 }

tauri.conf.json

@@ -1,7 +1,7 @@
 {
     "$schema": "https://schema.tauri.app/config/2",
     "productName": "tauri-video02",
-    "version": "0.1.0",
+    "version": "0.1.1",
     "identifier": "com.sinus.tauri-video02",
     "build": {
         "beforeDevCommand": "npm run dev",