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 RtkParticipantTile, RtkAvatar, RtkNameTag, RtkAudioVisualizer for building a preview tile and RtkMicToggle and RtkCameraToggle for media controls

<RtkParticipantTile participant={meeting.self}>
  <RtkAvatar participant={meeting.self} />
  <RtkNameTag participant={meeting.self}>
    <RtkAudioVisualizer participant={meeting.self} slot="start" />
  </RtkNameTag>
  <div id="user-actions" className="absolute bottom-2 right-2 flex">
    <RtkMicToggle size="sm"></RtkMicToggle>
    <RtkCameraToggle size="sm"></RtkCameraToggle>
  </div>
</RtkParticipantTile>

LIVE EDITOR

import {
RtkParticipantTile, RtkAvatar, RtkNameTag,
RtkAudioVisualizer, RtkMicToggle, RtkCameraToggle, RtkButton,
} from '@cloudflare/realtimekit-react-ui';
import { useRealtimeKitMeeting } from '@cloudflare/realtimekit-react';

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

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">
    <RtkParticipantTile participant={meeting.self}>
      <RtkAvatar participant={meeting.self} />
      <RtkNameTag participant={meeting.self}>
        <RtkAudioVisualizer participant={meeting.self} slot="start" />
      </RtkNameTag>
      <div
        id="user-actions"
        className="absolute flex"
        style={{
          bottom: '8px',
          right: '8px',
        }}
      >
        <RtkMicToggle size="sm"></RtkMicToggle>
        <RtkCameraToggle size="sm"></RtkCameraToggle>
      </div>
    </RtkParticipantTile>
  </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>
    <RtkButton
      kind="wide"
      size="lg"
      onClick={async () => {
        await meeting.join();
      }}
    >
      Join
    </RtkButton>
  </div>
</div>
</div>
); }