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 meeting={meeting} 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 meeting={meeting} size="sm"></DyteMicToggle>
    <DyteCameraToggle meeting={meeting} 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 meeting={meeting} 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 meeting={meeting} size="sm"></DyteMicToggle>
<DyteCameraToggle meeting={meeting} 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>
);
}