@dialtribe/react-sdk 0.1.0-alpha.20 → 0.1.0-alpha.21

package/dist/dialtribe-streamer.mjs

@@ -316,6 +316,9 @@ var WebSocketStreamer = class {
     this.isHotSwapping = false;
     // Track if we're swapping media streams
     this.startTime = 0;
+    // Canvas-based rendering for seamless camera flips
+    // MediaRecorder records from canvas stream, so track changes don't affect it
+    this.canvasState = null;
     this.streamKey = options.streamKey;
     this.mediaStream = options.mediaStream;
     this.isVideo = options.isVideo;
@@ -324,6 +327,36 @@ var WebSocketStreamer = class {
     this.onStateChange = options.onStateChange;
     this.onError = options.onError;
   }
+  /**
+   * Calculate scaled dimensions for fitting video into canvas.
+   * @param mode - "contain" fits video inside canvas, "cover" fills canvas (cropping)
+   */
+  calculateScaledDimensions(videoWidth, videoHeight, canvasWidth, canvasHeight, mode) {
+    const videoAspect = videoWidth / videoHeight;
+    const canvasAspect = canvasWidth / canvasHeight;
+    const useWidthBased = mode === "contain" ? videoAspect > canvasAspect : videoAspect <= canvasAspect;
+    if (useWidthBased) {
+      const width = canvasWidth;
+      const height = canvasWidth / videoAspect;
+      return { x: 0, y: (canvasHeight - height) / 2, width, height };
+    } else {
+      const height = canvasHeight;
+      const width = canvasHeight * videoAspect;
+      return { x: (canvasWidth - width) / 2, y: 0, width, height };
+    }
+  }
+  /**
+   * Invalidate cached scaling dimensions (call when video source changes)
+   */
+  invalidateScalingCache() {
+    if (this.canvasState) {
+      this.canvasState.cachedContain = null;
+      this.canvasState.cachedCover = null;
+      this.canvasState.cachedNeedsBackground = false;
+      this.canvasState.lastVideoWidth = 0;
+      this.canvasState.lastVideoHeight = 0;
+    }
+  }
   /**
    * Validate stream key format
    * Stream keys must follow format: {tierCode}{foreignId}_{randomKey}
@@ -350,6 +383,130 @@ var WebSocketStreamer = class {
       isVIP: tierCode === "b" || tierCode === "w"
     });
   }
+  /**
+   * Set up canvas-based rendering pipeline for video streams.
+   * This allows seamless camera flips by changing the video source
+   * without affecting MediaRecorder (which records from the canvas).
+   */
+  setupCanvasRendering() {
+    console.log("\u{1F3A8} Setting up canvas-based rendering for seamless camera flips");
+    const videoTrack = this.mediaStream.getVideoTracks()[0];
+    const settings = videoTrack?.getSettings() || {};
+    const width = settings.width || 1280;
+    const height = settings.height || 720;
+    console.log(`\u{1F4D0} Video dimensions: ${width}x${height}`);
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      throw new Error("Failed to get 2D canvas context - canvas rendering unavailable");
+    }
+    const videoElement = document.createElement("video");
+    videoElement.srcObject = this.mediaStream;
+    videoElement.muted = true;
+    videoElement.playsInline = true;
+    videoElement.play().catch((e) => console.warn("Video autoplay warning:", e));
+    const frameRate = settings.frameRate || 30;
+    const stream = canvas.captureStream(frameRate);
+    const audioTracks = this.mediaStream.getAudioTracks();
+    audioTracks.forEach((track) => {
+      stream.addTrack(track);
+    });
+    console.log(`\u{1F3AC} Canvas stream created with ${frameRate}fps video + ${audioTracks.length} audio track(s)`);
+    this.canvasState = {
+      canvas,
+      ctx,
+      videoElement,
+      stream,
+      renderLoopId: 0,
+      // Will be set below
+      useBlurBackground: true,
+      slowFrameCount: 0,
+      cachedContain: null,
+      cachedCover: null,
+      cachedNeedsBackground: false,
+      lastVideoWidth: 0,
+      lastVideoHeight: 0
+    };
+    const state = this.canvasState;
+    const renderFrame = () => {
+      if (!this.canvasState || state !== this.canvasState) return;
+      const { ctx: ctx2, canvas: canvas2, videoElement: videoElement2 } = state;
+      if (videoElement2.paused) {
+        state.renderLoopId = requestAnimationFrame(renderFrame);
+        return;
+      }
+      const canvasWidth = canvas2.width;
+      const canvasHeight = canvas2.height;
+      const videoWidth = videoElement2.videoWidth;
+      const videoHeight = videoElement2.videoHeight;
+      if (videoWidth === 0 || videoHeight === 0) {
+        state.renderLoopId = requestAnimationFrame(renderFrame);
+        return;
+      }
+      if (videoWidth !== state.lastVideoWidth || videoHeight !== state.lastVideoHeight) {
+        state.lastVideoWidth = videoWidth;
+        state.lastVideoHeight = videoHeight;
+        state.cachedContain = this.calculateScaledDimensions(
+          videoWidth,
+          videoHeight,
+          canvasWidth,
+          canvasHeight,
+          "contain"
+        );
+        state.cachedCover = this.calculateScaledDimensions(
+          videoWidth,
+          videoHeight,
+          canvasWidth,
+          canvasHeight,
+          "cover"
+        );
+        state.cachedNeedsBackground = Math.abs(state.cachedContain.width - canvasWidth) > 1 || Math.abs(state.cachedContain.height - canvasHeight) > 1;
+        console.log(`\u{1F4D0} Video dimensions changed: ${videoWidth}x${videoHeight}, needsBackground: ${state.cachedNeedsBackground}`);
+      }
+      const contain = state.cachedContain;
+      const cover = state.cachedCover;
+      const frameStart = performance.now();
+      if (state.cachedNeedsBackground && state.useBlurBackground) {
+        ctx2.save();
+        ctx2.filter = "blur(20px)";
+        ctx2.drawImage(videoElement2, cover.x, cover.y, cover.width, cover.height);
+        ctx2.restore();
+        ctx2.fillStyle = "rgba(0, 0, 0, 0.5)";
+        ctx2.fillRect(0, 0, canvasWidth, canvasHeight);
+      } else if (state.cachedNeedsBackground) {
+        ctx2.fillStyle = "#000";
+        ctx2.fillRect(0, 0, canvasWidth, canvasHeight);
+      }
+      ctx2.drawImage(videoElement2, contain.x, contain.y, contain.width, contain.height);
+      const frameDuration = performance.now() - frameStart;
+      if (frameDuration > 16 && state.useBlurBackground) {
+        state.slowFrameCount++;
+        if (state.slowFrameCount > 5) {
+          console.log("\u26A1 Disabling blur background for performance");
+          state.useBlurBackground = false;
+        }
+      } else if (frameDuration <= 16) {
+        state.slowFrameCount = 0;
+      }
+      state.renderLoopId = requestAnimationFrame(renderFrame);
+    };
+    state.renderLoopId = requestAnimationFrame(renderFrame);
+    console.log("\u2705 Canvas rendering pipeline ready (with adaptive blur background)");
+    return stream;
+  }
+  /**
+   * Clean up canvas rendering resources
+   */
+  cleanupCanvasRendering() {
+    if (!this.canvasState) return;
+    cancelAnimationFrame(this.canvasState.renderLoopId);
+    this.canvasState.videoElement.pause();
+    this.canvasState.videoElement.srcObject = null;
+    this.canvasState.stream.getTracks().forEach((track) => track.stop());
+    this.canvasState = null;
+  }
   /**
    * Build WebSocket URL from stream key
    */
