chore: allow toggling video/audio of remove video file (#2022)

Adds buttons for toggling the audio/video of the remote file.

<img width="1986" height="586" alt="Screenshot 2025-11-27 at 15 28 35"
src="https://github.com/user-attachments/assets/be41ffdd-32bf-473e-ab1b-5ae07fbed572"
/>

Author: oliverlaz

sample-apps/react/react-dogfood/components/ActiveCall.tsx

@@ -59,6 +59,10 @@ import { StepNames, useTourContext } from '../context/TourContext';
 import { useNotificationSounds } from '../hooks/useNotificationSounds';
 import { usePipWindow } from '../hooks/usePipWindow';
 import { StagePip } from './StagePip';
+import {
+  RemoteVideoControls,
+  useRemoteFilePublisher,
+} from './RemoteFilePublisher';
 
 export type ActiveCallProps = {
   chatClient?: StreamChat | null;
@@ -152,6 +156,8 @@ export const ActiveCall = (props: ActiveCallProps) => {
   } = usePipWindow('@pronto/pip');
   useNotificationSounds();
 
+  const remoteFilePublisherAPI = useRemoteFilePublisher();
+
   return (
     <div className="rd__call">
       {isDemoEnvironment && <TourPanel highlightClass="rd__highlight" />}
@@ -273,6 +279,10 @@ export const ActiveCall = (props: ActiveCallProps) => {
             </div>
           </div>
           <div className="str-video__call-controls--group str-video__call-controls--media">
+            {remoteFilePublisherAPI && (
+              <RemoteVideoControls api={remoteFilePublisherAPI} />
+            )}
+
             <ToggleDualMicButton />
             <ToggleDualCameraButton />
             <div className="str-video__call-controls__desktop">

sample-apps/react/react-dogfood/components/MeetingUI.tsx

@@ -25,7 +25,11 @@ import { DefaultAppHeader } from './DefaultAppHeader';
 import { Feedback } from './Feedback/Feedback';
 import { Lobby, UserMode } from './Lobby';
 import { getRandomName, sanitizeUserId } from '../lib/names';
-import { publishRemoteFile } from '../lib/remoteFilePublisher';
+import {
+  publishRemoteFile,
+  RemoteFilePublisher,
+  RemoteFilePublisherContext,
+} from './RemoteFilePublisher';
 import { applyQueryConfigParams } from '../lib/queryConfigParams';
 
 const contents = {
@@ -41,6 +45,7 @@ type MeetingUIProps = {
   chatClient?: StreamChat | null;
   mode?: UserMode;
 };
+
 export const MeetingUI = ({ chatClient, mode }: MeetingUIProps) => {
   const [show, setShow] = useState<
     'lobby' | 'error-join' | 'error-leave' | 'loading' | 'active-call' | 'left'
@@ -54,6 +59,8 @@ export const MeetingUI = ({ chatClient, mode }: MeetingUIProps) => {
     settings: { deviceSelectionPreference },
   } = useSettings();
   const isRestricted = useIsRestrictedEnvironment();
+  const [remoteFilePublisherAPI, setRemoteFilePublisherAPI] =
+    useState<RemoteFilePublisher>();
 
   const onJoin = useCallback(
     async (options: { fastJoin?: boolean; displayName?: string } = {}) => {
@@ -73,7 +80,8 @@ export const MeetingUI = ({ chatClient, mode }: MeetingUIProps) => {
           }
 
           if (videoFile) {
-            await publishRemoteFile(call, videoFile);
+            const api = await publishRemoteFile(call, videoFile);
+            setRemoteFilePublisherAPI(api);
           } else {
             await call.join({ create: !isRestricted });
           }
@@ -184,12 +192,14 @@ export const MeetingUI = ({ chatClient, mode }: MeetingUIProps) => {
     );
   } else {
     childrenToRender = (
-      <ActiveCall
-        activeCall={call}
-        chatClient={chatClient}
-        onLeave={onLeave}
-        onJoin={() => onJoin()}
-      />
+      <RemoteFilePublisherContext.Provider value={remoteFilePublisherAPI}>
+        <ActiveCall
+          activeCall={call}
+          chatClient={chatClient}
+          onLeave={onLeave}
+          onJoin={() => onJoin()}
+        />
+      </RemoteFilePublisherContext.Provider>
     );
   }
 

sample-apps/react/react-dogfood/components/RemoteFilePublisher.tsx

@@ -0,0 +1,107 @@
+import { createContext, useContext } from 'react';
+import clsx from 'clsx';
+import {
+  Call,
+  hasAudio,
+  hasVideo,
+  SfuModels,
+  useCallStateHooks,
+} from '@stream-io/video-react-sdk';
+
+export type RemoteFilePublisher = {
+  publish: (...trackTypes: SfuModels.TrackType[]) => Promise<void>;
+  unpublish: (...trackTypes: SfuModels.TrackType[]) => Promise<void>;
+  videoElement: HTMLVideoElement;
+};
+
+export const RemoteFilePublisherContext = createContext<
+  RemoteFilePublisher | undefined
+>(undefined);
+
+export const useRemoteFilePublisher = () => {
+  return useContext(RemoteFilePublisherContext);
+};
+
+export const publishRemoteFile = async (
+  call: Call,
+  videoFileUrl: string,
+): Promise<RemoteFilePublisher> => {
+  const videoElement = document.createElement('video');
+  videoElement.crossOrigin = 'anonymous';
+  videoElement.muted = true;
+  videoElement.autoplay = true;
+  videoElement.loop = true;
+  videoElement.src = videoFileUrl;
+
+  await videoElement.play();
+
+  await call.microphone.disable();
+  await call.camera.disable();
+
+  // @ts-expect-error - captureStream is not in the type definitions yet
+  const stream: MediaStream = videoElement.captureStream();
+
+  const publish = async (...trackTypes: SfuModels.TrackType[]) => {
+    if (trackTypes.includes(SfuModels.TrackType.AUDIO)) {
+      await call.publish(stream, SfuModels.TrackType.AUDIO);
+    }
+    if (trackTypes.includes(SfuModels.TrackType.VIDEO)) {
+      await call.publish(stream, SfuModels.TrackType.VIDEO);
+    }
+  };
+
+  const unpublish = async (...trackTypes: SfuModels.TrackType[]) => {
+    await call.stopPublish(...trackTypes);
+  };
+
+  await call.join({ create: true });
+  await publish(SfuModels.TrackType.AUDIO, SfuModels.TrackType.VIDEO);
+
+  return { publish, unpublish, videoElement };
+};
+
+export const RemoteVideoControls = (props: { api: RemoteFilePublisher }) => {
+  const { api } = props;
+  const { useLocalParticipant } = useCallStateHooks();
+  const localParticipant = useLocalParticipant();
+  const isPublishingVideo = localParticipant && hasVideo(localParticipant);
+  const isPublishingAudio = localParticipant && hasAudio(localParticipant);
+  return (
+    <>
+      <button
+        data-testid="vf-video-toggle"
+        type="button"
+        className={clsx('rd__button', {
+          'rd__button--primary': isPublishingVideo,
+          'rd__button--secondary': !isPublishingVideo,
+        })}
+        onClick={async () => {
+          if (isPublishingVideo) {
+            await api.unpublish(SfuModels.TrackType.VIDEO);
+          } else {
+            await api.publish(SfuModels.TrackType.VIDEO);
+          }
+        }}
+      >
+        Video
+      </button>
+      <button
+        data-testid="vf-audio-toggle"
+        type="button"
+        className={clsx('rd__button', {
+          'rd__button--primary': isPublishingAudio,
+          'rd__button--secondary': !isPublishingAudio,
+        })}
+        onClick={async () => {
+          if (isPublishingAudio) {
+            await api.unpublish(SfuModels.TrackType.AUDIO);
+          } else {
+            await api.publish(SfuModels.TrackType.AUDIO);
+          }
+        }}
+      >
+        Audio
+      </button>
+    </>
+  );
+};

sample-apps/react/react-dogfood/lib/remoteFilePublisher.ts

@@ -29,7 +29,7 @@ import {
 } from '../../../lib/getServerSideCredentialsProps';
 import { IncomingVideoSettingsButton } from '../../../components/IncomingVideoSettings';
 import appTranslations from '../../../translations';
-import { publishRemoteFile } from '../../../lib/remoteFilePublisher';
+import { publishRemoteFile } from '../../../components/RemoteFilePublisher';
 import { applyQueryConfigParams } from '../../../lib/queryConfigParams';
 
 export default function BareCallRoom(props: ServerSideCredentialsProps) {