diff --git a/.spelling b/.spelling index 51974f0b..7dbf6c2b 100644 --- a/.spelling +++ b/.spelling @@ -88,3 +88,5 @@ WebGPU Three.js PixiJS MediaStream +livestreaming +broadcasted diff --git a/docs/react/livestreaming.mdx b/docs/react/livestreaming.mdx new file mode 100644 index 00000000..e285c988 --- /dev/null +++ b/docs/react/livestreaming.mdx @@ -0,0 +1,56 @@ +--- +sidebar_position: 8 +--- + +# Livestreaming + +If your case involves audio/video one-to-many streaming with low latency, Fishjam provides the exact tools you need. This scenario is 20% cheaper than videoconferencing. + +## How to start streaming? + +First, you need to create a room of a special type - `livestream`. +As the streaming is one-to-many, you can have only one streaming participant in that room. +To start streaming, simply use a peer token to [join the room as you would normally do](/react/connecting). + +## How to receive the stream? + +Fishjam SDK provides a [`useLivestream`](/api/web/functions/useLivestream) hook to receive the broadcasted stream. +In order to use it, you need to generate a viewer token using our Server SDKs (Room Manager also [provides this functionality as an example](https://github.com/fishjam-cloud/js-server-sdk/blob/main/examples/room-manager/src/routes/rooms.ts)). +The `useLivestream` hook will provide a [MediaStream](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream) object once the connection with Fishjam is established. + +```ts +import { useLivestream } from "@fishjam-cloud/react-client"; + +interface LivestreamProps { + viewerToken: string; +} + +const FISHJAM_LIVESTREAM_URL = "https://fishjam.io/api/v1/live"; + +export function Livestream({ viewerToken }: LivestreamProps) { + const videoRef = useRef(null); + + const { connect, disconnect, stream } = useLivestream(); + + useEffect(() => { + if (!videoRef.current) return; + videoRef.current.srcObject = stream ?? null; + }, [stream]); + + useEffect(() => { + connect({ + url: FISHJAM_LIVESTREAM_URL, + token: viewerToken, + }); + + return () => { + disconnect(); + }; + }, [connect, disconnect, viewerToken]); + + // stream is null until the connection is established + if (!stream) return null; + + return