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

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

Welcome to Lesson 3.4 in this series where we're looking at building a web based user-generated content live streaming application with Amazon IVS. This entire series is available in video format on the AWS Developers YouTube channel and all of the code related to the sample application used in this series can be viewed on GitHub. Refer to the links at the end of the post for more information.

TS
Todd Sharp
Amazon Employee
Published Dec 14, 2023

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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
async toggleScreenShare() {
const broadcastClient = Alpine.raw(this.broadcastClient);
const streamConfig =
this.channel.isPartner ?
IVSBroadcastClient.STANDARD_LANDSCAPE :
IVSBroadcastClient.BASIC_FULL_HD_LANDSCAPE;
const preview = document.getElementById('broadcast-preview');
if (!this.isSharingScreen) {
const stream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true });
broadcastClient.addVideoInputDevice(stream, 'screenshare-video-1', { index: 0 });
broadcastClient.addAudioInputDevice(stream, 'screenshare-audio-1', { index: 0 });
this.currentVideoComposition = {
index: 1,
height: streamConfig.maxResolution.height * 0.25,
width: streamConfig.maxResolution.width * 0.25,
x: preview.width - preview.width / 4 - 20,
y: preview.height - preview.height / 4 - 30,
};
} else {
this.currentVideoComposition = this.defaultVideoComposition;
this.broadcastClient.removeVideoInputDevice('screenshare-video-1');
this.broadcastClient.removeAudioInputDevice('screenshare-audio-1');
}
this.isSharingScreen = !this.isSharingScreen;
this.broadcastClient.updateVideoDeviceComposition('camera-1', this.currentVideoComposition);
}

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.


Any opinions in this post are those of the individual author and may not reflect the opinions of AWS.