### Install and Run Video Player Example Source: https://fishjam.swmansion.com/docs/examples/react-native Instructions to install dependencies and run the video player example on Android or iOS. ```bash Copycd video-player yarn install npx expo prebuild npx expo run:android # or run:ios ``` -------------------------------- ### Install and Run Livestreaming Example Source: https://fishjam.swmansion.com/docs/examples/react Installs dependencies and runs the livestreaming example. This showcases separate streamer and viewer functionalities. ```bash cd livestreaming yarn install yarn dev ``` -------------------------------- ### Install and Run Minimal React Example Source: https://fishjam.swmansion.com/docs/examples/react Instructions to install dependencies and run the minimal React example for a basic video call. ```bash yarn install yarn dev ``` -------------------------------- ### Install and Run Text Chat Example Source: https://fishjam.swmansion.com/docs/examples/react-native Instructions to install dependencies and run the text chat example on Android or iOS. ```bash Copycd text-chat yarn install npx expo prebuild npx expo run:android # or run:ios ``` -------------------------------- ### Install and Run Audio-Only Example Source: https://fishjam.swmansion.com/docs/examples/react Installs dependencies and runs the audio-only example. This mode is optimized for voice communication by disabling video. ```bash cd audio-only yarn install yarn dev ``` -------------------------------- ### Install and Run Text Chat Example Source: https://fishjam.swmansion.com/docs/examples/react Installs dependencies and runs the text chat example. This demonstrates peer-to-peer messaging using WebRTC data channels. ```bash cd text-chat yarn install yarn dev ``` -------------------------------- ### Run Background Blur Example Source: https://fishjam.swmansion.com/docs/examples/react-native Installs dependencies and prepares the background blur example for running on Android or iOS. Ensure the blur package is installed first. ```bash cd blur-example yarn install npx expo prebuild npx expo run:android # or run:ios ``` -------------------------------- ### Install and Run Minimal React Native Example Source: https://fishjam.swmansion.com/docs/examples/react-native Instructions for installing dependencies and running the minimal video room example on an Android device. Ensure you are using a real device for testing as the iOS Simulator cannot access the camera. ```bash Copycd minimal-react-native yarn install npx expo prebuild npx expo run:android # or run:ios ``` -------------------------------- ### Install and Run Minimal Smelter Source: https://fishjam.swmansion.com/docs/examples/react Instructions to install dependencies and run the Minimal Smelter example. Requires a modern browser with WebAssembly support. ```bash cd minimal-smelter yarn install yarn dev ``` -------------------------------- ### Install and Run Fishjam Chat Source: https://fishjam.swmansion.com/docs/examples/react Instructions to install dependencies and run the Fishjam Chat example. This example includes features like screen sharing and background blur. ```bash cd fishjam-chat yarn install yarn dev ``` -------------------------------- ### Install FastAPI with uv Source: https://fishjam.swmansion.com/docs/tutorials/backend-quick-start Install FastAPI and its standard dependencies using uv. ```bash uv add fastapi[standard] ``` -------------------------------- ### Install iOS Pods Source: https://fishjam.swmansion.com/docs/tutorials/moq/react-native-publishing After installing the library, navigate to the ios directory and install the necessary pods. ```bash cd ios && pod install ``` -------------------------------- ### Install MoQ Packages (Bun) Source: https://fishjam.swmansion.com/docs/tutorials/moq/web-publishing Install the necessary MoQ packages for publishing using Bun. ```bash bun add @moq/lite @moq/publish ``` -------------------------------- ### Install Express with yarn Source: https://fishjam.swmansion.com/docs/tutorials/backend-quick-start Install the Express framework and its types using yarn. ```bash yarn add express @types/express ``` -------------------------------- ### Install with Bun Source: https://fishjam.swmansion.com/docs/how-to/client/installation Use this command to install the Fishjam React client using Bun. ```bash bun add @fishjam-cloud/react-client ``` -------------------------------- ### Install @moq/lite and @moq/watch with Bun Source: https://fishjam.swmansion.com/docs/tutorials/moq/web-subscribing Install the necessary MoQ packages for subscribing and watching streams using Bun. ```bash bun add @moq/lite @moq/watch ``` -------------------------------- ### Install MoQ Packages (npm) Source: https://fishjam.swmansion.com/docs/tutorials/moq/web-publishing Install the necessary MoQ packages for publishing using npm. ```bash npm install @moq/lite @moq/publish ``` -------------------------------- ### Install react-native-moq with Bun Source: https://fishjam.swmansion.com/docs/tutorials/moq/react-native-publishing Use this command to install the react-native-moq library using Bun. ```bash bun add react-native-moq ``` -------------------------------- ### Install Express with npm Source: https://fishjam.swmansion.com/docs/tutorials/backend-quick-start Install the Express framework and its types using npm. ```bash npm install express @types/express ``` -------------------------------- ### Install @moq/lite and @moq/watch with pnpm Source: https://fishjam.swmansion.com/docs/tutorials/moq/web-subscribing Install the necessary MoQ packages for subscribing and watching streams using pnpm. ```bash pnpm add @moq/lite @moq/watch ``` -------------------------------- ### Complete Picture-in-Picture Video Call Example Source: https://fishjam.swmansion.com/docs/how-to/client/picture-in-picture This example demonstrates a full video call screen with Picture-in-Picture capabilities, including starting and stopping PiP, rendering local and remote video streams, and handling multiple remote participants. ```javascript import React, { useRef } from "react"; import { FlatList, StyleSheet, View, Text, Button } from "react-native"; import { RTCPIPView, RTCView, startPIP, stopPIP, usePeers, type MediaStream, } from "@fishjam-cloud/react-native-client"; function VideoPlayer({ stream }: { stream: MediaStream | null }) { if (!stream) return No video; return ( ); } export function VideoCallScreen() { const pipViewRef = useRef>(null); const { localPeer, remotePeers } = usePeers(); const firstRemotePeer = remotePeers[0]; const remoteStream = firstRemotePeer?.cameraTrack?.stream; return ( } {cameraStream && (

