Skip to main content

dyte-screenshare-view

A component which plays a participant's screenshared video.

It also allows for placement of other components similar to dyte-participant-tile.

This component will not render anything if the participant hasn't start screensharing.

<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 = meeting.self;
  }
</script>

Props​

participant

required

Participant object

hideFullScreenButton

Hide full screen button

Default
false
Type
boolean

iconPack

Icon pack

Default
defaultIconPack

meeting

Meeting object

nameTagPosition

Position of name tag

Default
'bottom-left'
Type
"bottom-center" | "bottom-left" | "bottom-right" | "top-center" | "top-left" | "top-right"

size

Size

Type
"lg" | "md" | "sm" | "xl"

t

Language

Default
useLanguage()

variant

Variant

Default
'solid'
Type
"gradient" | "solid"