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 meeting={meeting} participant={meeting.self}>
  <RtkAvatar participant={meeting.self} />
  <RtkNameTag participant={meeting.self}>
    <RtkAudioVisualizer participant={meeting.self} />
  </RtkNameTag>
  <View className="absolute bottom-2 right-2 flex">
    <RtkMicToggle meeting={meeting} size="sm"></RtkMicToggle>
    <RtkCameraToggle meeting={meeting} size="sm"></RtkCameraToggle>
  </View>
</RtkParticipantTile>

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

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

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