Your Video

)}

Other Participants

{remotePeers.map((peer) => (
{peer.cameraTrack?.stream && ( )}
))}
); } export default function App() { return ( ); } ``` -------------------------------- ### connect() Source: https://fishjam.swmansion.com/docs/api/web/interfaces/UseLivestreamViewerResult Starts receiving a livestream. Requires connection configuration and optionally a URL. Use a token for private streams or a stream ID for public streams. ```APIDOC ## connect() ### Description Callback to start receiving a livestream. If the livestream is private, provide `token`. If the livestream is public, provide `streamId`. ### Method connect ### Parameters #### Path Parameters - **config** (ConnectViewerConfig) - Required - Configuration for connecting to the stream. - **url?** (string) - Optional - The URL for the stream. ### Returns `Promise` ``` -------------------------------- ### Install Python SDK with uv Source: https://fishjam.swmansion.com/docs/how-to/backend/server-setup Use uv to add the Fishjam Python server SDK to your project. ```bash uv add fishjam-server-sdk ``` -------------------------------- ### Install FastAPI with poetry Source: https://fishjam.swmansion.com/docs/tutorials/backend-quick-start Add FastAPI and its standard dependencies to your project using poetry. ```bash poetry add fastapi[standard] ``` -------------------------------- ### Install Client with npm Source: https://fishjam.swmansion.com/docs/how-to/client/installation Use this command to install the Fishjam React Native client and react-native-get-random-values using npm. ```bash npm install @fishjam-cloud/react-native-client react-native-get-random-values@1.11.0 ``` -------------------------------- ### Install Gemini Integration for Python Source: https://fishjam.swmansion.com/docs/integrations/gemini-live-integration Install the Fishjam Python Server SDK with the 'gemini' extra to include necessary libraries for Gemini integration. ```bash pip install "fishjam-server-sdk[gemini]" ``` -------------------------------- ### Start Node.js/TypeScript Backend Server Source: https://fishjam.swmansion.com/docs/tutorials/backend-quick-start Use this command to start your Node.js/TypeScript backend server directly with tsx, or compile and run the JavaScript output. ```bash npx tsx server.ts ``` ```bash npx tsc server.ts && node server.js ``` -------------------------------- ### Install React Native WebRTC Background Blur (npm) Source: https://fishjam.swmansion.com/docs/examples/react-native Installs the background blur package for React Native using npm. ```bash npm install @fishjam-cloud/react-native-webrtc-background-blur ``` -------------------------------- ### Install Fishjam React Native Client with Bun Source: https://fishjam.swmansion.com/docs/tutorials/react-native-quick-start Use this command to install the Fishjam React Native client package using Bun. ```bash bun add @fishjam-cloud/react-native-client ``` -------------------------------- ### Install React Native WebRTC Background Blur (Yarn) Source: https://fishjam.swmansion.com/docs/examples/react-native Installs the background blur package for React Native using Yarn. ```bash yarn add @fishjam-cloud/react-native-webrtc-background-blur ``` -------------------------------- ### Join Room and Start Streaming in React Source: https://fishjam.swmansion.com/docs/tutorials/react-quick-start This component demonstrates how to join a room and start streaming using Fishjam hooks. It uses the Sandbox API for peer token generation and initializes devices for camera access. ```jsx import React from "react"; import { useConnection, useCamera, useInitializeDevices, useSandbox, } from "@fishjam-cloud/react-client"; const SANDBOX_API_URL = "YOUR_SANDBOX_API_URL"; export function JoinRoomButton() { const { joinRoom } = useConnection(); const { selectCamera } = useCamera(); const { initializeDevices } = useInitializeDevices(); const { getSandboxPeerToken } = useSandbox({ sandboxApiUrl: SANDBOX_API_URL, }); const handleJoinRoom = async () => { const roomName = "testRoom"; const peerName = "testUser"; // For testing with the Sandbox API, use getSandboxPeerToken // For production apps, get the peerToken from your own backend instead const peerToken = await getSandboxPeerToken(roomName, peerName); // Start camera by selecting the first available camera await initializeDevices({ enableAudio: false }); // or just initializeDevices(); if you want both camera and mic // Join the room await joinRoom({ peerToken }); }; return ; } ``` -------------------------------- ### Join Room and Start Streaming Source: https://fishjam.swmansion.com/docs/tutorials/react-native-quick-start This component joins a room and starts streaming video. It uses the Sandbox API for token generation and initializes devices for camera access. For production, replace Sandbox token generation with your own backend. ```javascript import React from "react"; import { Button } from "react-native"; import { useConnection, useSandbox, useInitializeDevices, } from "@fishjam-cloud/react-native-client"; const SANDBOX_API_URL = "YOUR_SANDBOX_API_URL"; export function JoinRoomButton() { const { joinRoom } = useConnection(); const { initializeDevices } = useInitializeDevices(); const { getSandboxPeerToken } = useSandbox({ sandboxApiUrl: SANDBOX_API_URL, }); const handleJoinRoom = async () => { const roomName = "testRoom"; const peerName = "testUser"; // For testing with the Sandbox API, use getSandboxPeerToken // For production apps, get the peerToken from your own backend instead const peerToken = await getSandboxPeerToken(roomName, peerName); // Start camera by selecting the first available camera await initializeDevices({ enableAudio: false }); // or just initializeDevices(); if you want both camera and mic // Join the room await joinRoom({ peerToken }); }; return