From f0a22ac510b433fbd12fdeab826cc9f0da690e36 Mon Sep 17 00:00:00 2001 From: Adrian Czerwiec Date: Tue, 27 May 2025 13:30:04 +0200 Subject: [PATCH 1/6] add draft --- docs/react/livestreaming.mdx | 49 ++++++++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 docs/react/livestreaming.mdx diff --git a/docs/react/livestreaming.mdx b/docs/react/livestreaming.mdx new file mode 100644 index 00000000..9e9180d2 --- /dev/null +++ b/docs/react/livestreaming.mdx @@ -0,0 +1,49 @@ +--- +sidebar_position: 8 +--- + +# Livestreaming + +If your case involves streaming live audio and/or video one-to-many 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 `broadcaster`. +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). +The `useLivestream` hook will provide a [MediaStreamTrack](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack) 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 { connect, disconnect, stream } = useLivestream(); + + 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