@quicly.live/react

Embed a Quicly live multiview player in React.

npm install @quicly.live/react

Use it

The API returns an embed_url on every stream. That is the one to pass, because it already carries the account's namespace and the broadcast name's catalog suffix, and neither is something worth deciding yourself.

import { QuiclyMultiview } from "@quicly.live/react";

export function Wall({ stream }) {
  return <QuiclyMultiview src={stream.embed_url} />;
}

If you are building the URL yourself, pass the parts instead:

<QuiclyMultiview namespace="ns_abc123" tiles={["studio_a.msf", "studio_b.msf"]} />

Both forms render the same iframe. It is full width at 16:9 with no border, and the player fills whatever box you give it, so restyle it freely:

<QuiclyMultiview
  src={stream.embed_url}
  style={{ aspectRatio: "21 / 9", borderRadius: 12 }}
/>

Why this exists

A Quicly player is an iframe. You do not need this package: you can write the tag yourself. What it buys you is that two attributes cannot go missing.

• allow="autoplay; fullscreen". Without it the player never starts.
• allowFullScreen. Without it the fullscreen button does nothing, silently.

Both are set here and neither can be overridden. That is the whole package.

It ships no player library, no state and no effects, so it renders in a React Server Component without a "use client" boundary and adds nothing to your client bundle beyond the element itself.

Props

| Prop | Type | Notes | | --- | --- | --- | | src | string | A player URL. Use embed_url from the API. | | namespace | string | Instead of src: the account's relay namespace. | | tiles | string[] | Broadcast names with their suffix (studio_a.msf). Omit to show whatever the relay announces. | | chrome | boolean | false drops the toolbar and tile labels, for a plain monitor. | | baseUrl | string | Only for a self-hosted player. | | title | string | The iframe's accessible name. Defaults to "Live multiview". Set it when a page has more than one player. | | className, style | | Applied to the iframe. style merges over the defaults. | | loading | "eager" \| "lazy" | For a player below the fold. |

quiclyEmbedUrl(options) is exported too, for when you want the URL rather than the element.

What the viewer can do

The wall is theirs to arrange, and none of it interrupts playback: resize tiles by dragging a seam, swap two by dragging a label, maximize one, close and reopen feeds, go fullscreen. The arrangement is remembered per browser.

Tiles are muted and there is no unmute control.

Browser support

Playback needs a secure context and WebCodecs, so Chrome and Edge work today. Firefox and Safari cannot play these streams yet; the player says so in words rather than showing black tiles.

Links

• Documentation
• For LLMs and coding agents