Streaming media

Initialize access to your devices

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.

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

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

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

info

The code above will make the browser ask the user for camera and microphone permissions.

Device API

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

import { 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>
  );
}