@fishjam-cloud/react-client

Fishjam React Client

React client library for Fishjam Cloud. It is a wrapper around the TS client.

Documentation

Documentation is available here or you can generate it locally:

yarn run docs

Installation

You can install this package using npm:

npm install @fishjam-cloud/react-client

or yarn:

yarn @fishjam-cloud/react-client

Usage

Prerequisites:

• Account on Fishjam Cloud with App configured.
• Created room and token of peer in that room. You can use Room Manager to create room and peer token.

This snippet is based on minimal-react example.

// main.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import { App, FishjamContextProvider } from "./components/App";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <FishjamContextProvider>
      <App />
    </FishjamContextProvider>
  </React.StrictMode>,
);

// components/App.tsx
import VideoPlayer from "./VideoPlayer";
import { SCREEN_SHARING_MEDIA_CONSTRAINTS } from "@fishjam-cloud/react-client";
import { create } from "@fishjam-cloud/react-client";
import { useState } from "react";

// Create a Fishjam client instance
// remember to use FishjamContextProvider
export const { useApi, useTracks, useStatus, useConnect, useDisconnect, FishjamContextProvider } = create();

export const App = () => {
  const [token, setToken] = useState("");

  const connect = useConnect();
  const disconnect = useDisconnect();
  const api = useApi();
  const status = useStatus();
  const tracks = useTracks();

  return (
    <div>
      <input value={token} onChange={(e) => setToken(() => e?.target?.value)} placeholder="token" />
      <div>
        <button
          disabled={token === "" || status === "joined"}
          onClick={() => {
            if (!token || token === "") throw Error("Token is empty");
            connect({
              token: token,
            });
          }}
        >
          Connect
        </button>
        <button
          disabled={status !== "joined"}
          onClick={() => {
            disconnect();
          }}
        >
          Disconnect
        </button>
        <button
          disabled={status !== "joined"}
          onClick={() => {
            // Get screen sharing MediaStream
            navigator.mediaDevices.getDisplayMedia(SCREEN_SHARING_MEDIA_CONSTRAINTS).then((screenStream) => {
              // Add local MediaStream to webrtc
              screenStream.getTracks().forEach((track) => api.addTrack(track, { type: "screen" }));
            });
          }}
        >
          Start screen share
        </button>
        <span>Status: {status}</span>
      </div>
      {/* Render the remote tracks from other peers*/}
      {Object.values(tracks).map(({ stream, trackId }) => (
        <VideoPlayer key={trackId} stream={stream} /> // Simple component to render a video element
      ))}
    </div>
  );
};

Examples

For examples, see examples folder.

Copyright and License

Copyright 2024, Software Mansion

Licensed under the Apache License, Version 2.0