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>
  <View className="absolute bottom-2 right-2 flex">
    <DyteMicToggle meeting={meeting} size="sm"></DyteMicToggle>
    <DyteCameraToggle meeting={meeting} size="sm"></DyteCameraToggle>
  </View>
</DyteParticipantTile>

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