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

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();
@@ -429,13 +452,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;
@@ -570,7 +608,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 +686,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();
@@ -725,7 +813,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 +2153,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);