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

package/dist/{dialtribe-streamer-D9ulVBVb.d.ts → dialtribe-streamer-DOhD-r_F.d.ts}

@@ -224,6 +224,9 @@ declare class WebSocketStreamer {
      * 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).
+     *
+     * This is async to ensure the video is producing frames before returning,
+     * which prevents black initial thumbnails.
      */
     private setupCanvasRendering;
     /**
@@ -258,12 +261,14 @@ declare class WebSocketStreamer {
     /**
      * Replace the video track for camera flips.
      *
-     * When using canvas-based rendering (video streams), this updates the video
-     * element source. The canvas continues drawing, and MediaRecorder is unaffected.
+     * When using canvas-based rendering (video streams), this preloads the new
+     * camera in a temporary video element, waits for it to be ready, then swaps
+     * it in. This ensures continuous frame output with no gaps.
      *
      * @param newVideoTrack - The new video track from the flipped camera
+     * @returns Promise that resolves when the swap is complete
      */
-    replaceVideoTrack(newVideoTrack: MediaStreamTrack): void;
+    replaceVideoTrack(newVideoTrack: MediaStreamTrack): Promise<void>;
     /**
      * Replace the audio track in the current MediaStream without stopping MediaRecorder.
      *

package/dist/{dialtribe-streamer-DH23BseY.d.mts → dialtribe-streamer-Do-8Oavc.d.mts}

@@ -224,6 +224,9 @@ declare class WebSocketStreamer {
      * 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).
+     *
+     * This is async to ensure the video is producing frames before returning,
+     * which prevents black initial thumbnails.
      */
     private setupCanvasRendering;
     /**
@@ -258,12 +261,14 @@ declare class WebSocketStreamer {
     /**
      * Replace the video track for camera flips.
      *
-     * When using canvas-based rendering (video streams), this updates the video
-     * element source. The canvas continues drawing, and MediaRecorder is unaffected.
+     * When using canvas-based rendering (video streams), this preloads the new
+     * camera in a temporary video element, waits for it to be ready, then swaps
+     * it in. This ensures continuous frame output with no gaps.
      *
      * @param newVideoTrack - The new video track from the flipped camera
+     * @returns Promise that resolves when the swap is complete
      */
