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 the same API. To keep things simple, let's just use the camera hook.

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

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

  const { isStreaming, activeDevice, initialize, stream, devices } =
    useCamera();

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

  return (
    <div>
      {isStreaming && <p>You are going live!</p>}
      <p>Active device: {activeDevice?.label ?? "None"}</p>
      <select onChange={(e) => initialize(e.target.value)}>
        {devices.map(({ label, deviceId }) => (
          <option key={deviceId} value={deviceId}>
            {label}
          </option>
        ))}
      </select>
      {stream && <video ref={videoRef} autoPlay />}
    </div>
  );
}