Skip to main content

Send presentation

In the previous lesson we have learnt how to receive a presentation from other participant and display it in our interface. Now we will do it the other way around. We will add a new button to the interface that, by clicking on it, we will ask the user what he wants to share (tab, window or whole screen) and after that, the remote users will see that content.

info

Screen sharing from a mobile browser to other device is not available. The mobile browsers don't support this feature due to security restrictions. If you want to use this feature in a mobile, you will need to create a native application using our Mobile SDKs.

However, a mobile will still be able to receive the screen shared from other device. The limitation applies only if the mobile is the one that captures the screen.

You can download the starter code from Step.05-Exercise-Send-presentation.

App component​

We will start by making some modifications in the src/App.js file.

We will define the functions onScreenshareConnected and onScreenshareStopped and attach them to pexRTC.

As always, we will make this modification in the getPexRTC() function:

pexRTC.onScreenshareConnected = handleScreenshareConnected;
pexRTC.onScreenshareStopped = handleScreenshareStopped;

Now we will define these functions:

const handleScreenshareConnected = (stream) => {
  setPresentationStream(stream);
};

const handleScreenshareStopped = (reason) => {
  setPresentationStream(null);
};

This function will attach the new MediaStream application or remove it if the user stops sharing their screen.

Toolbar component​

Now we will modify the file src/components/Conference/Toolbar/Toolbar.js and create the button that the user will use to start or stop sharing their screen.

The first step is to define a new state that indicates if the screen share feature is active or not. This state will act over the button and change its style.

const [screenShared, setScreenShared] = useState(false);

Now we will define the function to be run each time the user click on the screen share button:

const handleScreenShare = () => {
  if (screenShared) {
    props.pexRTC.present(null);
  } else {
    props.pexRTC.present("screen");
  }
  setScreenShared(!screenShared);
};

The final step is to return the button itself with the rest of the components from the toolbar:

<Button
  onClick={handleScreenShare}
  selected={screenShared}
  icon={<ScreenShareIcon />}
/>

At this point the application is working, but we can introduce a further improvement. The screen share can be disabled in two different ways:

  • By clicking on the app button again that was used to start the screen share.
  • By clicking on the browser message "Stop sharing".

We don't have any problem with the first method, but for supporting the second method we have to add additional code.

The first thing that we have to do is to check if the screenShared is enabled from the app point of view and compare it with the value that pexRTC provides. If it's needed, we disable screen share at app level.

useEffect(() => {
  // In case the user use the browser stop sharing button
  if (!props.pexRTC.screenshare_requested && screenShared) {
    setScreenShared(false);
  }
}, [props.pexRTC.screenshare_requested, screenShared])

With this final modification the screen share feature is working as expected.

Run the app​

Now we have all in place to test our functionality of sharing the screen.

You can compare your code with the solution in Step.05-Solution-Send-presentation. You can also check the differences with the previous lesson in the git diff.

Send Presentation