Audio/video - Preview

For building audio/video preview

Permissions

• For AUDIO - The value of meeting.self.permissions.canProduceAudio needs to be ALLOWED
• For VIDEO - The value of meeting.self.permissions.canProduceVideo needs to be ALLOWED

In the preset editor, toggle these settings under Media.

Media Preview and Controls

We'll be using DyteParticipantTile, DyteAvatar, DyteNameTag, DyteAudioVisualizer for building a preview tile and DyteMicToggle and DyteCameraToggle for media controls

<DyteParticipantTile participant={meeting.self}>
  <DyteAvatar participant={meeting.self} />
  <DyteNameTag participant={meeting.self}>
    <DyteAudioVisualizer participant={meeting.self} slot="start" />
  </DyteNameTag>
  <div id="user-actions" className="absolute bottom-2 right-2 flex">
    <DyteMicToggle size="sm"></DyteMicToggle>
    <DyteCameraToggle size="sm"></DyteCameraToggle>
  </div>
</DyteParticipantTile>

LIVE EDITOR

import {
DyteParticipantTile, DyteAvatar, DyteNameTag,
DyteAudioVisualizer, DyteMicToggle, DyteCameraToggle, DyteButton,
} from '@dytesdk/react-ui-kit';
import { useDyteMeeting } from '@dytesdk/react-web-core';

export default function CustomMeetingPreview() {
const { meeting } = useDyteMeeting();

return (

<div
className="h-full w-full flex flex-col items-center justify-center"
style={{ minHeight: '400px' }}
>
<div className="flex w-full items-center justify-around p-[10%]">
  <div className="relative">
    <DyteParticipantTile participant={meeting.self}>
      <DyteAvatar participant={meeting.self} />
      <DyteNameTag participant={meeting.self}>
        <DyteAudioVisualizer participant={meeting.self} slot="start" />
      </DyteNameTag>
      <div
        id="user-actions"
        className="absolute flex"
        style={{
          bottom: '8px',
          right: '8px',
        }}
      >
        <DyteMicToggle size="sm"></DyteMicToggle>
        <DyteCameraToggle size="sm"></DyteCameraToggle>
      </div>
    </DyteParticipantTile>
  </div>
  <div className="flex w-1/4 flex-col justify-between">
    <div className="flex flex-col items-center">
      <p>Joining as {meeting.self.name}</p>
    </div>
    <DyteButton
      kind="wide"
      size="lg"
      onClick={async () => {
        await meeting.join();
      }}
    >
      Join
    </DyteButton>
  </div>
</div>
</div>
); }