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