Skip to main content

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.

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

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 { useCamera } from "@fishjam-cloud/react-client";

function ExampleComponent() {
  const camera = useCamera();

  return (
    <div>
      {camera.isStreaming && <p>You are going live!</p>}

      <p>Active device: {camera.activeDevice?.label ?? "None"}</p>

      <select onChange={(e) => camera.initialize(e.target.value)}>
        {camera.devices.map(({ label, deviceId }) => (
          <option key={deviceId} value={deviceId}>
            {label}
          </option>
        ))}
      </select>

      {camera.stream && <VideoPlayer stream={camera.stream} />}
    </div>
  );
}