Rendering Screenshare Tracks

Overview

In the previous lesson, you learned how to obtain a MediaStream from your available devices. Now, let's take the next step and create an HTML page that empowers you to select the display you wish to share, along with some user interface components to facilitate the screensharing process.

First, create an index.html HTML file that contains a screen sharing button.

Complete the screensharing

Having successfully created a screensharing page, it's now time to integrate the HTML page with the necessary scripts for screensharing. To get started, add an event listener for the start button as shown below:

As you can see the above code, you can add an event listener to detect click event from user and handle them with the shareScreen and onCatch functions.

Now let’s complete the shareScreen and onCatch functions to set video source and handle error cases.

As demonstrated in the example above, once you have selected an available media stream, it will be set as the video source.

Additionally, by incorporating an ended event listener to the video track, you can effectively detect whether the screensharing session was terminated by the user or not.

Running the WebRTC demo application

Now it’s time to run the demo application. If you execute the index.html file, you will see the demo below:

If you click the Start button, you’ll able to see the window selector that allows you to choose which screen should be sharing:

Next, if you click the Share button on the window, your screen will be shared as shown below:

This tutorial concludes how to share your screens with available options.

Note: You can demonstrate and test the sample application about Screensharing on your web browser without building the project.