React client library for Fishjam Cloud. It is a wrapper around the TS client.
Documentation is available here or you can generate it locally:
yarn run docs
You can install this package using npm
:
npm install @fishjam-cloud/react-client
or yarn
:
yarn @fishjam-cloud/react-client
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>
);
};
For examples, see examples folder.
Copyright 2024, Software Mansion
Licensed under the Apache License, Version 2.0