Build a UGC Live Streaming App with Amazon IVS: Adding ScreenSharing to a Web Broadcast (Lesson 3.4)

In lesson 3.3, we saw how StreamCat gives users the ability to broadcast low-latency live streams from their camera and microphone directly in a web browser. In this lesson, we'll see how to enhance that broadcast by adding screensharing capabilities.

If you recall from the previous lessons in this course, the JavaScript function navigator.mediaDevices.getUserMedia() is used to obtain permissions and access a user's cameras and microphones. To create a media stream from the user's desktop, window, or browser tab, there is a similar function called navigator.mediaDevices.getDisplayMedia() (docs). To toggle a screenshare, we check the model variable isSharingScreen, and if this value is false, we can use getDisplayMedia(), to get a MediaStream and addVideoInputDevice() to add that stream to the broadcast. We also update the currentVideoComposition in our model to reduce the size of the user's camera stream, and position it in the bottom right corner of the broadcast. If the user is turning off screensharing, we remove the screenshare video and reset the composition to the default (full frame) composition setting.

In this lesson, we learned how to add screensharing to an Amazon IVS live stream. So far in lesson 3, we've learned a lot about broadcasting to an Amazon IVS channel. In lesson 4, we'll learn more about real-time live streaming and adding multiple hosts to a broadcast. Before that, we'll close out lesson 3 by learning how StreamCat listens for stream state change events (IE: stream started, stream ended) and persists values from those events to the database.