-    replaceVideoTrack(newVideoTrack: MediaStreamTrack): void;
+    replaceVideoTrack(newVideoTrack: MediaStreamTrack): Promise<void>;
     /**
      * Replace the audio track in the current MediaStream without stopping MediaRecorder.
      *

package/dist/dialtribe-streamer.d.mts

@@ -1,4 +1,4 @@
 export { A as ApiClientConfig, h as AudioWaveform, B as Broadcast, C as CDN_DOMAIN, d as DIALTRIBE_API_BASE, c as DialtribeClient, a as DialtribeContextValue, i as DialtribeOverlay, k as DialtribeOverlayMode, j as DialtribeOverlayProps, e as DialtribePlayer, g as DialtribePlayerErrorBoundary, f as DialtribePlayerProps, D as DialtribeProvider, b as DialtribeProviderProps, E as ENDPOINTS, H as HTTP_STATUS, q as HttpStatusCode, L as LoadingSpinner, m as TranscriptData, l as TranscriptSegment, T as TranscriptWord, o as buildBroadcastCdnUrl, p as buildBroadcastS3KeyPrefix, n as formatTime, u as useDialtribe, r as useDialtribeOptional } from './dialtribe-player-CNriUtNi.mjs';
-export { j as DEFAULT_ENCODER_SERVER_URL, D as DialtribeStreamer, a as DialtribeStreamerProps, M as MediaConstraintsOptions, O as OpenDialtribeStreamerPopupOptions, P as PopupDimensions, w as PopupFallbackMode, f as StreamKeyDisplay, g as StreamKeyDisplayProps, h as StreamKeyInput, i as StreamKeyInputProps, e as StreamingControlState, c as StreamingControls, d as StreamingControlsProps, S as StreamingPreview, b as StreamingPreviewProps, t as UseDialtribeStreamerLauncherOptions, v as UseDialtribeStreamerLauncherReturn, U as UseDialtribeStreamerPopupReturn, W as WebSocketStreamer, k as WebSocketStreamerOptions, r as calculatePopupDimensions, o as checkBrowserCompatibility, m as getMediaConstraints, n as getMediaRecorderOptions, q as openBroadcastPopup, p as openDialtribeStreamerPopup, s as useDialtribeStreamerLauncher, u as useDialtribeStreamerPopup } from './dialtribe-streamer-DH23BseY.mjs';
+export { j as DEFAULT_ENCODER_SERVER_URL, D as DialtribeStreamer, a as DialtribeStreamerProps, M as MediaConstraintsOptions, O as OpenDialtribeStreamerPopupOptions, P as PopupDimensions, w as PopupFallbackMode, f as StreamKeyDisplay, g as StreamKeyDisplayProps, h as StreamKeyInput, i as StreamKeyInputProps, e as StreamingControlState, c as StreamingControls, d as StreamingControlsProps, S as StreamingPreview, b as StreamingPreviewProps, t as UseDialtribeStreamerLauncherOptions, v as UseDialtribeStreamerLauncherReturn, U as UseDialtribeStreamerPopupReturn, W as WebSocketStreamer, k as WebSocketStreamerOptions, r as calculatePopupDimensions, o as checkBrowserCompatibility, m as getMediaConstraints, n as getMediaRecorderOptions, q as openBroadcastPopup, p as openDialtribeStreamerPopup, s as useDialtribeStreamerLauncher, u as useDialtribeStreamerPopup } from './dialtribe-streamer-Do-8Oavc.mjs';
 import 'react/jsx-runtime';
 import 'react';

package/dist/dialtribe-streamer.d.ts

@@ -1,4 +1,4 @@
 export { A as ApiClientConfig, h as AudioWaveform, B as Broadcast, C as CDN_DOMAIN, d as DIALTRIBE_API_BASE, c as DialtribeClient, a as DialtribeContextValue, i as DialtribeOverlay, k as DialtribeOverlayMode, j as DialtribeOverlayProps, e as DialtribePlayer, g as DialtribePlayerErrorBoundary, f as DialtribePlayerProps, D as DialtribeProvider, b as DialtribeProviderProps, E as ENDPOINTS, H as HTTP_STATUS, q as HttpStatusCode, L as LoadingSpinner, m as TranscriptData, l as TranscriptSegment, T as TranscriptWord, o as buildBroadcastCdnUrl, p as buildBroadcastS3KeyPrefix, n as formatTime, u as useDialtribe, r as useDialtribeOptional } from './dialtribe-player-CNriUtNi.js';
-export { j as DEFAULT_ENCODER_SERVER_URL, D as DialtribeStreamer, a as DialtribeStreamerProps, M as MediaConstraintsOptions, O as OpenDialtribeStreamerPopupOptions, P as PopupDimensions, w as PopupFallbackMode, f as StreamKeyDisplay, g as StreamKeyDisplayProps, h as StreamKeyInput, i as StreamKeyInputProps, e as StreamingControlState, c as StreamingControls, d as StreamingControlsProps, S as StreamingPreview, b as StreamingPreviewProps, t as UseDialtribeStreamerLauncherOptions, v as UseDialtribeStreamerLauncherReturn, U as UseDialtribeStreamerPopupReturn, W as WebSocketStreamer, k as WebSocketStreamerOptions, r as calculatePopupDimensions, o as checkBrowserCompatibility, m as getMediaConstraints, n as getMediaRecorderOptions, q as openBroadcastPopup, p as openDialtribeStreamerPopup, s as useDialtribeStreamerLauncher, u as useDialtribeStreamerPopup } from './dialtribe-streamer-D9ulVBVb.js';
+export { j as DEFAULT_ENCODER_SERVER_URL, D as DialtribeStreamer, a as DialtribeStreamerProps, M as MediaConstraintsOptions, O as OpenDialtribeStreamerPopupOptions, P as PopupDimensions, w as PopupFallbackMode, f as StreamKeyDisplay, g as StreamKeyDisplayProps, h as StreamKeyInput, i as StreamKeyInputProps, e as StreamingControlState, c as StreamingControls, d as StreamingControlsProps, S as StreamingPreview, b as StreamingPreviewProps, t as UseDialtribeStreamerLauncherOptions, v as UseDialtribeStreamerLauncherReturn, U as UseDialtribeStreamerPopupReturn, W as WebSocketStreamer, k as WebSocketStreamerOptions, r as calculatePopupDimensions, o as checkBrowserCompatibility, m as getMediaConstraints, n as getMediaRecorderOptions, q as openBroadcastPopup, p as openDialtribeStreamerPopup, s as useDialtribeStreamerLauncher, u as useDialtribeStreamerPopup } from './dialtribe-streamer-DOhD-r_F.js';
 import 'react/jsx-runtime';
 import 'react';

package/dist/dialtribe-streamer.js

@@ -394,8 +394,11 @@ var WebSocketStreamer = class {
    * 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).
+   *
+   * This is async to ensure the video is producing frames before returning,
+   * which prevents black initial thumbnails.
    */
