Streaming media

This guide covers the basics of initializing and using camera and microphone devices. For more advanced device management (selecting specific devices, device switching, muting, etc.), see the Managing devices guide.

Initialize access to your devices

React (Web)

Fishjam provides an API to browse and manage media devices you can use.
To ask the browser for permission to list the available devices, call the initializeDevices function from useInitializeDevices hook.

You can choose whether to initialize both camera and microphone devices or just one of them by passing InitializeDevicesSettings as an argument. By default, both camera and microphone are initialized.

The initializeDevices function will return a Promise<InitializeDevicesResult> object.

import React, { useEffect } from "react";
import { useInitializeDevices } from "@fishjam-cloud/react-client";

export function useExample() {
  const { initializeDevices } = useInitializeDevices();

  useEffect(() => {
    initializeDevices().then((result) => {
      // optionally handle the result
      console.log(result);
    });
  }, [initializeDevices]);
}

note

The useInitializeDevices hook gives you the convenience of asking the user for all permissions at once.

It is not the only way to enable the device. You can just toggle the device using useCamera or useMicrophone hooks.

React Native (Mobile)

On mobile, you should use initializeDevices() when you first want to stream. This gives your app access to all available devices and automatically requests camera and microphone permissions. The SDK will show the system permission dialog if permissions haven't been granted yet.

Once devices are initialized, you can manage their state using the methods described in the Managing devices guide.

Device API

React (Web)

To manage users' camera and microphone devices, use the respective useCamera and useMicrophone hooks. Both of them have similar API. To keep things simple, we will just use the camera hook.

import React, { useEffect, useRef } from "react";
import { useCamera } from "@fishjam-cloud/react-client";

export function ExampleCameraPreview() {
  const videoRef = useRef<HTMLVideoElement>(null);

  const { activeCamera, selectCamera, cameraStream, cameraDevices } =
    useCamera();

  useEffect(() => {
    if (!videoRef.current) return;
    videoRef.current.srcObject = cameraStream ?? null;
  }, [cameraStream]);

  return (
    <div>
      <p>Active camera: {activeCamera?.label ?? "None"}</p>
      <select onChange={(e) => selectCamera(e.target.value)}>
        {cameraDevices.map(({ label, deviceId }) => (
          <option key={deviceId} value={deviceId}>
            {label}
          </option>
        ))}
      </select>
      {cameraStream && <video ref={videoRef} autoPlay />}
    </div>
  );
}

React Native (Mobile)

To manage users' camera and microphone devices, use the respective useCamera and useMicrophone hooks. Both of them have similar API. To keep things simple, we will just use the camera hook.

You can preview your camera stream using the RTCView component.

import React, { useEffect } from "react";
import { View, Text } from "react-native";
import { useCamera, RTCView } from "@fishjam-cloud/mobile-client";

export function CameraPreview() {
  const { startCamera, cameraStream } = useCamera();

  useEffect(() => {
    startCamera();
  }, [startCamera]);

  return (
    <View>
      {cameraStream ? (
        <RTCView
          mediaStream={cameraStream}
          style={{ height: 300, width: 300 }}
          objectFit="cover"
          mirror={true}
        />
      ) : (
        <Text>No camera stream</Text>
      )}
    </View>
  );
}