@@ -369,6 +526,10 @@ var WebSocketStreamer = class {
    */
   async start() {
     try {
+      this.userStopped = false;
+      this.chunksSent = 0;
+      this.bytesSent = 0;
+      this.startTime = 0;
       this.validateStreamKeyFormat();
       this.onStateChange?.("connecting");
       const wsUrl = this.buildWebSocketUrl();
@@ -379,8 +540,15 @@ var WebSocketStreamer = class {
           reject(new Error("WebSocket not initialized"));
           return;
         }
-        this.websocket.addEventListener("open", () => resolve(), { once: true });
+        const timeoutId = setTimeout(() => {
+          reject(new Error(`WebSocket connection timeout. URL: ${wsUrl}`));
+        }, 1e4);
+        this.websocket.addEventListener("open", () => {
+          clearTimeout(timeoutId);
+          resolve();
+        }, { once: true });
         this.websocket.addEventListener("error", (event) => {
+          clearTimeout(timeoutId);
           console.error("\u274C WebSocket error event:", event);
           console.error("\u{1F50D} Connection diagnostics:", {
             url: wsUrl.replace(this.streamKey, "***"),
@@ -399,16 +567,17 @@ Common causes:
 Please check encoder server logs and DATABASE_URL configuration.`
           ));
         }, { once: true });
-        setTimeout(() => {
-          reject(new Error(`WebSocket connection timeout. URL: ${wsUrl}`));
-        }, 1e4);
       });
       console.log("\u2705 WebSocket connected");
       this.setupWebSocketHandlers();
+      const streamToRecord = this.isVideo ? this.setupCanvasRendering() : this.mediaStream;
       const recorderOptions = getMediaRecorderOptions(this.isVideo);
       this.mimeType = recorderOptions.mimeType;
-      this.mediaRecorder = new MediaRecorder(this.mediaStream, recorderOptions);
+      this.mediaRecorder = new MediaRecorder(streamToRecord, recorderOptions);
       console.log("\u{1F399}\uFE0F MediaRecorder created with options:", recorderOptions);
+      if (this.isVideo) {
+        console.log("\u{1F3A8} Recording from canvas stream (enables seamless camera flips)");
+      }
       this.setupMediaRecorderHandlers();
       this.mediaRecorder.start(300);
       this.startTime = Date.now();
@@ -445,9 +614,9 @@ Please check encoder server logs and DATABASE_URL configuration.`
     } else {
       console.log("\u26A0\uFE0F No WebSocket to close");
     }
+    this.cleanupCanvasRendering();
     this.mediaRecorder = null;
     this.websocket = null;
-    this.bytesSent = 0;
     this.onStateChange?.("stopped");
   }
   /**
@@ -456,6 +625,13 @@ Please check encoder server logs and DATABASE_URL configuration.`
   getBytesSent() {
     return this.bytesSent;
   }
+  /**
+   * Get the current source media stream.
+   * This may change after replaceVideoTrack() is called.
+   */
+  getMediaStream() {
+    return this.mediaStream;
+  }
   /**
    * Get current diagnostics
    */
@@ -470,25 +646,41 @@ Please check encoder server logs and DATABASE_URL configuration.`
     };
   }
   /**
-   * Replace the video track in the current MediaStream without stopping MediaRecorder.
-   * This avoids sending a new WebM header, which FFmpeg can't handle mid-stream.
+   * Replace the video track for camera flips.
    *
-   * IMPORTANT: This is the preferred method for camera flips as it maintains
-   * continuous WebM stream without container restarts.
+   * When using canvas-based rendering (video streams), this updates the video
+   * element source. The canvas continues drawing, and MediaRecorder is unaffected.
    *
    * @param newVideoTrack - The new video track from the flipped camera
    */
   replaceVideoTrack(newVideoTrack) {
-    console.log("\u{1F504} Replacing video track (no MediaRecorder restart)");
-    const oldVideoTracks = this.mediaStream.getVideoTracks();
-    this.mediaStream.addTrack(newVideoTrack);
-    console.log("\u2795 New video track added");
-    oldVideoTracks.forEach((track) => {
-      this.mediaStream.removeTrack(track);
-      track.stop();
-    });
-    console.log("\u2796 Old video track(s) removed");
-    console.log("\u2705 Video track replaced - streaming continues seamlessly");
+    console.log("\u{1F504} Replacing video track");
+    if (this.canvasState) {
+      console.log("\u{1F3A8} Using canvas-based swap (MediaRecorder unaffected)");
+      const audioTracks = this.mediaStream.getAudioTracks();
+      const newStream = new MediaStream([newVideoTrack, ...audioTracks]);
+      this.mediaStream.getVideoTracks().forEach((track) => track.stop());
+      this.canvasState.videoElement.srcObject = newStream;
+      this.canvasState.videoElement.play().catch((e) => console.warn("Video play warning:", e));
+      this.mediaStream = newStream;
+      this.invalidateScalingCache();
+      const settings = newVideoTrack.getSettings();
+      if (settings.width && settings.height) {
+        console.log(`\u{1F4D0} New camera resolution: ${settings.width}x${settings.height}`);
+      }
+      console.log("\u2705 Video source swapped - canvas continues seamlessly");
+    } else {
+      console.warn("\u26A0\uFE0F Canvas not available - attempting direct track replacement");
+      const oldVideoTracks = this.mediaStream.getVideoTracks();
+      this.mediaStream.addTrack(newVideoTrack);
+      console.log("\u2795 New video track added");
+      oldVideoTracks.forEach((track) => {
+        this.mediaStream.removeTrack(track);
+        track.stop();
+      });
+      console.log("\u2796 Old video track(s) removed");
+      console.log("\u2705 Video track replaced");
+    }
   }
   /**
    * Replace the audio track in the current MediaStream without stopping MediaRecorder.
@@ -499,88 +691,28 @@ Please check encoder server logs and DATABASE_URL configuration.`
     console.log("\u{1F504} Replacing audio track (no MediaRecorder restart)");
     const oldAudioTracks = this.mediaStream.getAudioTracks();
     this.mediaStream.addTrack(newAudioTrack);
-    console.log("\u2795 New audio track added");
+    console.log("\u2795 New audio track added to source stream");
     oldAudioTracks.forEach((track) => {
       this.mediaStream.removeTrack(track);
       track.stop();
     });
-    console.log("\u2796 Old audio track(s) removed");
-    console.log("\u2705 Audio track replaced - streaming continues seamlessly");
-  }
-  /**
-   * Prepare for a hot-swap by stopping the MediaRecorder
-   * Call this BEFORE requesting a new camera stream on iOS
-   * This prevents iOS Safari from interfering with the active MediaRecorder
-   *
-   * IMPORTANT: This is async because we must wait for the MediaRecorder's 'stop'
-   * event to fire BEFORE proceeding. Otherwise there's a race condition where
-   * the stop event fires after isHotSwapping is set to false, causing the
-   * WebSocket to close unexpectedly.
-   *
-   * @deprecated Prefer replaceVideoTrack() which doesn't restart MediaRecorder
-   */
-  async prepareForHotSwap() {
-    console.log("\u{1F504} Preparing for hot-swap (stopping MediaRecorder first)");
-    this.isHotSwapping = true;
-    if (this.mediaRecorder && this.mediaRecorder.state !== "inactive") {
-      await new Promise((resolve) => {
-        const currentRecorder = this.mediaRecorder;
-        const handleStop = () => {
-          currentRecorder.removeEventListener("stop", handleStop);
-          console.log("\u23F9\uFE0F MediaRecorder stopped - ready for camera switch");
-          resolve();
-        };
-        currentRecorder.addEventListener("stop", handleStop);
-        currentRecorder.stop();
+    console.log("\u2796 Old audio track(s) removed from source stream");
+    if (this.canvasState) {
+      this.canvasState.stream.getAudioTracks().forEach((track) => {
+        this.canvasState.stream.removeTrack(track);
       });
+      this.canvasState.stream.addTrack(newAudioTrack);
+      console.log("\u{1F3A8} Audio track synced to canvas stream");
     }
+    console.log("\u2705 Audio track replaced - streaming continues seamlessly");
   }
   /**
-   * Cancel a prepared hot-swap (e.g., if camera switch failed)
-   * Restarts the MediaRecorder with the existing stream
-   *
-   * @deprecated Prefer replaceVideoTrack() which doesn't restart MediaRecorder
-   */
-  cancelHotSwap() {
-    console.log("\u21A9\uFE0F Canceling hot-swap - restarting with original stream");
-    const recorderOptions = getMediaRecorderOptions(this.isVideo);
-    this.mediaRecorder = new MediaRecorder(this.mediaStream, recorderOptions);
-    this.setupMediaRecorderHandlers();
-    this.mediaRecorder.start(300);
-    this.isHotSwapping = false;
-    console.log("\u2705 Original stream restored");
-  }
-  /**
-   * Complete the hot-swap with a new media stream
-   * Call this AFTER successfully obtaining a new camera stream
-   *
-   * Note: Errors are thrown to the caller, not sent to onError callback
-   * This allows the caller to handle camera flip failures gracefully
-   *
-   * @deprecated Prefer replaceVideoTrack() which doesn't restart MediaRecorder
-   */
-  completeHotSwap(newMediaStream) {
-    console.log("\u{1F504} Completing hot-swap with new stream");
-    this.mediaStream = newMediaStream;
-    const recorderOptions = getMediaRecorderOptions(this.isVideo);
-    this.mediaRecorder = new MediaRecorder(this.mediaStream, recorderOptions);
-    console.log("\u{1F399}\uFE0F New MediaRecorder created");
-    this.setupMediaRecorderHandlers();
-    this.mediaRecorder.start(300);
-    this.isHotSwapping = false;
-    console.log("\u2705 Media stream updated - streaming continues");
-  }
-  /**
-   * Update the media stream (e.g., when flipping camera)
-   * This keeps the WebSocket connection alive while swapping the media source
-   *
-   * Note: On iOS, prefer using prepareForHotSwap() + completeHotSwap() to avoid
-   * issues where getUserMedia interferes with the active MediaRecorder.
-   *
-   * Note: Errors are thrown to the caller, not sent to onError callback
-   * This allows the caller to handle camera flip failures gracefully
+   * Update the media stream (e.g., when switching devices from settings)
+   * This keeps the WebSocket connection alive while swapping the media source.
+   * Restarts the MediaRecorder with the new stream.
    *
-   * @deprecated Prefer replaceVideoTrack() which doesn't restart MediaRecorder
+   * Note: For camera flips, prefer replaceVideoTrack() which doesn't restart MediaRecorder.
+   * Note: Errors are thrown to the caller, not sent to onError callback.
    */
   async updateMediaStream(newMediaStream) {
     console.log("\u{1F504} Updating media stream (hot-swap)");
@@ -590,8 +722,14 @@ Please check encoder server logs and DATABASE_URL configuration.`
       console.log("\u23F9\uFE0F Old MediaRecorder stopped");
     }
     this.mediaStream = newMediaStream;
+    let streamToRecord = this.mediaStream;
+    if (this.isVideo) {
+      this.cleanupCanvasRendering();
+      streamToRecord = this.setupCanvasRendering();
+      console.log("\u{1F3A8} Canvas rendering recreated for new stream");
+    }
     const recorderOptions = getMediaRecorderOptions(this.isVideo);
-    this.mediaRecorder = new MediaRecorder(this.mediaStream, recorderOptions);
+    this.mediaRecorder = new MediaRecorder(streamToRecord, recorderOptions);
     console.log("\u{1F399}\uFE0F New MediaRecorder created");
     this.setupMediaRecorderHandlers();
     this.mediaRecorder.start(300);
@@ -644,7 +782,9 @@ Please check encoder server logs and DATABASE_URL configuration.`
         this.bytesSent += event.data.size;
         this.chunksSent += 1;
         this.onBytesUpdate?.(this.bytesSent);
-        console.log(`\u{1F4E4} Sent chunk #${this.chunksSent}: ${(event.data.size / 1024).toFixed(2)} KB (Total: ${(this.bytesSent / 1024 / 1024).toFixed(2)} MB)`);
+        if (this.chunksSent % 10 === 0) {
+          console.log(`\u{1F4E4} Sent ${this.chunksSent} chunks (${(this.bytesSent / 1024 / 1024).toFixed(2)} MB total)`);
+        }
       }
     });
     this.mediaRecorder.addEventListener("error", (event) => {
@@ -1915,7 +2055,7 @@ function DialtribeStreamer({
     if (!isVideoKey || !hasMultipleCameras) return;
     const newFacingMode = facingMode === "user" ? "environment" : "user";
     if (state === "live" && streamer) {
-      console.log("\u{1F504} Flipping camera during live broadcast (track replacement)");
+      console.log("\u{1F504} Flipping camera during live broadcast (canvas-based swap)");
       try {
         const constraints = getMediaConstraints({
           isVideo: true,
@@ -1927,9 +2067,11 @@ function DialtribeStreamer({
         if (newVideoTrack) {
           streamer.replaceVideoTrack(newVideoTrack);
         }
+        const updatedStream = streamer.getMediaStream();
+        setMediaStream(updatedStream);
         setFacingMode(newFacingMode);
-        if (videoRef.current && mediaStream) {
-          videoRef.current.srcObject = mediaStream;
+        if (videoRef.current) {
+          videoRef.current.srcObject = updatedStream;
         }
         console.log("\u2705 Camera flipped successfully - broadcast continues seamlessly");
       } catch (err) {