diff --git a/.spelling b/.spelling index 695cd09d..f84941fe 100644 --- a/.spelling +++ b/.spelling @@ -92,3 +92,6 @@ WHEP livestream livestreaming broadcasted +livestream +livestreamer +livestreams 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/broadcasting.mdx b/docs/react-native/broadcasting.mdx deleted file mode 100644 index 4a66cfae..00000000 --- a/docs/react-native/broadcasting.mdx +++ /dev/null @@ -1,146 +0,0 @@ ---- -sidebar_position: 9 -title: "Broadcasting" -description: "How to use Fishjam for broadcasting" ---- - -import Tabs from "@theme/Tabs"; -import TabItem from "@theme/TabItem"; -import ConfigurePermissions from "./_components/configure-permissions.mdx"; - -# Broadcasting - -:::info - -This guide assumes you already finished either the [Quick Setup](/react-native/quick-setup) or [Installation](/react-native/installation) guide. - -::: - -You can also use Fishjam to broadcast 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. - -## Broadcasting - -
-Configure permissions before broadcasting - - - -
- -Here is an example of a very simple broadcaster that immediately broadcasts the front camera to all users in a room: - -```tsx -import { useEffect } from "react"; -import { - useCamera, - useConnection, - VideoPreviewView, -} from "@fishjam-cloud/react-native-client"; - -export function Broadcaster() { - const { prepareCamera } = useCamera(); - const { joinRoom, leaveRoom } = useConnection(); - - useEffect(() => { - const startBroadcasting = async () => { - console.log("Getting room details..."); - const { url, peerToken } = await getRoomDetails( - "RoomName", - "BroadcastingUserName", - ); - - console.log("Preparing camera..."); - await prepareCamera({ cameraEnabled: true }); - - await joinRoom({ url, peerToken }); - console.log("Broadcasting..."); - }; - - startBroadcasting(); - return () => { - leaveRoom(); - }; - }, [prepareCamera, joinRoom, leaveRoom]); - - return ( - - ); -} - -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}`, - ); - return response.json(); -} -``` - -## Receiving - -Here is an example of a very simple receiver that receives the content from the broadcaster: - -```tsx -import { useEffect } from "react"; -import { View } from "react-native"; -import { - useConnection, - usePeers, - VideoRendererView, -} from "@fishjam-cloud/react-native-client"; - -export function Receiver() { - const { joinRoom, leaveRoom } = useConnection(); - const { remotePeers } = usePeers(); - - const broadcastedTrack = remotePeers.at(0)?.cameraTrack; - - useEffect(() => { - const startReceiving = async () => { - console.log("Getting room details..."); - const { url, peerToken } = await getRoomDetails( - "RoomName", - "ReceivingUserName", - ); - await joinRoom({ url, peerToken }); - console.log("Receiving..."); - }; - - startReceiving(); - - return () => { - leaveRoom(); - }; - }, [joinRoom, leaveRoom]); - - if (!broadcastedTrack) { - return null; - } - - return ( - - - - ); -} - -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}`, - ); - return response.json(); -} -``` diff --git a/docs/react-native/livestreaming.mdx b/docs/react-native/livestreaming.mdx new file mode 100644 index 00000000..8618a90e --- /dev/null +++ b/docs/react-native/livestreaming.mdx @@ -0,0 +1,169 @@ +--- +sidebar_position: 9 +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"; + +# Livestreaming + +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? + +### 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 normally would](/react-native/start-streaming). + +:::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. +::: + +## 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. +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 + +Below are examples of how to implement the flows described above in React Native using Fishjam. + +:::info + +This guide assumes you already finished either the [Quick Setup](/react-native/quick-setup) or [Installation](/react-native/installation) guide. + +::: + +### Required permissions + +
+Configure permissions before livestreaming + + + +
+ +### Streamer setup example + +Here is an example of a simple component that immediately streams the front camera: + +```tsx +import { useEffect } from "react"; +import { + useCamera, + useConnection, + VideoPreviewView, +} from "@fishjam-cloud/react-native-client"; + +const ROOM_MANAGER_ID = ""; + +export default function Streamer() { + const { prepareCamera } = useCamera(); + const { joinRoom, leaveRoom } = useConnection(); + + useEffect(() => { + const startStreaming = async () => { + console.log("Getting room details..."); + const { url, peerToken } = await getRoomDetails( + "TestRoom", + "StreamerUserName", + ); + + console.log("Preparing camera..."); + await prepareCamera({ cameraEnabled: true }); + + await joinRoom({ url, peerToken }); + console.log("Streaming..."); + }; + + startStreaming(); + return () => { + leaveRoom(); + }; + }, [prepareCamera, joinRoom, leaveRoom]); + + return ( + + ); +} + +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=livestream`, + ); + return response.json(); +} +``` + +### 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`](/api/mobile/functions/useLivestream). + +```tsx +import { useCallback, useEffect } from "react"; +import { View } from "react-native"; +import { + useLivestream, + LivestreamView, +} from "@fishjam-cloud/react-native-client"; + +const YOUR_APP_ID = ""; + +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/live`, token); + console.log("Receiving..."); + } catch (err) { + console.log(err); + } + }, [connect]); + + useEffect(() => { + handleConnect(); + + return () => { + disconnect(); + }; + }, [handleConnect, disconnect]); + + return ( + + + + ); +} + +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`, + ); + return response.json(); +} +``` diff --git a/docs/react/livestreaming.mdx b/docs/react/livestreaming.mdx index e285c988..f8deb80b 100644 --- a/docs/react/livestreaming.mdx +++ b/docs/react/livestreaming.mdx @@ -4,19 +4,32 @@ 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 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 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). +### 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 normally would](/react/start-streaming). + +:::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. +::: ## 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"; diff --git a/docs/room-manager.md b/docs/room-manager.md index 3076ae2e..162a37c6 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=full-feature ``` :::note 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