CODEWITHSUNDEEP
reactjsagora.ioagora
Muhammad Sami
Muhammad Sami

Reputation: 550

agora-rtc-react Screen Sharing to Audience

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

Upvotes: 0

Views: 173

Answers (1)

Jokanola
Jokanola

Reputation: 88

You can access it from the remote users

import { useRemoteUsers, useRemoteVideoTracks, useRemoteAudioTracks } from "agora-rtc-react";

function App() {
const remoteUsers = useRemoteUsers();
const { videoTracks } = useRemoteVideoTracks(
// Remove the local user's screen-sharing video track from the 
subscription list
remoteUsers.filter(user => user.uid !== appConfig.ShareScreenUID),
);
const { audioTracks } = useRemoteAudioTracks(
// Remove the local user's screen-sharing audio track from the 
subscription list
remoteUsers.filter(user => user.uid !== appConfig.ShareScreenUID),
);

return <></>;
}

https://github.com/AgoraIO-Extensions/agora-rtc-react/blob/main/packages/agora-rtc-react/docs/hooks/useLocalScreenTrack.en-US.mdx

Upvotes: 0

Related Questions