MediaLoader | RelayRTC Docs

Import

import { MediaLoader, useMediaTrack } from '@relayrtc/react'
import type { RoomRemoteTrack } from '@relayrtc/react'

Requirements

Use playback state from useMediaTrack, capture pending from useLocalMedia, or connection state from useRoom.

The loader component itself does not require a provider.

Props

Prop	Type	Default	Purpose
label	string	Loading media	Text announced with role=status.
children	ReactNode	label	Custom visible label.
className	string	Optional	Style the container to suit your layout.
Other div props	`HTMLAttributes<HTMLDivElement>`	Optional	Standard DOM props, including style and aria attributes.

Example

function Video({ track }: { track: RoomRemoteTrack }) {
  const media = useMediaTrack(track)
 
  return (
    <div style={{ position: 'relative' }}>
      <video ref={media.ref} autoPlay playsInline />
      {media.isLoading && (
        <MediaLoader
          label="Loading camera"
          style={{ display: 'flex', alignItems: 'center', gap: 12 }}
        />
      )}
    </div>
  )
}

Behavior

The component renders an animated SVG and label with role="status" and aria-live="polite". It does not detect loading, subscribe to tracks or change transport speed.