agora-rtc-react Screen Sharing to Audience

23 views Asked by At

I am using agora-rtc-react components to share screen. AgoraRTCScreenShareProvider. From the documentation i am able to share screen locally but cannot find any way to share screen to remote users. here is functionality i have already implmented.

//screen share
  const [screenVideoTrack, setScreenVideoTrack] = useState(null);
  const [screenAudioTrack, setScreenAudioTrack] = useState(null);
  //screen share closed
  useTrackEvent(screenVideoTrack, 'track-ended', () => {
    console.log('screen sharing ended');
    setScreenShareOn(false);
  });
 //screen share
  const [screenShareOn, setScreenShareOn] = useState(false);
  //create screen share track
  const {
    screenTrack,
    //  isLoading,
    error: screenShareError
  } = useLocalScreenTrack(screenShareOn, { systemAudio: true }, 'enable');
  //const {videoTracks}= useRemoteVideoTracks(remoteUsers)
  //if screen got error, close screen share
  useEffect(() => {
    setScreenShareOn(false);
  }, [screenShareError]);

  //get screen share video track and audio track
  useEffect(() => {
    if (!screenTrack) {
      setScreenAudioTrack(null);
      setScreenVideoTrack(null);
    } else {
      if (Array.isArray(screenTrack)) {
        setScreenVideoTrack(
          screenTrack.filter((track) => track.trackMediaType === 'video')[0]
        );
        setScreenAudioTrack(
          screenTrack.filter((track) => track.trackMediaType === 'audio')[0]
        );
      } else {
        setScreenVideoTrack(screenTrack);
      }
    }
  }, [screenTrack]);

and here is how i render screen sharing.

<AgoraRTCScreenShareProvider client={client}>
 {screenShareOn ? (
            <>
              {screenVideoTrack && (
                <LocalVideoTrack
                  disabled={!screenShareOn}
                  play={screenShareOn}
                  style={{ width: '100%', height: '100%' }}
                  track={screenVideoTrack}
                />
              )}
              {screenAudioTrack && (
                <LocalAudioTrack
                  disabled={!screenShareOn}
                  track={screenAudioTrack}
                />
              )}
            </>
          ) : <RemoteUsers remoteUsers={remoteUsers}/>

Using LocalVideoTrack i can see screen sharing is working but how that screen will be visible to remote users

0

There are 0 answers