-  setupCanvasRendering() {
+  async setupCanvasRendering() {
     console.log("\u{1F3A8} Setting up canvas-based rendering for seamless camera flips");
     const videoTrack = this.mediaStream.getVideoTracks()[0];
     const settings = videoTrack?.getSettings() || {};
@@ -413,7 +416,27 @@ var WebSocketStreamer = class {
     videoElement.srcObject = this.mediaStream;
     videoElement.muted = true;
     videoElement.playsInline = true;
-    videoElement.play().catch((e) => console.warn("Video autoplay warning:", e));
+    await new Promise((resolve) => {
+      const checkReady = () => {
+        if (videoElement.videoWidth > 0 && videoElement.videoHeight > 0) {
+          console.log(`\u{1F4F9} Video ready: ${videoElement.videoWidth}x${videoElement.videoHeight}`);
+          resolve();
+        } else {
+          requestAnimationFrame(checkReady);
+        }
+      };
+      videoElement.addEventListener("loadeddata", () => {
+        checkReady();
+      }, { once: true });
+      videoElement.play().catch((e) => {
+        console.warn("Video autoplay warning:", e);
+        resolve();
+      });
+      setTimeout(() => {
+        console.warn("\u26A0\uFE0F Video ready timeout - continuing anyway");
+        resolve();
+      }, 2e3);
+    });
     const frameRate = settings.frameRate || 30;
     const stream = canvas.captureStream(frameRate);
     const audioTracks = this.mediaStream.getAudioTracks();
@@ -436,13 +459,28 @@ var WebSocketStreamer = class {
       lastVideoWidth: 0,
       lastVideoHeight: 0
     };
+    if (videoElement.videoWidth > 0 && videoElement.videoHeight > 0) {
+      const vw = videoElement.videoWidth;
+      const vh = videoElement.videoHeight;
+      const cw = canvas.width;
+      const ch = canvas.height;
+      const scale = Math.min(cw / vw, ch / vh);
+      const sw = vw * scale;
+      const sh = vh * scale;
+      const sx = (cw - sw) / 2;
+      const sy = (ch - sh) / 2;
+      ctx.fillStyle = "#000";
+      ctx.fillRect(0, 0, cw, ch);
+      ctx.drawImage(videoElement, sx, sy, sw, sh);
+      console.log("\u{1F5BC}\uFE0F Drew first frame synchronously to prevent black thumbnail");
+    }
     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;
+        videoElement2.play().catch(() => {
+        });
       }
       const canvasWidth = canvas2.width;
       const canvasHeight = canvas2.height;
@@ -577,7 +615,7 @@ Please check encoder server logs and DATABASE_URL configuration.`
       });
       console.log("\u2705 WebSocket connected");
       this.setupWebSocketHandlers();
-      const streamToRecord = this.isVideo ? this.setupCanvasRendering() : this.mediaStream;
+      const streamToRecord = this.isVideo ? await this.setupCanvasRendering() : this.mediaStream;
       const recorderOptions = getMediaRecorderOptions(this.isVideo);
       this.mimeType = recorderOptions.mimeType;
       this.mediaRecorder = new MediaRecorder(streamToRecord, recorderOptions);
@@ -655,20 +693,70 @@ Please check encoder server logs and DATABASE_URL configuration.`
   /**
    * Replace the video track for camera flips.
    *
-   * When using canvas-based rendering (video streams), this updates the video
-   * element source. The canvas continues drawing, and MediaRecorder is unaffected.
+   * When using canvas-based rendering (video streams), this preloads the new
+   * camera in a temporary video element, waits for it to be ready, then swaps
+   * it in. This ensures continuous frame output with no gaps.
    *
    * @param newVideoTrack - The new video track from the flipped camera
+   * @returns Promise that resolves when the swap is complete
    */
-  replaceVideoTrack(newVideoTrack) {
+  async replaceVideoTrack(newVideoTrack) {
     console.log("\u{1F504} Replacing video track");
     if (this.canvasState) {
-      console.log("\u{1F3A8} Using canvas-based swap (MediaRecorder unaffected)");
+      console.log("\u{1F3A8} Using canvas-based swap with preloading (no frame gaps)");
       const audioTracks = this.mediaStream.getAudioTracks();
       const newStream = new MediaStream([newVideoTrack, ...audioTracks]);
+      const preloadVideo = document.createElement("video");
+      preloadVideo.srcObject = newStream;
+      preloadVideo.muted = true;
+      preloadVideo.playsInline = true;
+      await new Promise((resolve, reject) => {
+        const timeout = setTimeout(() => {
+          console.warn("\u26A0\uFE0F Video preload timeout - switching anyway");
+          if (preloadVideo.paused) {
+            preloadVideo.play().catch(() => {
+            });
+          }
+          resolve();
+        }, 3e3);
+        const checkFullyReady = () => {
+          if (preloadVideo.videoWidth > 0 && preloadVideo.videoHeight > 0 && !preloadVideo.paused) {
+            clearTimeout(timeout);
+            console.log(`\u{1F4F9} New camera ready and playing: ${preloadVideo.videoWidth}x${preloadVideo.videoHeight}`);
+            resolve();
+            return true;
+          }
+          return false;
+        };
+        preloadVideo.addEventListener("loadeddata", () => {
+          preloadVideo.play().then(() => {
+            requestAnimationFrame(() => {
+              if (!checkFullyReady()) {
+                const pollPlaying = setInterval(() => {
+                  if (checkFullyReady()) {
+                    clearInterval(pollPlaying);
+                  }
+                }, 50);
+                setTimeout(() => clearInterval(pollPlaying), 2e3);
+              }
+            });
+          }).catch((e) => {
+            console.warn("Video preload play warning:", e);
+            checkFullyReady();
+          });
+        }, { once: true });
+        preloadVideo.addEventListener("error", (e) => {
+          clearTimeout(timeout);
+          reject(new Error(`Video preload failed: ${e}`));
+        }, { once: true });
+        preloadVideo.play().catch(() => {
+        });
+      });
+      const oldVideoElement = this.canvasState.videoElement;
+      this.canvasState.videoElement = preloadVideo;
       this.mediaStream.getVideoTracks().forEach((track) => track.stop());
-      this.canvasState.videoElement.srcObject = newStream;
-      this.canvasState.videoElement.play().catch((e) => console.warn("Video play warning:", e));
+      oldVideoElement.pause();
+      oldVideoElement.srcObject = null;
       this.mediaStream = newStream;
       this.invalidateScalingCache();
       const settings = newVideoTrack.getSettings();
@@ -732,7 +820,7 @@ Please check encoder server logs and DATABASE_URL configuration.`
     let streamToRecord = this.mediaStream;
     if (this.isVideo) {
       this.cleanupCanvasRendering();
-      streamToRecord = this.setupCanvasRendering();
+      streamToRecord = await this.setupCanvasRendering();
       console.log("\u{1F3A8} Canvas rendering recreated for new stream");
     }
     const recorderOptions = getMediaRecorderOptions(this.isVideo);
@@ -2072,7 +2160,7 @@ function DialtribeStreamer({
         console.log("\u{1F4F7} Got new camera stream:", newFacingMode);
         const newVideoTrack = newStream.getVideoTracks()[0];
         if (newVideoTrack) {
-          streamer.replaceVideoTrack(newVideoTrack);
+          await streamer.replaceVideoTrack(newVideoTrack);
         }
         const updatedStream = streamer.getMediaStream();
         setMediaStream(updatedStream);