From 7edee369afc636b92f919fb579134a66c7172d46 Mon Sep 17 00:00:00 2001 From: Karol Konkol Date: Tue, 27 May 2025 18:11:36 +0200 Subject: [PATCH 1/5] Add serverside livestreaming docs --- docs/livestreaming.mdx | 78 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 docs/livestreaming.mdx diff --git a/docs/livestreaming.mdx b/docs/livestreaming.mdx new file mode 100644 index 00000000..e9631dcd --- /dev/null +++ b/docs/livestreaming.mdx @@ -0,0 +1,78 @@ +--- +sidebar_position: 5 +--- + +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; + +# Livestreaming + +For livestreaming purposes we suggest using livestream rooms specifically optimized for this use case. + +Main differences: +* Livestream rooms are 20% cheaper than regular rooms +* Livestream rooms allows for greater scalability +* Compatible with WHEP standard + + +## How Do I Use It? +### Streamer +To create a livestream room, you must set the `roomType` field to `broadcaster` when creating a room using our [Server SDKs](/production/server). Then you have to create one peer that will be used to stream your content. + + + + + ```ts + const createdRoom = await fishjamClient.createRoom({ roomType: 'broadcaster' }); + + const peer = await fishjamClient.createPeer(createdRoom.id) + ``` + + + + + + ```python + options = RoomOptions(room_type="broadcaster") + created_room = fishjam_client.create_room(options) + + peer = fishjam_client.create_peer(created_room.id) + ``` + + + + +Now, you can connect peer normally to the room as described in our [React Native](/react-native/connecting) and [React](/react/connecting) docs. + +:::info +The livestream rooms support only one video and audio track; any additional tracks will be ignored and will not be available to the viewers. +::: + +### Viewers +To view the streamed content you need to obtain viewer token that can be generated using [Server SDKs](/production/server). + + + + + ```ts + // createdRoom ... previously created room + const viewerToken = await fishjamClient.createBroadcastViewerToken(createdRoom.id) + ``` + + + + + + ```python + # created_room ... previously created room + viewer_token = fishjam_client.create_livestream_viewer_token(created_room.id) + ``` + + + + +Now you can connect viewer to the livestream as described in our [React Native] and [React] docs. + +:::info +Viewers connect using [WHEP](https://blog.swmansion.com/introducing-react-native-whip-whep-ac9e5588d4da) standard, allowing the use of any player that supports the WHEP standard. +::: \ No newline at end of file From 365fb30d26d67a94e7bb867502877cf211374eb8 Mon Sep 17 00:00:00 2001 From: Karol Konkol Date: Tue, 27 May 2025 19:07:09 +0200 Subject: [PATCH 2/5] Fix spelling --- .spelling | 2 ++ docs/livestreaming.mdx | 4 ++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/.spelling b/.spelling index 7dbf6c2b..695cd09d 100644 --- a/.spelling +++ b/.spelling @@ -88,5 +88,7 @@ WebGPU Three.js PixiJS MediaStream +WHEP +livestream livestreaming broadcasted diff --git a/docs/livestreaming.mdx b/docs/livestreaming.mdx index e9631dcd..e08f7718 100644 --- a/docs/livestreaming.mdx +++ b/docs/livestreaming.mdx @@ -5,9 +5,9 @@ sidebar_position: 5 import Tabs from "@theme/Tabs"; import TabItem from "@theme/TabItem"; -# Livestreaming +# Live streaming -For livestreaming purposes we suggest using livestream rooms specifically optimized for this use case. +For live streaming purposes we suggest using livestream rooms specifically optimized for this use case. Main differences: * Livestream rooms are 20% cheaper than regular rooms From 53bbaa37d358d581296bd954d93362a4fe0f3a6e Mon Sep 17 00:00:00 2001 From: Karol Konkol Date: Tue, 27 May 2025 19:49:20 +0200 Subject: [PATCH 3/5] Fix formatter warnings --- docs/livestreaming.mdx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/docs/livestreaming.mdx b/docs/livestreaming.mdx index e08f7718..d8b7d9bf 100644 --- a/docs/livestreaming.mdx +++ b/docs/livestreaming.mdx @@ -10,13 +10,16 @@ import TabItem from "@theme/TabItem"; For live streaming purposes we suggest using livestream rooms specifically optimized for this use case. Main differences: -* Livestream rooms are 20% cheaper than regular rooms -* Livestream rooms allows for greater scalability -* Compatible with WHEP standard + +- Livestream rooms are 20% cheaper than regular rooms +- Livestream rooms allows for greater scalability +- Compatible with WHEP standard ## How Do I Use It? + ### Streamer + To create a livestream room, you must set the `roomType` field to `broadcaster` when creating a room using our [Server SDKs](/production/server). Then you have to create one peer that will be used to stream your content. @@ -42,13 +45,14 @@ To create a livestream room, you must set the `roomType` field to `broadcaster` -Now, you can connect peer normally to the room as described in our [React Native](/react-native/connecting) and [React](/react/connecting) docs. +Now, you can connect peer normally to the room as described in our [React Native](/react-native/connecting) and [React](/react/connecting) docs. :::info The livestream rooms support only one video and audio track; any additional tracks will be ignored and will not be available to the viewers. ::: ### Viewers + To view the streamed content you need to obtain viewer token that can be generated using [Server SDKs](/production/server). @@ -75,4 +79,4 @@ Now you can connect viewer to the livestream as described in our [React Native] :::info Viewers connect using [WHEP](https://blog.swmansion.com/introducing-react-native-whip-whep-ac9e5588d4da) standard, allowing the use of any player that supports the WHEP standard. -::: \ No newline at end of file +::: From 239d2c645e9a8412ef63c7de258514ca197b25ae Mon Sep 17 00:00:00 2001 From: Karol Konkol Date: Wed, 28 May 2025 20:05:22 +0200 Subject: [PATCH 4/5] Requested changes --- docs/livestreaming.mdx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/livestreaming.mdx b/docs/livestreaming.mdx index d8b7d9bf..137c1d59 100644 --- a/docs/livestreaming.mdx +++ b/docs/livestreaming.mdx @@ -7,26 +7,26 @@ import TabItem from "@theme/TabItem"; # Live streaming -For live streaming purposes we suggest using livestream rooms specifically optimized for this use case. +For live streaming purposes, we suggest using livestream rooms that are specifically optimized for the one-to-many scenario. -Main differences: +The main differences are: - Livestream rooms are 20% cheaper than regular rooms -- Livestream rooms allows for greater scalability +- Livestream rooms are optimized for one-to-many scenario and allow for hundreds of people to participate - Compatible with WHEP standard -## How Do I Use It? +## How do I use it? ### Streamer -To create a livestream room, you must set the `roomType` field to `broadcaster` when creating a room using our [Server SDKs](/production/server). Then you have to create one peer that will be used to stream your content. +To create a livestream room, you must set the `roomType` field to `livestream` when creating a room using our [Server SDKs](/production/server). Then you have to create a peer that will be used to stream your content. ```ts - const createdRoom = await fishjamClient.createRoom({ roomType: 'broadcaster' }); + const createdRoom = await fishjamClient.createRoom({ roomType: 'livestream' }); const peer = await fishjamClient.createPeer(createdRoom.id) ``` @@ -36,7 +36,7 @@ To create a livestream room, you must set the `roomType` field to `broadcaster` ```python - options = RoomOptions(room_type="broadcaster") + options = RoomOptions(room_type="livestream") created_room = fishjam_client.create_room(options) peer = fishjam_client.create_peer(created_room.id) @@ -45,7 +45,7 @@ To create a livestream room, you must set the `roomType` field to `broadcaster` -Now, you can connect peer normally to the room as described in our [React Native](/react-native/connecting) and [React](/react/connecting) docs. +Now, you can connect the peer normally to the room as described in our [React Native](/react-native/connecting) and [React](/react/connecting) docs. :::info The livestream rooms support only one video and audio track; any additional tracks will be ignored and will not be available to the viewers. @@ -53,7 +53,7 @@ The livestream rooms support only one video and audio track; any additional trac ### Viewers -To view the streamed content you need to obtain viewer token that can be generated using [Server SDKs](/production/server). +To view the streamed content, you need to obtain a viewer token that can be generated using [Server SDKs](/production/server). @@ -75,7 +75,7 @@ To view the streamed content you need to obtain viewer token that can be generat -Now you can connect viewer to the livestream as described in our [React Native] and [React] docs. +Now you can connect the viewer to the livestream as described in our [React Native] and [React] docs. :::info Viewers connect using [WHEP](https://blog.swmansion.com/introducing-react-native-whip-whep-ac9e5588d4da) standard, allowing the use of any player that supports the WHEP standard. From e0de89e23af3ca6b129acb37ed419f8619840a8f Mon Sep 17 00:00:00 2001 From: Karol Konkol Date: Thu, 29 May 2025 16:35:51 +0200 Subject: [PATCH 5/5] Rewrite livestreaming page --- docs/livestreaming.mdx | 43 +++++++++++++++++++++++++----------------- 1 file changed, 26 insertions(+), 17 deletions(-) diff --git a/docs/livestreaming.mdx b/docs/livestreaming.mdx index 137c1d59..6cb1e5e9 100644 --- a/docs/livestreaming.mdx +++ b/docs/livestreaming.mdx @@ -5,22 +5,25 @@ sidebar_position: 5 import Tabs from "@theme/Tabs"; import TabItem from "@theme/TabItem"; -# Live streaming +# Livestreaming -For live streaming purposes, we suggest using livestream rooms that are specifically optimized for the one-to-many scenario. +If your case involves streaming live audio and/or video from one source to many viewers with low latency, Fishjam provides the exact tools you need. This scenario is 20% cheaper than videoconferencing. -The main differences are: +## How Do I Use It? -- Livestream rooms are 20% cheaper than regular rooms -- Livestream rooms are optimized for one-to-many scenario and allow for hundreds of people to participate -- Compatible with WHEP standard - +### Streamer -## How do I use it? +First, you need to create a room with the livestream type using our [Server SDKs](/production/server). If you are using our sandbox, the [Room Manager](/room-manager) also allows you to create such a room. As the streaming is one-to-many, you can have only one streaming participant in that room. -### Streamer +#### Using Room Manager + +You can create a livestream room and obtain a peer token using this URL: + +``` +https://fishjam.io/api/v1/connect//room-manager?roomName=foo&peerName=bar&roomType=livestream +``` -To create a livestream room, you must set the `roomType` field to `livestream` when creating a room using our [Server SDKs](/production/server). Then you have to create a peer that will be used to stream your content. +#### Using Server SDKs @@ -45,7 +48,7 @@ To create a livestream room, you must set the `roomType` field to `livestream` w -Now, you can connect the peer normally to the room as described in our [React Native](/react-native/connecting) and [React](/react/connecting) docs. +Now, you can connect to the room and start streaming as described in our [React Native](/react-native/connecting) and [React](/react/connecting) docs. :::info The livestream rooms support only one video and audio track; any additional tracks will be ignored and will not be available to the viewers. @@ -53,14 +56,21 @@ The livestream rooms support only one video and audio track; any additional trac ### Viewers -To view the streamed content, you need to obtain a viewer token that can be generated using [Server SDKs](/production/server). +To view the streamed content, you need to obtain a viewer token that can be generated using [Server SDKs](/production/server). If you are using our sandbox, the [Room Manager](/room-manager) also allows you to create such a token. + +#### Using Room Manager + +``` +https://fishjam.io/api/v1/connect//room-manager//livestream-viewer-token +``` + +#### Using Server SDKs ```ts - // createdRoom ... previously created room - const viewerToken = await fishjamClient.createBroadcastViewerToken(createdRoom.id) + const viewerToken = await fishjamClient.createLivestreamViewerToken(room.id) ``` @@ -68,14 +78,13 @@ To view the streamed content, you need to obtain a viewer token that can be gene ```python - # created_room ... previously created room - viewer_token = fishjam_client.create_livestream_viewer_token(created_room.id) + viewer_token = fishjam_client.create_livestream_viewer_token(room.id) ``` -Now you can connect the viewer to the livestream as described in our [React Native] and [React] docs. +Now you can connect the viewer to the livestream as described in our React Native and [React](/react/livestreaming) docs. :::info Viewers connect using [WHEP](https://blog.swmansion.com/introducing-react-native-whip-whep-ac9e5588d4da) standard, allowing the use of any player that supports the WHEP standard.