@cinecrew/cinecrew-player 0.1.9 → 0.1.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cinecrew/cinecrew-player",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "type": "module",
   "description": "Customizable cross-platform live and on-demand video player for React and React Native.",
   "license": "MIT",

package/src/native/media/web/useWebOgvPlayback.web.js

@@ -150,6 +150,33 @@ function applyPlayerStyle(stage, frame, player, playerStyle) {
   });
 }
 
+function createOgvRecordingAudioRoute() {
+  const AudioContextClass = window.AudioContext || window.webkitAudioContext;
+  if (!AudioContextClass) return null;
+
+  let audioContext;
+  try {
+    audioContext = new AudioContextClass();
+    const output = audioContext.createGain();
+    const recordingDestination = audioContext.createMediaStreamDestination();
+    output.connect(audioContext.destination);
+    output.connect(recordingDestination);
+
+    return {
+      audioContext,
+      audioDestination: output,
+      stream: recordingDestination.stream,
+      cleanup: () => {
+        recordingDestination.stream.getTracks().forEach((track) => track.stop());
+        if (audioContext.state !== 'closed') audioContext.close().catch(() => {});
+      },
+    };
+  } catch {
+    if (audioContext && audioContext.state !== 'closed') audioContext.close().catch(() => {});
+    return null;
+  }
+}
+
 /**
  * Use ogv.js for Ogg/Theora media on web, while keeping the returned media-like
  * player in videoRef so the shared controls, progress, and recording logic work.
@@ -191,6 +218,7 @@ export function useWebOgvPlayback({
     let player = null;
     let playerFrame = null;
     let resizeObserver = null;
+    let recordingAudioRoute = null;
     const reportError = (error) => {
       if (disposed) return;
       onBufferingRef?.current?.(false);
@@ -227,10 +255,20 @@ export function useWebOgvPlayback({
         }
 
         OGVLoader.base = resolvedBase;
+        recordingAudioRoute = createOgvRecordingAudioRoute();
         player = new OGVPlayer({
           base: resolvedBase,
           worker: true,
+          ...(recordingAudioRoute ? {
+            audioContext: recordingAudioRoute.audioContext,
+            audioDestination: recordingAudioRoute.audioDestination,
+          } : {}),
         });
+        if (recordingAudioRoute) {
+          player.__cinecrewRecordingAudioStream = recordingAudioRoute.stream;
+          player.__cinecrewRecordingAudioContext = recordingAudioRoute.audioContext;
+          player.__cinecrewRecordingCanvas = player.querySelector('canvas') || player._view;
+        }
         player.className = 'cinecrew-player__video';
         playerFrame = document.createElement('div');
         playerFrame.className = 'cinecrew-player__ogv-frame';
@@ -283,6 +321,7 @@ export function useWebOgvPlayback({
         try { player.remove(); } catch {}
         if (videoRef.current === player) videoRef.current = null;
       }
+      recordingAudioRoute?.cleanup();
       if (playerFrameRef.current === playerFrame) playerFrameRef.current = null;
     };
   }, [activeUrl, useOgv, playerContainerRef, videoRef, pausedRef, onErrorRef, onBufferingRef, resourceBase, onProgressRef, onPlayingRef, onEndedRef, onPlaybackRouteRef]);

package/src/utils/webRecording.js

@@ -19,8 +19,8 @@ function drawVideoFrame(context, canvas, video, aspectRatio) {
 
   const ratio = parseRatio(aspectRatio);
   const frame = fitRect(width, height, ratio);
-  const sourceWidth = video.videoWidth;
-  const sourceHeight = video.videoHeight;
+  const sourceWidth = video.videoWidth || video.width;
+  const sourceHeight = video.videoHeight || video.height;
   if (!sourceWidth || !sourceHeight) return;
 
   const mode = String(aspectRatio || 'FIT').toUpperCase();
@@ -48,6 +48,33 @@ function drawVideoFrame(context, canvas, video, aspectRatio) {
   context.drawImage(video, frame.x + (frame.width - drawWidth) / 2, frame.y + (frame.height - drawHeight) / 2, drawWidth, drawHeight);
 }
 
+function isCrossOriginCaptureError(error) {
+  return error?.name === 'SecurityError' || /cross.?origin|security/i.test(error?.message || '');
+}
+
+function captureSourceStream(video, capture, ogvCanvas) {
+  try {
+    if (typeof capture === 'function') return capture.call(video);
+    return ogvCanvas.captureStream(30);
+  } catch (error) {
+    if (isCrossOriginCaptureError(error)) return null;
+    throw error;
+  }
+}
+
+function getRecordingAudioTracks(video, sourceStream, additionalAudioStream) {
+  const suppliedTracks = additionalAudioStream?.getAudioTracks?.() || [];
+  if (suppliedTracks.length) return suppliedTracks;
+
+  const ogvTracks = video.__cinecrewRecordingAudioStream?.getAudioTracks?.() || [];
+  if (ogvTracks.length) return ogvTracks;
+  return sourceStream.getAudioTracks();
+}
+
+function stopStreamTracks(stream) {
+  stream.getTracks().forEach((track) => track.stop());
+}
+
 /** Capture the visible media frame (not player chrome) and preserve its audio tracks.
  *  Returns `null` when cross-origin restrictions prevent direct capture so the
  *  caller can fall back to screen/tab capture via `createScreenRecordingStream`.
@@ -57,26 +84,20 @@ export function createVideoRecordingStream(video, playerElement, getAspectRatio,
   if (!video || typeof MediaStream === 'undefined') {
     throw new Error('This browser does not support recording this media element.');
   }
+  const ogvCanvas = typeof capture !== 'function' ? video.__cinecrewRecordingCanvas : null;
 
   // captureStream may not exist on every browser / element combination.
-  if (typeof capture !== 'function') {
+  if (typeof capture !== 'function' && typeof ogvCanvas?.captureStream !== 'function') {
     return null;
   }
 
-  let sourceStream;
-  try {
-    sourceStream = capture.call(video);
-  } catch (error) {
-    if (error?.name === 'SecurityError' || /cross.?origin|security/i.test(error?.message || '')) {
-      // Cross-origin media without CORS – let the caller fall back to screen capture.
-      return null;
-    }
-    throw error;
-  }
-  const extraAudioTracks = additionalAudioStream?.getAudioTracks?.() || [];
-  const audioTracks = extraAudioTracks.length ? extraAudioTracks : sourceStream.getAudioTracks();
+  // Cross-origin media without CORS lets the caller fall back to screen capture.
+  const sourceStream = captureSourceStream(video, capture, ogvCanvas);
+  if (!sourceStream) return null;
+  const audioTracks = getRecordingAudioTracks(video, sourceStream, additionalAudioStream);
+  const drawable = ogvCanvas || video;
   const bounds = playerElement?.getBoundingClientRect?.();
-  const outputWidth = Math.max(2, video.videoWidth || Math.round(bounds?.width || 640));
+  const outputWidth = Math.max(2, video.videoWidth || drawable.width || Math.round(bounds?.width || 640));
   const playerRatio = bounds?.width && bounds?.height ? bounds.width / bounds.height : 16 / 9;
   const outputHeight = Math.max(2, Math.round(outputWidth / playerRatio));
   const canvas = document.createElement('canvas');
@@ -84,13 +105,13 @@ export function createVideoRecordingStream(video, playerElement, getAspectRatio,
   canvas.height = outputHeight;
   const context = canvas.getContext('2d');
   if (!context || typeof canvas.captureStream !== 'function') {
-    sourceStream.getTracks().forEach((track) => track.stop());
+    stopStreamTracks(sourceStream);
     throw new Error('Canvas recording is not supported in this browser.');
   }
 
   let originClean = false;
   try {
-    drawVideoFrame(context, canvas, video, getAspectRatio());
+    drawVideoFrame(context, canvas, drawable, getAspectRatio());
     context.getImageData(0, 0, 1, 1);
     originClean = true;
   } catch {
@@ -99,7 +120,7 @@ export function createVideoRecordingStream(video, playerElement, getAspectRatio,
   }
 
   if (!originClean) {
-    sourceStream.getTracks().forEach((track) => track.stop());
+    stopStreamTracks(sourceStream);
     return null;
   }
 
@@ -111,7 +132,7 @@ export function createVideoRecordingStream(video, playerElement, getAspectRatio,
       stream,
       aspectRatioApplied: false,
       cleanup: () => {
-        sourceStream.getTracks().forEach((track) => track.stop());
+        stopStreamTracks(sourceStream);
       },
     };
   }
@@ -120,7 +141,7 @@ export function createVideoRecordingStream(video, playerElement, getAspectRatio,
   const stream = new MediaStream([...canvasStream.getVideoTracks(), ...audioTracks]);
   let frameId;
   const draw = () => {
-    drawVideoFrame(context, canvas, video, getAspectRatio());
+    drawVideoFrame(context, canvas, drawable, getAspectRatio());
     frameId = requestAnimationFrame(draw);
   };
   frameId = requestAnimationFrame(draw);
@@ -129,8 +150,8 @@ export function createVideoRecordingStream(video, playerElement, getAspectRatio,
     aspectRatioApplied: true,
     cleanup: () => {
       cancelAnimationFrame(frameId);
-      canvasStream.getTracks().forEach((track) => track.stop());
-      sourceStream.getTracks().forEach((track) => track.stop());
+      stopStreamTracks(canvasStream);
+      stopStreamTracks(sourceStream);
     },
   };
 }