Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion docs/explanation/compositions.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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.
Expand Down
8 changes: 7 additions & 1 deletion docs/how-to/compositions/compose-a-fishjam-room.mdx
Original file line number Diff line number Diff line change
@@ -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.
---

Expand All @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion docs/how-to/compositions/drive-a-template-with-events.mdx
Original file line number Diff line number Diff line change
@@ -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.
---

Expand Down
2 changes: 1 addition & 1 deletion docs/how-to/compositions/inputs-and-outputs.mdx
Original file line number Diff line number Diff line change
@@ -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.
---

Expand Down
2 changes: 1 addition & 1 deletion docs/how-to/compositions/write-and-deploy-a-template.mdx
Original file line number Diff line number Diff line change
@@ -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.
---

Expand Down
Loading