Displaying Screenshare

Usage

Events

Core

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.

Javascript

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

React

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
  }
});

Flutter

...

@override
void onScreenShareStarted(DyteJoinedMeetingParticipant participant) {
  /// handle screen share started of `DyteJoinedMeetingParticipant` participant
}

@override
void onScreenShareEnded(DyteJoinedMeetingParticipant participant) {
  /// handle screen share ended of `DyteJoinedMeetingParticipant` participant
}

...

React Native

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
  }
});

Android (Kotlin)

private val participantEventsListener = object : DyteParticipantEventsListener {
        override fun onScreenSharesUpdated() {
            super.onScreenSharesUpdated()

            ...
        }
    }

iOS (Swift)

DyteParticipantEventsListener {
        func onScreenSharesUpdated() {
            // your code here to handle screenshares from meeting
        }
        func onScreenShareEnded(participant: DyteMeetingParticipant) {
            // your code here to handle screenshare ended
        }

        func onScreenShareStarted(participant: DyteMeetingParticipant) {
            //  your code here to handle screenshare started
        }
}

Components

UI Kit

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

Web Components

<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>
  </dyte-name-tag>
</dyte-screenshare-view>

<script>
  const elements = document.getElementsByClassName('dyte-el');
  for (const el of elements) {
    el.participant = ssParticipant;
  }
</script>

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.

React

import {
  DyteScreenshareView,
  DyteNameTag,
  DyteAudioVisualizer,
} from '@dytesdk/react-ui-kit';

<DyteScreenshareView participant={ssParticipant} style={{ height: '480px' }}>
  <DyteNameTag participant={ssParticipant}>
    <DyteAudioVisualizer slot="start" participant={ssParticipant} />
  </DyteNameTag>
</DyteScreenshareView>;

Check out the reference for more details about the props.

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.

Angular

<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>
  </dyte-name-tag>
</dyte-screenshare-view>

<script>
const elements = document.getElementsByClassName('dyte-el');
  for (const el of elements) {
    el.participant = ssParticipant;
  }
</script>

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.

Flutter

info

This UI component does not currently exist in the Flutter UIKit.

React Native

import {
  DyteScreenshareView,
  DyteNameTag,
  DyteAudioVisualizer,
} from '@dytesdk/react-native-ui-kit';

<DyteScreenshareView participant={ssParticipant} style={{ height: '480px' }}>
  <DyteNameTag participant={ssParticipant}>
    <DyteAudioVisualizer slot="start" participant={ssParticipant} />
  </DyteNameTag>
</DyteScreenshareView>;

Check out the reference for more details about the props.

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.

Android (Kotlin)

info

This UI component does not currently exist in the Android UIKit.

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

iOS (Swift)

info

This UI component does not currently exist in the iOS UIKit.

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