how can share my screen to remote users?

[muhammedanaskhan]

What kind of problem do you need help?

I am building a video call app -

const agoraEngine = useRTCClient(AgoraRTC.createClient({ codec: "vp8", mode: 'rtc' }));
 return (
    <div className="">
      <AgoraRTCProvider client={agoraEngine}>
        <AgoraRTCScreenShareProvider client={agoraEngine}>
          {children}
        </AgoraRTCScreenShareProvider>
      </AgoraRTCProvider>
    </div>
  );

Meeting Page -

 const [isScreenShareOn, setIsScreenShareOn] = useState(false);
 const { screenTrack } = useLocalScreenTrack(isScreenShareOn, {}, "disable");

 {isScreenShareOn && (
             <div className="screen flex-2">
                      <LocalVideoTrack play style={{ width: "100%", height: "100%" }} track={screenTrack} />
             </div>)
}

this is showing screen to local user perfectly, but not to remote users. is there any issue with this, or do I need some other additional hooks to share screen

as in the docs it states for useLocalScreenTrack() that - "This hook lets you create a local video track for screen-sharing. " so i am confused that does it also streams to remote users, what am i missing on?

[guoxianzhe]

@muhammedanaskhan
Because you didn't publish it.

pls refer samples https://github.com/AgoraIO-Extensions/agora-rtc-react/blob/main/examples/basic/src/components/ScreenShare.tsx

[muhammedanaskhan]

 const { data, isConnected } = useJoin(
        {
            appid: appId as string,
            channel: roomId!,
            token: null,
            uid: fetchedUid!,
        },
        true
    );

const remoteUsers = useRemoteUsers();
const { audioTracks } = useRemoteAudioTracks(remoteUsers);
const { videoTracks, error, isLoading } = useRemoteVideoTracks(remoteUsers);

audioTracks.forEach((track) => track.play());

const [isScreenShareOn, setIsScreenShareOn] = useState(false);
const { screenTrack } = useLocalScreenTrack(isScreenShareOn, {}, "disable");

usePublish([localMicrophoneTrack, localCameraTrack]);
usePublish([screenTrack], isScreenShareOn);

return (
           {isScreenShareOn && (
                  <div className="screen flex-2">
                          <LocalVideoTrack
                            play={isScreenShareOn}
                            style={{ width: "100%", height: "100%" }}
                            track={screenTrack} />
                   </div>)
            }

             {remoteUsers.map((user) => (
                <RemoteUser user={user} />
             )}
)

i am facing issues in screen sharing, it only shows screen to remote users once, when i switch the screen share off, it gets stuck on the remote users screen, and, also i want to render the shared screen on to a different component, basically a bigger card, so is there a way to only get the shared screen track rather it being part of all video tracks @guoxianzhe