FCE-1104: Add broadcasting documentation (#94)

## Description

- Added a simple Broadcaster/Receiver example.

Author: MiloszFilimowski

docs/react-native/broadcasting.mdx

@@ -0,0 +1,146 @@
+---
+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
+
+<details>
+<summary>Configure permissions before broadcasting</summary>
+
+<ConfigurePermissions />
+
+</details>
+
+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 (
+    <VideoPreviewView
+      style={{ width: "90%", aspectRatio: 1, alignSelf: "center" }}
+    />
+  );
+}
+
+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 (
+    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+      <VideoRendererView
+        key={broadcastedTrack.id}
+        trackId={broadcastedTrack.id}
+        videoLayout="FIT"
+        style={{ width: "90%", aspectRatio: 1, backgroundColor: "black" }}
+      />
+    </View>
+  );
+}
+
+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();
+}
+```