Skip to main content

Screen Sharing

  • Updated

- product:video - language:javascript - sdk:relaybrowser3 sidebar_custom_props: platform: javascript # Screen Sharing SignalWire Video API allows you to host real-time video calls and conferences on your website. In this guide, well learn to add screen sharing ability in your video call interface. ## Getting Started It is incredibly easy to allow screen sharing on any project that already uses the SignalWire Video JS SDK. However, if you havent yet set up a video conference project using the Video SDK, you can check out the [Simple Video Demo](/video/getting-started/simple-video-demo) guide first. ## Adding a Screen Share feature To start sharing the screen, you need to call the [RoomSession.startScreenShare()](/sdks/reference/browser-sdk/video/video-roomsession#startscreenshare) method. This will make the browser prompt your user with the browsers screen share dialog like the one shown below.

A
After the user selects which screen or tab to share, SignalWire Video SDK will automatically add a new video feed with your screens contents to the video call. By default, the shared screen will take full-screen role, and a participant will be shown in the top-right corner of the video. For example:
A
The shared video goes full-screen, and one of the members is shown in the corner.
[RoomSession.startScreenShare()](/sdks/reference/browser-sdk/video/video-roomsession#startscreenshare) asynchronously returns a [RoomSessionScreenShare](/sdks/reference/browser-sdk/video/video-roomsessionscreenshare) object. To stop the video feed, simply call the [RoomSessionScreenShare.leave()](/sdks/reference/browser-sdk/video/video-roomsessionscreenshare#leave) method. ### Toggle screen share with an HTML button To put it all together, this is how you would toggle screen share with a button: javascript // Assuming your Room object is named roomSession let screenShareObj; async function toggle_screen_share() { if (roomSession === undefined) return; if (screenShareObj === undefined) { screenShareObj = await roomSession.startScreenShare(); } else { screenShareObj.leave(); screenShareObj = undefined; } } You can call the toggle_screen_share function from your Share Screen button in HTML like so: html ### Try it out You can try tinkering with a demo on [CodeSandbox](https://codesandbox.io/s/serverless-sound-9omwz).