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

package/dist/dialtribe-streamer.mjs

@@ -387,8 +387,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() || {};
@@ -406,7 +409,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();
@@ -570,7 +593,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);
@@ -648,20 +671,50 @@ 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");
+          resolve();
+        }, 3e3);
+        preloadVideo.addEventListener("loadeddata", () => {
+          if (preloadVideo.videoWidth > 0 && preloadVideo.videoHeight > 0) {
+            clearTimeout(timeout);
+            console.log(`\u{1F4F9} New camera ready: ${preloadVideo.videoWidth}x${preloadVideo.videoHeight}`);
+            resolve();
+          }
+        }, { once: true });
+        preloadVideo.addEventListener("error", (e) => {
+          clearTimeout(timeout);
+          reject(new Error(`Video preload failed: ${e}`));
+        }, { once: true });
+        preloadVideo.play().catch((e) => {
+          clearTimeout(timeout);
+          console.warn("Video preload play warning:", e);
+          resolve();
+        });
+      });
       this.mediaStream.getVideoTracks().forEach((track) => track.stop());
-      this.canvasState.videoElement.srcObject = newStream;
-      this.canvasState.videoElement.play().catch((e) => console.warn("Video play warning:", e));
+      const oldVideoElement = this.canvasState.videoElement;
+      this.canvasState.videoElement = preloadVideo;
+      oldVideoElement.pause();
+      oldVideoElement.srcObject = null;
       this.mediaStream = newStream;
       this.invalidateScalingCache();
       const settings = newVideoTrack.getSettings();
@@ -725,7 +778,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);
@@ -2065,7 +2118,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);