tauri-plugin-camera-kessdev 0.2.0-beta.1 → 0.2.0-beta.2

package/README.md

@@ -198,6 +198,11 @@ const withThumbnail = await stopRecording({ thumbnail: true })
 await startRecording({ quality: 'fhd', fps: 30, bitrate: 2_000_000 }) // quality: 'sd' | 'hd' | 'fhd' | 'uhd'
 ```
 
+On desktop the preview stays alive during recording: the recording reuses the
+preview's video track (only the microphone is acquired separately), so the
+`<video>` element bound to `getPreviewStream()` keeps playing. The recording
+mime type is chosen from the browser's supported types (WebM or MP4).
+
 ### Video thumbnail
 
 Pass `{ thumbnail: true }` to `stopRecording()` to include a base64-encoded JPEG

package/dist-js/index.cjs

@@ -18,6 +18,7 @@ function isMobile() {
 let activeStream = null;
 let activeVideo = null;
 let mediaRecorder = null;
+let recordingAudioStream = null;
 let recordedChunks = [];
 let recordedBytes = 0;
 let recordingStartedAt = 0;
@@ -26,10 +27,28 @@ let progressTimer = null;
 const RECORDING_PROGRESS_INTERVAL_MS = 250;
 /** Ask MediaRecorder for data chunks at least this often so size is known live. */
 const RECORDING_TIMESLICE_MS = 1000;
+/** Picks an explicit recording mime type supported by this browser, if any. */
+function pickDesktopRecordingMimeType() {
+    if (typeof MediaRecorder === 'undefined' || typeof MediaRecorder.isTypeSupported !== 'function') {
+        return undefined;
+    }
+    const candidates = [
+        'video/webm;codecs=vp9,opus',
+        'video/webm;codecs=vp8,opus',
+        'video/webm',
+        'video/mp4'
+    ];
+    return candidates.find((type) => MediaRecorder.isTypeSupported(type));
+}
 function buildRecordingProgress(duration, bytes) {
-    const progress = { duration, bytesRecorded: bytes };
-    if (duration > 0) {
-        progress.bitrate = Math.round((bytes * 8) / duration);
+    // Omit the size-derived fields until a real chunk has arrived, matching the
+    // mobile backends (do not report a misleading 0).
+    const progress = { duration };
+    if (bytes > 0) {
+        progress.bytesRecorded = bytes;
+        if (duration > 0) {
+            progress.bitrate = Math.round((bytes * 8) / duration);
+        }
     }
     return progress;
 }
@@ -72,6 +91,8 @@ function teardownDesktopStream() {
         mediaRecorder.stop();
     }
     mediaRecorder = null;
+    recordingAudioStream?.getTracks().forEach((t) => t.stop());
+    recordingAudioStream = null;
     recordedChunks = [];
     recordedBytes = 0;
     if (activeStream) {
@@ -377,30 +398,44 @@ async function startRecording(options) {
         await core.invoke('plugin:camera-kessdev|start_recording', { ...options });
         return;
     }
-    if (activeStream) {
-        activeStream.getTracks().forEach((t) => t.stop());
-        activeStream = null;
-        activeVideo = null;
+    // Reuse the active preview video track when possible so the preview is not
+    // invalidated (which would freeze the app's <video> element).
+    let videoTrack = activeStream?.getVideoTracks()[0];
+    if (!videoTrack) {
+        const videoConstraints = {};
+        if (options?.quality)
+            videoConstraints.height = { ideal: qualityHeight(options.quality) };
+        if (options?.fps)
+            videoConstraints.frameRate = { ideal: options.fps };
+        const videoStream = await navigator.mediaDevices.getUserMedia({
+            video: videoConstraints,
+            audio: false
+        });
+        activeStream = videoStream;
+        videoTrack = videoStream.getVideoTracks()[0];
+    }
+    if (!videoTrack) {
+        throw new Error('No video track available for recording.');
     }
-    const videoConstraints = {};
-    if (options?.quality)
-        videoConstraints.height = { ideal: qualityHeight(options.quality) };
-    if (options?.fps)
-        videoConstraints.frameRate = { ideal: options.fps };
-    const stream = await navigator.mediaDevices.getUserMedia({ video: videoConstraints, audio: true });
-    activeStream = stream;
-    const video = document.createElement('video');
-    video.muted = true;
-    video.playsInline = true;
-    video.srcObject = stream;
-    await video.play();
-    activeVideo = video;
+    if (!activeVideo) {
+        const video = document.createElement('video');
+        video.muted = true;
+        video.playsInline = true;
+        video.srcObject = activeStream;
+        await video.play();
+        activeVideo = video;
+    }
+    recordingAudioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    const recordStream = new MediaStream([videoTrack, ...recordingAudioStream.getAudioTracks()]);
     recordedChunks = [];
     recordedBytes = 0;
     const recorderOptions = {};
     if (options?.bitrate)
         recorderOptions.videoBitsPerSecond = options.bitrate;
-    mediaRecorder = new MediaRecorder(stream, recorderOptions);
+    const mimeType = pickDesktopRecordingMimeType();
+    if (mimeType)
+        recorderOptions.mimeType = mimeType;
+    mediaRecorder = new MediaRecorder(recordStream, recorderOptions);
     mediaRecorder.ondataavailable = (event) => {
         if (event.data.size > 0) {
             recordedChunks.push(event.data);
@@ -435,9 +470,12 @@ async function stopRecording(options) {
     stopProgressTimer();
     return await new Promise((resolve, reject) => {
         mediaRecorder.onstop = () => {
-            const type = mediaRecorder.mimeType || 'video/webm';
+            const mimeType = mediaRecorder.mimeType || 'video/webm';
+            const type = mimeType.split(';')[0];
             const blob = new Blob(recordedChunks, { type });
             const url = URL.createObjectURL(blob);
+            recordingAudioStream?.getTracks().forEach((t) => t.stop());
+            recordingAudioStream = null;
             recordedChunks = [];
             recordedBytes = 0;
             mediaRecorder = null;

package/dist-js/index.js

@@ -17,6 +17,7 @@ function isMobile() {
 let activeStream = null;
 let activeVideo = null;
 let mediaRecorder = null;
+let recordingAudioStream = null;
 let recordedChunks = [];
 let recordedBytes = 0;
 let recordingStartedAt = 0;
@@ -25,10 +26,28 @@ let progressTimer = null;
 const RECORDING_PROGRESS_INTERVAL_MS = 250;
 /** Ask MediaRecorder for data chunks at least this often so size is known live. */
 const RECORDING_TIMESLICE_MS = 1000;
+/** Picks an explicit recording mime type supported by this browser, if any. */
+function pickDesktopRecordingMimeType() {
+    if (typeof MediaRecorder === 'undefined' || typeof MediaRecorder.isTypeSupported !== 'function') {
+        return undefined;
+    }
+    const candidates = [
+        'video/webm;codecs=vp9,opus',
+        'video/webm;codecs=vp8,opus',
+        'video/webm',
+        'video/mp4'
+    ];
+    return candidates.find((type) => MediaRecorder.isTypeSupported(type));
+}
 function buildRecordingProgress(duration, bytes) {
-    const progress = { duration, bytesRecorded: bytes };
-    if (duration > 0) {
-        progress.bitrate = Math.round((bytes * 8) / duration);
+    // Omit the size-derived fields until a real chunk has arrived, matching the
+    // mobile backends (do not report a misleading 0).
+    const progress = { duration };
+    if (bytes > 0) {
+        progress.bytesRecorded = bytes;
+        if (duration > 0) {
+            progress.bitrate = Math.round((bytes * 8) / duration);
+        }
     }
     return progress;
 }
@@ -71,6 +90,8 @@ function teardownDesktopStream() {
         mediaRecorder.stop();
     }
     mediaRecorder = null;
+    recordingAudioStream?.getTracks().forEach((t) => t.stop());
+    recordingAudioStream = null;
     recordedChunks = [];
     recordedBytes = 0;
     if (activeStream) {
@@ -376,30 +397,44 @@ async function startRecording(options) {
         await invoke('plugin:camera-kessdev|start_recording', { ...options });
         return;
     }
-    if (activeStream) {
-        activeStream.getTracks().forEach((t) => t.stop());
-        activeStream = null;
-        activeVideo = null;
+    // Reuse the active preview video track when possible so the preview is not
+    // invalidated (which would freeze the app's <video> element).
+    let videoTrack = activeStream?.getVideoTracks()[0];
+    if (!videoTrack) {
+        const videoConstraints = {};
+        if (options?.quality)
+            videoConstraints.height = { ideal: qualityHeight(options.quality) };
+        if (options?.fps)
+            videoConstraints.frameRate = { ideal: options.fps };
+        const videoStream = await navigator.mediaDevices.getUserMedia({
+            video: videoConstraints,
+            audio: false
+        });
+        activeStream = videoStream;
+        videoTrack = videoStream.getVideoTracks()[0];
+    }
+    if (!videoTrack) {
+        throw new Error('No video track available for recording.');
     }
-    const videoConstraints = {};
-    if (options?.quality)
-        videoConstraints.height = { ideal: qualityHeight(options.quality) };
-    if (options?.fps)
-        videoConstraints.frameRate = { ideal: options.fps };
-    const stream = await navigator.mediaDevices.getUserMedia({ video: videoConstraints, audio: true });
-    activeStream = stream;
-    const video = document.createElement('video');
-    video.muted = true;
-    video.playsInline = true;
-    video.srcObject = stream;
-    await video.play();
-    activeVideo = video;
+    if (!activeVideo) {
+        const video = document.createElement('video');
+        video.muted = true;
+        video.playsInline = true;
+        video.srcObject = activeStream;
+        await video.play();
+        activeVideo = video;
+    }
+    recordingAudioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    const recordStream = new MediaStream([videoTrack, ...recordingAudioStream.getAudioTracks()]);
     recordedChunks = [];
     recordedBytes = 0;
     const recorderOptions = {};
     if (options?.bitrate)
         recorderOptions.videoBitsPerSecond = options.bitrate;
-    mediaRecorder = new MediaRecorder(stream, recorderOptions);
+    const mimeType = pickDesktopRecordingMimeType();
+    if (mimeType)
+        recorderOptions.mimeType = mimeType;
+    mediaRecorder = new MediaRecorder(recordStream, recorderOptions);
     mediaRecorder.ondataavailable = (event) => {
         if (event.data.size > 0) {
             recordedChunks.push(event.data);
@@ -434,9 +469,12 @@ async function stopRecording(options) {
     stopProgressTimer();
     return await new Promise((resolve, reject) => {
         mediaRecorder.onstop = () => {
-            const type = mediaRecorder.mimeType || 'video/webm';
+            const mimeType = mediaRecorder.mimeType || 'video/webm';
+            const type = mimeType.split(';')[0];
             const blob = new Blob(recordedChunks, { type });
             const url = URL.createObjectURL(blob);
+            recordingAudioStream?.getTracks().forEach((t) => t.stop());
+            recordingAudioStream = null;
             recordedChunks = [];
             recordedBytes = 0;
             mediaRecorder = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tauri-plugin-camera-kessdev",
-  "version": "0.2.0-beta.1",
+  "version": "0.2.0-beta.2",
   "author": "kess",
   "description": "Camera plugin for Tauri v2: photo capture, video recording and preview on Android, iOS and desktop.",
   "license": "MIT",