### Install FastAPI for Python Source: https://docs.fishjam.io/0.22.0/tutorials/backend-quick-start Commands to install the FastAPI framework and its standard dependencies using pip or poetry. ```bash pip install fastapi[standard] ``` ```bash poetry add fastapi[standard] ``` -------------------------------- ### Install Express.js for Node.js/TypeScript Source: https://docs.fishjam.io/0.22.0/tutorials/backend-quick-start Commands to install the Express.js framework and its TypeScript types using npm, yarn, or pnpm. ```bash npm install express @types/express ``` ```bash yarn add express @types/express ``` ```bash pnpm add express @types/express ``` -------------------------------- ### Complete Python Fishjam Backend Example with FastAPI Source: https://docs.fishjam.io/0.22.0/tutorials/backend-quick-start A full working example of a Python backend server using FastAPI and Fishjam SDK to create rooms and peers. ```python import os from fastapi import FastAPI, HTTPException from pydantic import BaseModel from fishjam import FishjamClient, PeerOptions app = FastAPI() fishjam_client = FishjamClient( os.environ["FISHJAM_ID"], os.environ["FISHJAM_MANAGEMENT_TOKEN"] ) class JoinRoomRequest(BaseModel): room_name: str peer_name: str @app.post("/join-room") async def join_room(request: JoinRoomRequest): try: room = fishjam_client.create_room() options = PeerOptions(metadata={"name": request.peer_name}) peer, peer_token = fishjam_client.create_peer(room.id, options=options) return { "room_id": room.id, "peer_token": peer_token } except Exception as e: raise HTTPException(status_code=500, detail=str(e)) ``` -------------------------------- ### Complete Fishjam Backend Example (Node.js/TypeScript) Source: https://docs.fishjam.io/0.23.0/tutorials/backend-quick-start This is a complete working example of a backend server using Node.js and Express to interact with the Fishjam API. It sets up an Express app, initializes the Fishjam client, and defines a `/join-room` POST endpoint to create rooms and peers. ```typescript import express from 'express'; import { FishjamClient } from '@fishjam-cloud/js-server-sdk'; const app = express(); app.use(express.json()); const fishjamClient = new FishjamClient({ fishjamId: process.env.FISHJAM_ID!, managementToken: process.env.FISHJAM_MANAGEMENT_TOKEN! }); app.post('/join-room', async (req, res) => { try { const { roomName, peerName } = req.body; const room = await fishjamClient.createRoom(); const { peer, peerToken } = await fishjamClient.createPeer(room.id, { metadata: { name: peerName }, }); res.json({ roomId: room.id, peerToken, }); } catch (error: any) { res.status(500).json({ error: error.message }); } }); app.listen(3000, () => { console.log('Fishjam backend running on port 3000'); }); ``` -------------------------------- ### Complete Node.js/TypeScript Fishjam Backend Example Source: https://docs.fishjam.io/0.22.0/tutorials/backend-quick-start A full working example of a Node.js/TypeScript backend server using Express.js and Fishjam SDK to create rooms and peers. ```typescript import express from 'express'; import { FishjamClient } from '@fishjam-cloud/js-server-sdk'; const app = express(); app.use(express.json()); const fishjamClient = new FishjamClient({ fishjamId: process.env.FISHJAM_ID!, managementToken: process.env.FISHJAM_MANAGEMENT_TOKEN! }); app.post('/join-room', async (req, res) => { try { const { roomName, peerName } = req.body; const room = await fishjamClient.createRoom(); const { peer, peerToken } = await fishjamClient.createPeer(room.id, { metadata: { name: peerName }, }); res.json({ roomId: room.id, peerToken, }); } catch (error: any) { res.status(500).json({ error: error.message }); } }); app.listen(3000, () => { console.log('Fishjam backend running on port 3000'); }); ``` -------------------------------- ### Complete Fishjam React Native App Example Source: https://docs.fishjam.io/0.22.0/tutorials/react-native-quick-start A comprehensive example integrating all previously shown components: starting a stream, displaying connection status, showing the local video preview, and rendering streams from other participants within a React Native application. It requires setting up the FISHJAM_ID environment variable. ```javascript import { Text, View, Button } from "react-native"; import { usePeers, useCamera, useConnection, useSandbox, VideoRendererView, VideoPreviewView, } from "@fishjam-cloud/react-native-client"; import React, { useCallback } from "react"; // Check https://fishjam.io/app for your Fishjam ID const FISHJAM_ID = `${process.env.EXPO_PUBLIC_FISHJAM_ID}`; function StartStreamingButton({ roomName, peerName, }: { roomName: string; peerName: string }) { const { prepareCamera } = useCamera(); const { joinRoom } = useConnection(); const { getSandboxPeerToken } = useSandbox({ fishjamId: FISHJAM_ID }); const startStreaming = useCallback(async () => { const peerToken = await getSandboxPeerToken(roomName, peerName); await prepareCamera({ cameraEnabled: true }); await joinRoom({ peerToken, fishjamId: FISHJAM_ID }); }, [joinRoom, prepareCamera, roomName, peerName]); return ; } ``` -------------------------------- ### Request Camera and Microphone Permissions with Hooks Source: https://docs.fishjam.io/next/how-to/react-native/installation Example of using `useCameraPermissions` and `useMicrophonePermissions` hooks from the Fishjam client to request camera and microphone permissions in a React Native component. It demonstrates how to get the permission status and trigger the request. ```javascript import { useCameraPermissions, useMicrophonePermissions, } from "@fishjam-cloud/react-native-client"; import { useEffect } from "react"; const [cameraPermission, requestCameraPermission, getCameraPermission] = useCameraPermissions(); const [ microphonePermission, requestMicrophonePermission, getMicrophonePermission, ] = useMicrophonePermissions(); useEffect(() => { requestCameraPermission(); requestMicrophonePermission(); }, []); ``` -------------------------------- ### Run Python Server with FastAPI Source: https://docs.fishjam.io/0.22.0/tutorials/backend-quick-start Command to run the FastAPI Python server, specifying the port. ```bash fastapi run --port 3000 ``` -------------------------------- ### Run Node.js/TypeScript Server Source: https://docs.fishjam.io/0.22.0/tutorials/backend-quick-start Commands to execute the Node.js/TypeScript backend server, either directly using tsx or by compiling to JavaScript first. ```bash # If using TypeScript directly npx tsx server.ts # Or compile and run npx tsc server.ts && node server.js ``` -------------------------------- ### Setup your client Source: https://docs.fishjam.io/0.22.0/how-to/backend/server-setup Set up your client to communicate with a Fishjam instance by obtaining your Fishjam ID and Management Token from the developer panel and initializing the client. ```APIDOC ## Setup your client Let's setup everything you need to start communicating with a Fishjam instance. First of all, view your app in the **Fishjam developer panel** and copy your **Fishjam ID** and the **Management Token**. They are required to proceed. Now, we are ready to dive into the code. ### Typescript ```typescript import { FishjamClient } from '@fishjam-cloud/js-server-sdk'; const fishjamId = process.env.FISHJAM_ID; const managementToken = process.env.FISHJAM_MANAGEMENT_TOKEN; const fishjamClient = new FishjamClient({ fishjamId, managementToken }); ``` ### Python ```python import os from fishjam import FishjamClient fishjam_id = os.environ["FISHJAM_ID"] management_token = os.environ["FISHJAM_MANAGEMENT_TOKEN"] fishjam_client = FishjamClient(fishjam_id, management_token) ``` ``` -------------------------------- ### POST /join-room Source: https://docs.fishjam.io/0.22.0/tutorials/backend-quick-start Creates a new room and adds a peer to it. It returns the room ID and a peer token for the client to join the room. ```APIDOC ## POST /join-room ### Description Creates a new room and adds a peer to it. It returns the room ID and a peer token for the client to join the room. ### Method POST ### Endpoint /join-room ### Parameters #### Request Body - **roomName** (string) - Required - The name of the room to create. - **peerName** (string) - Required - The name of the peer to add to the room. ### Request Example (Node.js/TypeScript) ```json { "roomName": "test-room", "peerName": "test-user" } ``` ### Request Example (Python) ```json { "room_name": "test-room", "peer_name": "test-user" } ``` ### Response #### Success Response (200) - **roomId** / **room_id** (string) - The ID of the created room. - **peerToken** / **peer_token** (string) - The token for the client to join the room. #### Response Example (Node.js/TypeScript) ```json { "roomId": "some-room-id", "peerToken": "some-peer-token" } ``` #### Response Example (Python) ```json { "room_id": "some-room-id", "peer_token": "some-peer-token" } ``` ``` -------------------------------- ### Join Room and Start Streaming with React Native Source: https://docs.fishjam.io/0.23.0/tutorials/react-native-quick-start This component joins a specified room and initiates video streaming. It utilizes the `useCamera`, `useConnection`, and `useSandbox` hooks from the Fishjam React Native client. The `getSandboxPeerToken` function is used for obtaining a peer token, followed by preparing the camera and joining the room. ```javascript import React, { useCallback } from "react"; import { Button } from "react-native"; import { useCamera, useConnection, useSandbox, } from "@fishjam-cloud/react-native-client"; // Check https://fishjam.io/app for your Fishjam ID const FISHJAM_ID = "YOUR_FISHJAM_ID"; export function StartStreamingButton({ roomName, peerName, }: { roomName: string; peerName: string; }) { const { prepareCamera } = useCamera(); const { joinRoom } = useConnection(); const { getSandboxPeerToken } = useSandbox({ fishjamId: FISHJAM_ID }); const startStreaming = useCallback(async () => { // In sandbox environment, you can get the peer token from our sandbox API // In production environment, you need to get it from your backend const peerToken = await getSandboxPeerToken(roomName, peerName); // Prepare camera await prepareCamera({ cameraEnabled: true }); // Join the room await joinRoom({ peerToken, fishjamId: FISHJAM_ID }); }, [joinRoom, prepareCamera, roomName, peerName]); return