Skip to main content

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