@jellyfish-dev/react-client-sdk

Jellyfish React client

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

Documentation

Documentation is available here or you can generate it locally:

npm run docs

Installation

You can install the library using npm:

npm install @jellyfish-dev/react-client-sdk

It was tested with nodejs version mentioned in .tool-versions file.

Usage

For pure TypeScript usage, see Jellyfish TS client.

Prerequisites:

• Running Jellyfish server.
• Created room and token of peer in that room. You can use dashboard 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, JellyfishContextProvider } from "./components/App";

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

// components/App.tsx
import VideoPlayer from "./VideoPlayer";
import { SCREEN_SHARING_MEDIA_CONSTRAINTS } from "@jellyfish-dev/react-client-sdk";
import { create } from "@jellyfish-dev/react-client-sdk";
import { useState } from "react";

// Example metadata types for peer and track
// You can define your own metadata types just make sure they are serializable
export type PeerMetadata = {
  name: string;
};

export type TrackMetadata = {
  type: "camera" | "screen";
};

// Create a Membrane client instance
// remember to use JellyfishContextProvider
export const { useApi, useTracks, useStatus, useConnect, useDisconnect, JellyfishContextProvider } = create<
  PeerMetadata,
  TrackMetadata
>();

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({
              peerMetadata: { name: "John Doe" }, // example metadata
              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, screenStream, { 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>
  );
};

Contributing

We welcome contributions to this SDK. Please report any bugs or issues you find or feel free to make a pull request with your own bug fixes and/or features.

Detailed information about contributing to Jellyfish Dashboard can be found in contributing document.

Examples

For examples, see examples folder.

More information about usage of webrtc can be found in MembraneWebRTC documentation.

Jellyfish ecosystem

Client SDKs	React, React Native, iOs, Android
Server SDKs	Elixir, Python, OpenAPI
Services	Videoroom - an example videoconferencing app written in elixir Dashboard - an internal tool used to showcase Jellyfish's capabilities
Resources	Jellyfish Book - theory of the framework, Docs, Tutorials
Membrane	Jellyfish is based on Membrane, Discord
Compositor	Compositor - Membrane plugin to transform video
Protobufs	If you want to use Jellyfish on your own, you can use our protobufs

Copyright and License

Copyright 2023, Software Mansion

Licensed under the Apache License, Version 2.0