This guide was created as a two part guide. In Part 1 we showed you how you can implement calls with video functionality. In this Part 2 we will be showing you how to implement a simple screen sharing functionality.
This guide assumes that you have already completed the Part 1 of this guide, and the subsequent guide will build onto Part 1.
Add start / stop screen share buttons
In your index.html file add a screen share and stop sharing button in the same div as your make call button from part 1.
If you run this in a Browser, you should see something like this:
Figure 1.1 – Video area with visible screen share buttons
Now let’s apply the extra style style=”display:none” to our share screen and stop sharing buttons. We will only show these when connected to a call.
If you refresh your Browser, you should see something like this:
Let’s update the call.onEstablished method in the index.js file to display the screen share buttonswhen a call is connected.
Let’s also update the call.onEnded method in the index.js file to hide the screen share button when a call is disconnected.
Share your screen
Once you have an active call you can start sharing your screen. To do this, let’s implement a new function in index.js
Check for a valid current call.
Optionally, we enlarge our video element. We increase its width from 300px to 800px.
await currentCall.startScreenShare() does all the internal job for us. This is a Sendbird function.
Once we call the screen sharing function from Sendbird, we set a listener for when the remote user stops it. The logic inside this function is to reduce the size of our video element (back to 300px) and hide the Stop share screen button.
Figure 3 – Browsers internally will ask for which monitor you want to share.
Let’s apply the logic to stop screen sharing:
Check the full source, clone and download.
Also check our official documentation and sample code.