Changes

Co-authored-by: Reifonas <211114984+Reifonas@users.noreply.github.com>

src/components/ShareButton.tsx

@@ -91,6 +91,24 @@ export function ShareButton({ variant = 'default', autoOpen, onHandleChange, onV
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [handle]);
 
+  // When the XR mirror canvas appears/changes (entering or exiting AR), swap the
+  // outgoing video track so viewers see the opaque mirror instead of the transparent main canvas.
+  useEffect(() => {
+    if (!handle) return;
+    const swapTo = (canvas: HTMLCanvasElement | null) => {
+      if (!canvas || typeof canvas.captureStream !== 'function') return;
+      const newStream = canvas.captureStream(24);
+      const oldStream = streamRef.current;
+      streamRef.current = newStream;
+      handle.replaceVideoTrack(newStream).catch((e) => console.warn('replaceVideoTrack', e));
+      if (oldStream) oldStream.getTracks().forEach((t) => t.stop());
+    };
+    // Apply current value immediately if mirror is already up
+    const current = getBroadcastSource();
+    if (current) swapTo(current);
+    return onBroadcastSourceChange(swapTo);
+  }, [handle]);
+
   // Cleanup on unmount
   useEffect(() => {
     return () => {