diff --git a/docs/explanation/compositions.mdx b/docs/explanation/compositions.mdx index 39e45daf..65987cae 100644 --- a/docs/explanation/compositions.mdx +++ b/docs/explanation/compositions.mdx @@ -18,7 +18,7 @@ Compositions are built on [Smelter](https://smelter.dev), the source-available r ## What you can build -- **Multi-party layouts**: arrange the cameras of a conference or livestream into grids, side-by-sides, or picture-in-picture. +- **Multi-party layouts**: arrange the cameras of a conference room, or several independent streams, into grids, side-by-sides, or picture-in-picture. - **Branded streams**: overlay logos, captions, lower-thirds, and backgrounds on top of live video. - **Cross-protocol bridging**: take WebRTC inputs and republish the composed result over RTMP, for example broadcasting a conference to YouTube or Twitch, or the other way round. - **Recordings**: capture the composed stream as an MP4 file to store, replay, or serve on demand. @@ -35,6 +35,13 @@ A composition produces video, it does not serve it. There is nowhere to point a An output's scene can either be described directly in the API or rendered by a **template**: a React component, written with the layout components and the [`@fishjam-cloud/composition`](./../how-to/compositions/write-and-deploy-a-template) hooks, that updates the layout live as the room changes. +## Getting media in + +There are two ways to feed a composition: + +- **Publish straight to an input.** Register an input and point any source at it: OBS, a phone camera, a browser tab, an RTMP encoder, or an MP4 file. This is the simplest path and needs no room. See [Choose inputs and outputs](./../how-to/compositions/inputs-and-outputs). +- **Forward a Fishjam room.** Use this to compose every peer of a [conference or audio-only room](./rooms). Fishjam registers an input per participant and keeps them in sync as peers join and leave. Livestream rooms cannot be forwarded. See [Compose a Fishjam room](./../how-to/compositions/compose-a-fishjam-room). + ## Cost and lifecycle A running composition holds a live rendering session for as long as it exists, and you are billed for that time whether or not anyone is watching. diff --git a/docs/how-to/compositions/compose-a-fishjam-room.mdx b/docs/how-to/compositions/compose-a-fishjam-room.mdx index 040bc97d..6fd95e97 100644 --- a/docs/how-to/compositions/compose-a-fishjam-room.mdx +++ b/docs/how-to/compositions/compose-a-fishjam-room.mdx @@ -1,6 +1,6 @@ --- type: how-to -sidebar_position: 2 +sidebar_position: 3 description: Forward a Fishjam room into a composition and render its peers with a live React template. --- @@ -16,6 +16,12 @@ A composition can include the peers of a [Fishjam room](./../../explanation/room Fishjam room (peers) ──forwarded──▶ composition (template) ──WHIP──▶ Fishjam livestream ──WHEP──▶ [viewers] ``` +:::note +Only [conference](./../../explanation/rooms#conference-rooms-default) and [audio-only](./../../explanation/rooms#audio-only-rooms) rooms can be forwarded. Forwarding a [livestream room](./../../explanation/rooms#livestream-rooms) fails. + +To compose a single stream, such as OBS, a phone camera, or a browser tab, you don't need a room at all. Publish it straight into the composition through a [`whip_server` input](./inputs-and-outputs#inputs). +::: + ## Prerequisites - A [livestream](./../../explanation/livestreams) (or any other WHIP/RTMP destination) to publish the composed stream to. diff --git a/docs/how-to/compositions/drive-a-template-with-events.mdx b/docs/how-to/compositions/drive-a-template-with-events.mdx index 3c463074..9081d34c 100644 --- a/docs/how-to/compositions/drive-a-template-with-events.mdx +++ b/docs/how-to/compositions/drive-a-template-with-events.mdx @@ -1,6 +1,6 @@ --- type: how-to -sidebar_position: 3 +sidebar_position: 4 description: Send custom events to a running composition to update a template's on-screen state at runtime. --- diff --git a/docs/how-to/compositions/inputs-and-outputs.mdx b/docs/how-to/compositions/inputs-and-outputs.mdx index 1bec9a65..42eed74a 100644 --- a/docs/how-to/compositions/inputs-and-outputs.mdx +++ b/docs/how-to/compositions/inputs-and-outputs.mdx @@ -1,6 +1,6 @@ --- type: how-to -sidebar_position: 4 +sidebar_position: 1 description: Choose the right input and output protocols for a composition, from WebRTC to RTMP and MP4. --- diff --git a/docs/how-to/compositions/write-and-deploy-a-template.mdx b/docs/how-to/compositions/write-and-deploy-a-template.mdx index f5808e82..cd79e9f4 100644 --- a/docs/how-to/compositions/write-and-deploy-a-template.mdx +++ b/docs/how-to/compositions/write-and-deploy-a-template.mdx @@ -1,6 +1,6 @@ --- type: how-to -sidebar_position: 1 +sidebar_position: 2 description: Write a React composition template, bundle it with the CLI, and deploy it as an output. ---