Skip to main content

Send presentation

In the previous lesson we learnt how to receive a presentation from other participants and display it in our interface. Now we will do the reverse. We will add a new button to the interface that, when clicked, will ask the user what they want to share (tab, window or whole screen) and after that, remote users will see that content.

info

Screen sharing from a mobile browser to other devices is not permitted by mobile browsers. 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 web application is still able to receive screen shares from other devices. The limitation only prevents mobile browsers from sending screen shares.

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.

First 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​

Next 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 on the button and change its style:

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

Now we will define the function to be run each time the user clicks 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 the new functionality. The user only have to push the screen share button and the rest of the users will start seeing the shared content.

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