From 4d8db75934918c7e19ec44c5e503fd0c68222e05 Mon Sep 17 00:00:00 2001 From: Milosz Filimowski Date: Wed, 28 May 2025 13:01:05 +0200 Subject: [PATCH 01/14] change broadcasting to livestreaming --- .../{broadcasting.mdx => livestreaming.mdx} | 92 +++++++++---------- 1 file changed, 45 insertions(+), 47 deletions(-) rename docs/react-native/{broadcasting.mdx => livestreaming.mdx} (54%) diff --git a/docs/react-native/broadcasting.mdx b/docs/react-native/livestreaming.mdx similarity index 54% rename from docs/react-native/broadcasting.mdx rename to docs/react-native/livestreaming.mdx index 4a66cfae..bccb538d 100644 --- a/docs/react-native/broadcasting.mdx +++ b/docs/react-native/livestreaming.mdx @@ -1,14 +1,14 @@ --- sidebar_position: 9 -title: "Broadcasting" -description: "How to use Fishjam for broadcasting" +title: "Livestreaming" +description: "How to use Fishjam for livestreaming" --- import Tabs from "@theme/Tabs"; import TabItem from "@theme/TabItem"; import ConfigurePermissions from "./_components/configure-permissions.mdx"; -# Broadcasting +# Livestreaming :::info @@ -16,23 +16,23 @@ This guide assumes you already finished either the [Quick Setup](/react-native/q ::: -You can also use Fishjam to broadcast your content to users. +You can also use Fishjam to livestream your content to users. In order to do this you need to create two flows. 1. The first flow will be used to broadcast the content. -2. The second flow will be used to receive the content. +2. The second flow will be used to receive the livestream. -## Broadcasting +## Broadcasting the stream
-Configure permissions before broadcasting +Configure permissions before livestreaming
-Here is an example of a very simple broadcaster that immediately broadcasts the front camera to all users in a room: +Here is an example of a very simple livestreamer that immediately livestreams the front camera to all users in a room: ```tsx import { useEffect } from "react"; @@ -42,26 +42,28 @@ import { VideoPreviewView, } from "@fishjam-cloud/react-native-client"; -export function Broadcaster() { +const ROOM_MANAGER_ID = "ea94930e3ffd47c490f5144c43d57340"; + +export default function Streamer() { const { prepareCamera } = useCamera(); const { joinRoom, leaveRoom } = useConnection(); useEffect(() => { - const startBroadcasting = async () => { + const startStreaming = async () => { console.log("Getting room details..."); const { url, peerToken } = await getRoomDetails( - "RoomName", - "BroadcastingUserName", + "TestRoom", + "StreamerUserName", ); console.log("Preparing camera..."); await prepareCamera({ cameraEnabled: true }); await joinRoom({ url, peerToken }); - console.log("Broadcasting..."); + console.log("Streaming..."); }; - startBroadcasting(); + startStreaming(); return () => { leaveRoom(); }; @@ -77,69 +79,65 @@ export function Broadcaster() { async function getRoomDetails(roomName: string, peerName: string) { // This will work ONLY for the Sandbox App const response = await fetch( - `https://fishjam.io/api/v1/connect/${YOUR_APP_ID}/room-manager/?roomName=${roomName}&peerName=${peerName}`, + `https://fishjam.io/api/v1/connect/${ROOM_MANAGER_ID}/room-manager/?roomName=${roomName}&peerName=${peerName}&roomType=broadcaster`, ); return response.json(); } ``` -## Receiving +## Receiving the stream -Here is an example of a very simple receiver that receives the content from the broadcaster: +Here is an example of a very simple receiver that receives the livestream: ```tsx -import { useEffect } from "react"; +import { useCallback, useEffect } from "react"; import { View } from "react-native"; import { - useConnection, - usePeers, - VideoRendererView, + useLivestream, + LivestreamView, } from "@fishjam-cloud/react-native-client"; -export function Receiver() { - const { joinRoom, leaveRoom } = useConnection(); - const { remotePeers } = usePeers(); - - const broadcastedTrack = remotePeers.at(0)?.cameraTrack; +const YOUR_APP_ID = ""; +const YOUR_BROADCASTER_ID = ""; - useEffect(() => { - const startReceiving = async () => { - console.log("Getting room details..."); - const { url, peerToken } = await getRoomDetails( - "RoomName", - "ReceivingUserName", +export function Receiver() { + const { connect, disconnect } = useLivestream(); + + const handleConnect = useCallback(async () => { + try { + console.log("Getting stream details..."); + const { token } = await getViewerToken("TestRoom"); + await connect( + `https://fishjam.io/api/v1/connect/${YOUR_BROADCASTER_ID}`, + token, ); - await joinRoom({ url, peerToken }); console.log("Receiving..."); - }; + } catch (err) { + console.log(err); + } + }, [connect]); - startReceiving(); + useEffect(() => { + handleConnect(); return () => { - leaveRoom(); + disconnect(); }; - }, [joinRoom, leaveRoom]); - - if (!broadcastedTrack) { - return null; - } + }, [handleConnect, disconnect]); return ( - ); } -async function getRoomDetails(roomName: string, peerName: string) { +async function getViewerToken(roomName: string) { // This will work ONLY for the Sandbox App const response = await fetch( - `https://fishjam.io/api/v1/connect/${YOUR_APP_ID}/room-manager/?roomName=${roomName}&peerName=${peerName}`, + `https://fishjam.io/api/v1/connect/${YOUR_APP_ID}/room-manager/${roomName}/broadcast-viewer-token`, ); return response.json(); } From 8015a07ae4e59bda63dabdf347feb370fb6ad66f Mon Sep 17 00:00:00 2001 From: Milosz Filimowski Date: Wed, 28 May 2025 15:00:15 +0200 Subject: [PATCH 02/14] replace broadcasting with livestream --- docs/react-native/livestreaming.mdx | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/docs/react-native/livestreaming.mdx b/docs/react-native/livestreaming.mdx index bccb538d..17d57964 100644 --- a/docs/react-native/livestreaming.mdx +++ b/docs/react-native/livestreaming.mdx @@ -10,6 +10,20 @@ import ConfigurePermissions from "./_components/configure-permissions.mdx"; # Livestreaming +## How to start streaming? + +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. +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-native/connecting). + +## How to receive the stream? + +Fishjam SDK provides a [`useLivestream`](/api/mobile/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 handle the process of receving the stream and will forward it to `LivestreamView`. + :::info This guide assumes you already finished either the [Quick Setup](/react-native/quick-setup) or [Installation](/react-native/installation) guide. @@ -23,7 +37,7 @@ In order to do this you need to create two flows. 1. The first flow will be used to broadcast the content. 2. The second flow will be used to receive the livestream. -## Broadcasting the stream +## Broadcasting Example
Configure permissions before livestreaming @@ -42,7 +56,7 @@ import { VideoPreviewView, } from "@fishjam-cloud/react-native-client"; -const ROOM_MANAGER_ID = "ea94930e3ffd47c490f5144c43d57340"; +const ROOM_MANAGER_ID = ""; export default function Streamer() { const { prepareCamera } = useCamera(); From e0e244550bb9c6c4782975dd5c5c7cb90bedd980 Mon Sep 17 00:00:00 2001 From: Milosz Filimowski Date: Wed, 28 May 2025 15:37:50 +0200 Subject: [PATCH 03/14] add new words --- .spelling | 5 +++++ docs/react-native/livestreaming.mdx | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/.spelling b/.spelling index 51974f0b..f8215572 100644 --- a/.spelling +++ b/.spelling @@ -88,3 +88,8 @@ WebGPU Three.js PixiJS MediaStream +livestreaming +broadcasted +livestream +livestreamer +livestreams diff --git a/docs/react-native/livestreaming.mdx b/docs/react-native/livestreaming.mdx index 17d57964..4fcb962b 100644 --- a/docs/react-native/livestreaming.mdx +++ b/docs/react-native/livestreaming.mdx @@ -22,7 +22,7 @@ To start streaming, simply use a peer token to [join the room as you would norma Fishjam SDK provides a [`useLivestream`](/api/mobile/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 handle the process of receving the stream and will forward it to `LivestreamView`. +The `useLivestream` hook will handle the process of receiving the stream and will forward it to `LivestreamView`. :::info From d31ffc69adad4898f14ee608c65e9e17ee16e2cb Mon Sep 17 00:00:00 2001 From: Adrian Czerwiec Date: Thu, 29 May 2025 10:18:27 +0200 Subject: [PATCH 04/14] update submodule --- packages/mobile-client-sdk | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mobile-client-sdk b/packages/mobile-client-sdk index e2fd4bdd..e87f107d 160000 --- a/packages/mobile-client-sdk +++ b/packages/mobile-client-sdk @@ -1 +1 @@ -Subproject commit e2fd4bdd9bb219cdaf40e7a28936dc89de339384 +Subproject commit e87f107de40fdd41e628624532536958aecb7412 From f46e7e07f0682e079fe0419b88fc900065a3bdca Mon Sep 17 00:00:00 2001 From: Adrian Czerwiec Date: Thu, 29 May 2025 11:34:19 +0200 Subject: [PATCH 05/14] minor improvements --- docs/react-native/livestreaming.mdx | 23 ++++++++++------------- docs/react/livestreaming.mdx | 2 +- docs/room-manager.md | 10 ++++++++-- 3 files changed, 19 insertions(+), 16 deletions(-) diff --git a/docs/react-native/livestreaming.mdx b/docs/react-native/livestreaming.mdx index 4fcb962b..5a6749da 100644 --- a/docs/react-native/livestreaming.mdx +++ b/docs/react-native/livestreaming.mdx @@ -10,11 +10,11 @@ import ConfigurePermissions from "./_components/configure-permissions.mdx"; # Livestreaming -## How to start streaming? - 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. -First, you need to create a room of a special type `broadcaster`. +## How to start streaming? + +First, you need to create a room of a special `livestream` type using our Server SDKs. If you are using sandbox, the [Room Manager](/room-manager#how-do-i-use-it) also allows you to create such room. 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-native/connecting). @@ -34,10 +34,10 @@ You can also use Fishjam to livestream your content to users. In order to do this you need to create two flows. -1. The first flow will be used to broadcast the content. +1. The first flow will be used to stream the content. 2. The second flow will be used to receive the livestream. -## Broadcasting Example +## Livestreaming Example
Configure permissions before livestreaming @@ -46,7 +46,7 @@ In order to do this you need to create two flows.
-Here is an example of a very simple livestreamer that immediately livestreams the front camera to all users in a room: +Here is an example of a simple component that immediately streams the front camera: ```tsx import { useEffect } from "react"; @@ -93,7 +93,7 @@ export default function Streamer() { async function getRoomDetails(roomName: string, peerName: string) { // This will work ONLY for the Sandbox App const response = await fetch( - `https://fishjam.io/api/v1/connect/${ROOM_MANAGER_ID}/room-manager/?roomName=${roomName}&peerName=${peerName}&roomType=broadcaster`, + `https://fishjam.io/api/v1/connect/${ROOM_MANAGER_ID}/room-manager/?roomName=${roomName}&peerName=${peerName}&roomType=livestream`, ); return response.json(); } @@ -101,7 +101,8 @@ async function getRoomDetails(roomName: string, peerName: string) { ## Receiving the stream -Here is an example of a very simple receiver that receives the livestream: +Here is an example of a component that just receives a livestream. +The `LivestreamView` component will render the video stream once you connect to Fishjam using the connect method from `useLivestream`. ```tsx import { useCallback, useEffect } from "react"; @@ -112,7 +113,6 @@ import { } from "@fishjam-cloud/react-native-client"; const YOUR_APP_ID = ""; -const YOUR_BROADCASTER_ID = ""; export function Receiver() { const { connect, disconnect } = useLivestream(); @@ -121,10 +121,7 @@ export function Receiver() { try { console.log("Getting stream details..."); const { token } = await getViewerToken("TestRoom"); - await connect( - `https://fishjam.io/api/v1/connect/${YOUR_BROADCASTER_ID}`, - token, - ); + await connect(`https://fishjam.io/api/v1/live`, token); console.log("Receiving..."); } catch (err) { console.log(err); diff --git a/docs/react/livestreaming.mdx b/docs/react/livestreaming.mdx index e285c988..ea0b6113 100644 --- a/docs/react/livestreaming.mdx +++ b/docs/react/livestreaming.mdx @@ -8,7 +8,7 @@ If your case involves audio/video one-to-many streaming with low latency, Fishja ## How to start streaming? -First, you need to create a room of a special type - `livestream`. +First, you need to create a room of a special `livestream` type using our Server SDKs. If you are using sandbox, the [Room Manager](/room-manager#how-do-i-use-it) also allows you to create such room. 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). diff --git a/docs/room-manager.md b/docs/room-manager.md index 3076ae2e..206a6db9 100644 --- a/docs/room-manager.md +++ b/docs/room-manager.md @@ -39,12 +39,18 @@ It can be used as a reference for building your backend. ## How Do I Use It? Simply log in to your Fishjam Dashboard and open the [Sandbox App](https://fishjam.io/app/sandbox). You will see your Room Manager URL there. -Now you need to add `roomName` and `peerName` query params to build a URL for the GET request. +Now you need to add `roomName`, `peerName` and optionally a `roomType` query params to build a URL for the GET request. + +You can create 3 types of rooms: + +- `full-feature` - for video/audio conferencing, the default type +- `audio-only` - for audio-only conferencing +- `livestream` - for one-to-many video/audio streaming #### Example GET Request URL ``` -https://fishjam.io/api/v1/connect//room-manager?roomName=foo&peerName=bar +https://fishjam.io/api/v1/connect//room-manager?roomName=foo&peerName=bar&roomType=conference ``` :::note From 601a766f4cf487193874ffd44fe4a4146f2a66ef Mon Sep 17 00:00:00 2001 From: Adrian Czerwiec Date: Thu, 29 May 2025 13:25:28 +0200 Subject: [PATCH 06/14] link to main livestreaming doc --- docs/react-native/livestreaming.mdx | 10 ++++++++-- docs/react/livestreaming.mdx | 10 ++++++++-- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/docs/react-native/livestreaming.mdx b/docs/react-native/livestreaming.mdx index 5a6749da..97935396 100644 --- a/docs/react-native/livestreaming.mdx +++ b/docs/react-native/livestreaming.mdx @@ -10,13 +10,19 @@ import ConfigurePermissions from "./_components/configure-permissions.mdx"; # 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. +This section provides examples on how to quickly set up a livestreaming flow in React Native using Fishjam. +You can learn more about [livestreaming in Fishjam](/livestreaming) in our documentation. ## How to start streaming? First, you need to create a room of a special `livestream` type using our Server SDKs. If you are using sandbox, the [Room Manager](/room-manager#how-do-i-use-it) also allows you to create such room. 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-native/connecting). +To start streaming, simply [join the room](/react-native/connecting) and [stream as you would normally do](/react-native/start-streaming). + +:::warning +Livestreaming scenario allows only one video and one audio track to be sent at a time. +You cannot stream the camera and share a screen at the same time. +::: ## How to receive the stream? diff --git a/docs/react/livestreaming.mdx b/docs/react/livestreaming.mdx index ea0b6113..a7684279 100644 --- a/docs/react/livestreaming.mdx +++ b/docs/react/livestreaming.mdx @@ -4,13 +4,19 @@ 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. +This section provides examples on how to quickly set up a livestreaming flow in React using Fishjam. +You can learn more about [livestreaming in Fishjam](/livestreaming) in our documentation. ## How to start streaming? First, you need to create a room of a special `livestream` type using our Server SDKs. If you are using sandbox, the [Room Manager](/room-manager#how-do-i-use-it) also allows you to create such room. 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). +To start streaming, simply [join the room](/react/connecting) and [stream as you would normally do](/react/start-streaming). + +:::warning +Livestreaming scenario allows only one video and one audio track to be sent at a time. +You cannot stream the camera and share a screen at the same time. +::: ## How to receive the stream? From e3ae7e308a80b0def76638838fec5571e8536a17 Mon Sep 17 00:00:00 2001 From: Adrian Czerwiec Date: Thu, 29 May 2025 14:18:02 +0200 Subject: [PATCH 07/14] add prerequisites --- docs/react-native/livestreaming.mdx | 33 +++++++++++++++++------------ docs/react/livestreaming.mdx | 20 +++++++++++------ 2 files changed, 32 insertions(+), 21 deletions(-) diff --git a/docs/react-native/livestreaming.mdx b/docs/react-native/livestreaming.mdx index 97935396..91ba4287 100644 --- a/docs/react-native/livestreaming.mdx +++ b/docs/react-native/livestreaming.mdx @@ -10,13 +10,15 @@ import ConfigurePermissions from "./_components/configure-permissions.mdx"; # Livestreaming -This section provides examples on how to quickly set up a livestreaming flow in React Native using Fishjam. +This section provides examples on how to quickly set up livestreaming in React Native using Fishjam. You can learn more about [livestreaming in Fishjam](/livestreaming) in our documentation. ## How to start streaming? -First, you need to create a room of a special `livestream` type using our Server SDKs. If you are using sandbox, the [Room Manager](/room-manager#how-do-i-use-it) also allows you to create such room. -As the streaming is one-to-many, you can have only one streaming participant in that room. +### Prerequisites + +- [A room of `livestream` type](/livestreaming) + To start streaming, simply [join the room](/react-native/connecting) and [stream as you would normally do](/react-native/start-streaming). :::warning @@ -26,9 +28,17 @@ You cannot stream the camera and share a screen at the same time. ## How to receive the stream? +### Prerequisites + +- A peer connected and streaming in a room of `livestream` type +- A [viewer token](/livestreaming) generated for that room + Fishjam SDK provides a [`useLivestream`](/api/mobile/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 handle the process of receiving the stream and will forward it to `LivestreamView`. +The `useLivestream` hook will authorize you using the viewer token, handle the process of receiving the stream and will forward it to the `LivestreamView` component. + +## Examples + +Below are examples of how to implement the flows described above in React Native using Fishjam. :::info @@ -36,14 +46,7 @@ This guide assumes you already finished either the [Quick Setup](/react-native/q ::: -You can also use Fishjam to livestream your content to users. - -In order to do this you need to create two flows. - -1. The first flow will be used to stream the content. -2. The second flow will be used to receive the livestream. - -## Livestreaming Example +### Required permissions
Configure permissions before livestreaming @@ -52,6 +55,8 @@ In order to do this you need to create two flows.
+### Streamer setup example + Here is an example of a simple component that immediately streams the front camera: ```tsx @@ -105,7 +110,7 @@ async function getRoomDetails(roomName: string, peerName: string) { } ``` -## Receiving the stream +### Viewer setup example Here is an example of a component that just receives a livestream. The `LivestreamView` component will render the video stream once you connect to Fishjam using the connect method from `useLivestream`. diff --git a/docs/react/livestreaming.mdx b/docs/react/livestreaming.mdx index a7684279..54c21e70 100644 --- a/docs/react/livestreaming.mdx +++ b/docs/react/livestreaming.mdx @@ -4,14 +4,16 @@ sidebar_position: 8 # Livestreaming -This section provides examples on how to quickly set up a livestreaming flow in React using Fishjam. +This section provides examples on how to quickly set up livestreaming in React using Fishjam. You can learn more about [livestreaming in Fishjam](/livestreaming) in our documentation. ## How to start streaming? -First, you need to create a room of a special `livestream` type using our Server SDKs. If you are using sandbox, the [Room Manager](/room-manager#how-do-i-use-it) also allows you to create such room. -As the streaming is one-to-many, you can have only one streaming participant in that room. -To start streaming, simply [join the room](/react/connecting) and [stream as you would normally do](/react/start-streaming). +### Prerequisites + +- [A room of `livestream` type](/livestreaming) + +To start streaming, simply [join the livestream room](/react/connecting) and [stream as you would normally do](/react/start-streaming). :::warning Livestreaming scenario allows only one video and one audio track to be sent at a time. @@ -20,9 +22,13 @@ You cannot stream the camera and share a screen at the same time. ## 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. +### Prerequisites + +- A peer connected and streaming in a room of `livestream` type +- A [viewer token](/livestreaming) generated for that room + +Fishjam SDK provides the [`useLivestream`](/api/web/functions/useLivestream) hook to receive the broadcasted stream. +The [`useLivestream`](/api/web/functions/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"; From 2ff6a3bd88b9baca64eeeec3a836047a3af01c6f Mon Sep 17 00:00:00 2001 From: Adrian Czerwiec Date: Thu, 29 May 2025 14:20:55 +0200 Subject: [PATCH 08/14] minor improvements --- docs/react-native/livestreaming.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/react-native/livestreaming.mdx b/docs/react-native/livestreaming.mdx index 91ba4287..fbce2462 100644 --- a/docs/react-native/livestreaming.mdx +++ b/docs/react-native/livestreaming.mdx @@ -34,7 +34,7 @@ You cannot stream the camera and share a screen at the same time. - A [viewer token](/livestreaming) generated for that room Fishjam SDK provides a [`useLivestream`](/api/mobile/functions/useLivestream) hook to receive the broadcasted stream. -The `useLivestream` hook will authorize you using the viewer token, handle the process of receiving the stream and will forward it to the `LivestreamView` component. +The [`useLivestream`](/api/mobile/functions/useLivestream) hook will authorize you using the [viewer token](/livestreaming), handle the process of receiving the stream and will forward it to the `LivestreamView` component. ## Examples @@ -113,7 +113,7 @@ async function getRoomDetails(roomName: string, peerName: string) { ### Viewer setup example Here is an example of a component that just receives a livestream. -The `LivestreamView` component will render the video stream once you connect to Fishjam using the connect method from `useLivestream`. +The `LivestreamView` component will render the video stream once you connect to Fishjam using the connect method from [`useLivestream`](/api/mobile/functions/useLivestream). ```tsx import { useCallback, useEffect } from "react"; From 1c70d62cc0080a308a392f2e848803abdd66f33f Mon Sep 17 00:00:00 2001 From: Adrian Czerwiec Date: Thu, 29 May 2025 14:33:05 +0200 Subject: [PATCH 09/14] add streaming example in react --- docs/react-native/livestreaming.mdx | 1 + docs/react/livestreaming.mdx | 26 ++++++++++++++++++++++++++ 2 files changed, 27 insertions(+) diff --git a/docs/react-native/livestreaming.mdx b/docs/react-native/livestreaming.mdx index fbce2462..c7ec8709 100644 --- a/docs/react-native/livestreaming.mdx +++ b/docs/react-native/livestreaming.mdx @@ -18,6 +18,7 @@ You can learn more about [livestreaming in Fishjam](/livestreaming) in our docum ### Prerequisites - [A room of `livestream` type](/livestreaming) +- A [peer token](/glossary#peer-token) generated for that room To start streaming, simply [join the room](/react-native/connecting) and [stream as you would normally do](/react-native/start-streaming). diff --git a/docs/react/livestreaming.mdx b/docs/react/livestreaming.mdx index 54c21e70..4bb5d3a8 100644 --- a/docs/react/livestreaming.mdx +++ b/docs/react/livestreaming.mdx @@ -12,6 +12,7 @@ You can learn more about [livestreaming in Fishjam](/livestreaming) in our docum ### Prerequisites - [A room of `livestream` type](/livestreaming) +- A [peer token](/glossary#peer-token) generated for that room To start streaming, simply [join the livestream room](/react/connecting) and [stream as you would normally do](/react/start-streaming). @@ -20,6 +21,31 @@ Livestreaming scenario allows only one video and one audio track to be sent at a You cannot stream the camera and share a screen at the same time. ::: +```ts +import { useLivestream } from "@fishjam-cloud/react-client"; + +export function useStreamContent(peerToken: string, fishjamUrl: string) { + const { initializeDevices } = useInitializeDevices(); + + const { connect } = useConnection(); + + const initializeDevicesAndStream = useCallback(async () => { + // Initialize devices (camera, microphone, etc.) + await initializeDevices(); + + // Connect to the livestream room + await connect({ + url: fishjamUrl, + token: peerToken, + }); + }, [initializeDevices, connect]); + + useEffect(() => { + initializeDevicesAndStream(); + }, [initializeDevicesAndStream]); +} +``` + ## How to receive the stream? ### Prerequisites From 9ccdc75b0f842dd8d36d0e01eb686431d8c69eee Mon Sep 17 00:00:00 2001 From: Adrian Czerwiec Date: Thu, 29 May 2025 14:39:35 +0200 Subject: [PATCH 10/14] fix enigmatic sentence --- docs/react-native/livestreaming.mdx | 3 ++- docs/room-manager.md | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/react-native/livestreaming.mdx b/docs/react-native/livestreaming.mdx index c7ec8709..1220ebea 100644 --- a/docs/react-native/livestreaming.mdx +++ b/docs/react-native/livestreaming.mdx @@ -35,7 +35,8 @@ You cannot stream the camera and share a screen at the same time. - A [viewer token](/livestreaming) generated for that room Fishjam SDK provides a [`useLivestream`](/api/mobile/functions/useLivestream) hook to receive the broadcasted stream. -The [`useLivestream`](/api/mobile/functions/useLivestream) hook will authorize you using the [viewer token](/livestreaming), handle the process of receiving the stream and will forward it to the `LivestreamView` component. +Pass the viewer token to the `connect` method of the hook to establish a connection with Fishjam. +Once the connection is established, the `LivestreamView` component will render the video stream. ## Examples diff --git a/docs/room-manager.md b/docs/room-manager.md index 206a6db9..162a37c6 100644 --- a/docs/room-manager.md +++ b/docs/room-manager.md @@ -50,7 +50,7 @@ You can create 3 types of rooms: #### Example GET Request URL ``` -https://fishjam.io/api/v1/connect//room-manager?roomName=foo&peerName=bar&roomType=conference +https://fishjam.io/api/v1/connect//room-manager?roomName=foo&peerName=bar&roomType=full-feature ``` :::note From bb472535e6e597114105b45b271bfa99388dd823 Mon Sep 17 00:00:00 2001 From: Adrian Czerwiec Date: Thu, 29 May 2025 15:01:35 +0200 Subject: [PATCH 11/14] cr improvements --- docs/react-native/livestreaming.mdx | 3 ++- docs/react/livestreaming.mdx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/react-native/livestreaming.mdx b/docs/react-native/livestreaming.mdx index 1220ebea..e4263587 100644 --- a/docs/react-native/livestreaming.mdx +++ b/docs/react-native/livestreaming.mdx @@ -20,7 +20,7 @@ You can learn more about [livestreaming in Fishjam](/livestreaming) in our docum - [A room of `livestream` type](/livestreaming) - A [peer token](/glossary#peer-token) generated for that room -To start streaming, simply [join the room](/react-native/connecting) and [stream as you would normally do](/react-native/start-streaming). +To start streaming, simply [join the room](/react-native/connecting) and [stream as you normally would](/react-native/start-streaming). :::warning Livestreaming scenario allows only one video and one audio track to be sent at a time. @@ -160,6 +160,7 @@ export function Receiver() { async function getViewerToken(roomName: string) { // This will work ONLY for the Sandbox App + // see https://fishjam.io/docs/livestreaming const response = await fetch( `https://fishjam.io/api/v1/connect/${YOUR_APP_ID}/room-manager/${roomName}/broadcast-viewer-token`, ); diff --git a/docs/react/livestreaming.mdx b/docs/react/livestreaming.mdx index 4bb5d3a8..e6154279 100644 --- a/docs/react/livestreaming.mdx +++ b/docs/react/livestreaming.mdx @@ -14,7 +14,7 @@ You can learn more about [livestreaming in Fishjam](/livestreaming) in our docum - [A room of `livestream` type](/livestreaming) - A [peer token](/glossary#peer-token) generated for that room -To start streaming, simply [join the livestream room](/react/connecting) and [stream as you would normally do](/react/start-streaming). +To start streaming, simply [join the livestream room](/react/connecting) and [stream as you normally would](/react/start-streaming). :::warning Livestreaming scenario allows only one video and one audio track to be sent at a time. From fcf13fb45f6451ec5d377519f718c1552684b24a Mon Sep 17 00:00:00 2001 From: Adrian Czerwiec Date: Fri, 30 May 2025 10:44:22 +0200 Subject: [PATCH 12/14] adjust note about only 1 v/a track --- docs/livestreaming.mdx | 5 +++-- docs/react-native/livestreaming.mdx | 4 ++-- docs/react/livestreaming.mdx | 2 +- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/docs/livestreaming.mdx b/docs/livestreaming.mdx index 6cb1e5e9..b826e502 100644 --- a/docs/livestreaming.mdx +++ b/docs/livestreaming.mdx @@ -50,8 +50,9 @@ https://fishjam.io/api/v1/connect//room-manager?roomName=foo&peer 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. +:::note +Livestreaming scenario allows only one video and one audio track to be sent at a time. + Any additional tracks will be ignored and will not be available to the viewers. ::: ### Viewers diff --git a/docs/react-native/livestreaming.mdx b/docs/react-native/livestreaming.mdx index e4263587..8618a90e 100644 --- a/docs/react-native/livestreaming.mdx +++ b/docs/react-native/livestreaming.mdx @@ -22,9 +22,9 @@ You can learn more about [livestreaming in Fishjam](/livestreaming) in our docum To start streaming, simply [join the room](/react-native/connecting) and [stream as you normally would](/react-native/start-streaming). -:::warning +:::note Livestreaming scenario allows only one video and one audio track to be sent at a time. -You cannot stream the camera and share a screen at the same time. +Any additional tracks will be ignored and will not be available to the viewers. ::: ## How to receive the stream? diff --git a/docs/react/livestreaming.mdx b/docs/react/livestreaming.mdx index e6154279..96fa8b0d 100644 --- a/docs/react/livestreaming.mdx +++ b/docs/react/livestreaming.mdx @@ -18,7 +18,7 @@ To start streaming, simply [join the livestream room](/react/connecting) and [st :::warning Livestreaming scenario allows only one video and one audio track to be sent at a time. -You cannot stream the camera and share a screen at the same time. +Any additional tracks will be ignored and will not be available to the viewers. ::: ```ts From 11275603b62dd0bd0ed4ddd5212e1897412598a7 Mon Sep 17 00:00:00 2001 From: Adrian Czerwiec Date: Fri, 30 May 2025 11:08:45 +0200 Subject: [PATCH 13/14] remove a not the best snippet --- docs/react/livestreaming.mdx | 25 ------------------------- 1 file changed, 25 deletions(-) diff --git a/docs/react/livestreaming.mdx b/docs/react/livestreaming.mdx index 96fa8b0d..fbe860c2 100644 --- a/docs/react/livestreaming.mdx +++ b/docs/react/livestreaming.mdx @@ -21,31 +21,6 @@ Livestreaming scenario allows only one video and one audio track to be sent at a Any additional tracks will be ignored and will not be available to the viewers. ::: -```ts -import { useLivestream } from "@fishjam-cloud/react-client"; - -export function useStreamContent(peerToken: string, fishjamUrl: string) { - const { initializeDevices } = useInitializeDevices(); - - const { connect } = useConnection(); - - const initializeDevicesAndStream = useCallback(async () => { - // Initialize devices (camera, microphone, etc.) - await initializeDevices(); - - // Connect to the livestream room - await connect({ - url: fishjamUrl, - token: peerToken, - }); - }, [initializeDevices, connect]); - - useEffect(() => { - initializeDevicesAndStream(); - }, [initializeDevicesAndStream]); -} -``` - ## How to receive the stream? ### Prerequisites From 88702b898408e2311b2b80337d6e9f9731a17b5d Mon Sep 17 00:00:00 2001 From: Adrian Czerwiec Date: Fri, 30 May 2025 11:18:21 +0200 Subject: [PATCH 14/14] change warn to note --- docs/react/livestreaming.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/react/livestreaming.mdx b/docs/react/livestreaming.mdx index fbe860c2..f8deb80b 100644 --- a/docs/react/livestreaming.mdx +++ b/docs/react/livestreaming.mdx @@ -16,7 +16,7 @@ You can learn more about [livestreaming in Fishjam](/livestreaming) in our docum To start streaming, simply [join the livestream room](/react/connecting) and [stream as you normally would](/react/start-streaming). -:::warning +:::note Livestreaming scenario allows only one video and one audio track to be sent at a time. Any additional tracks will be ignored and will not be available to the viewers. :::