Skip to main content

Displaying Screenshare



Once any user starts sharing the screen, use the screenshare view from the UIKit to display the shared screen. The component allows you to nest other components inside it to create a custom layout based on your needs. Check out a the sample usage of UIKit on your prefered platform.

const { meeting } = useDyteMeeting();

// Array of participants having their screenshare on
const ssParticipants = useDyteSelector((m) =>
m.participant.joined.toArray().filter((p) => p.screenShareEnabled)

// or using traditional event listeners
meeting.participants.joined.on('screenShareUpdate', (participant) => {
if (participant.screenShareEnabled) {
// participant.screenShareTrack
} else {
// handle stop screen share

UI Kit

This component does not render anything if the participant hasn't start sharing their screen.

<dyte-screenshare-view class="dyte-el" style="height: 480px">
<dyte-name-tag class="dyte-el">
<dyte-audio-visualizer class="dyte-el" slot="start"></dyte-audio-visualizer>

const elements = document.getElementsByClassName('dyte-el');
for (const el of elements) {
el.participant = ssParticipant;

Check out the reference for more details about the attributes.

To create your own component, you can use the screenShareTracks property of the local user to get the list of screen share tracks and control how you want to display them.