react-lib

This library offers React ApiRTC high order components. Theses are mostly hooks to fasten your ApiRTC integration.

Install

npm install @apirtc/react-lib @apirtc/apirtc

Note: @apirtc/apirtc is required as a peer dependency.

Coding example

Visit this codesandbox to understand how easy it is to create a simple conferencing application with @apirtc/react-lib.

Hooks

useSession

Get a stateful session:

import { useSession } from "@apirtc/react-lib";
const [credentials] = useState({ apiKey: "your_api_key" });
const { session } = useSession(credentials);

useUserMediaDevices

Get a stateful list of available media devices:

import { useUserMediaDevices } from "@apirtc/react-lib";
const { userMediaDevices } = useUserMediaDevices(session);

This hook can also manage devices selection.

useCameraStream

Get a stateful value for the camera stream:

import { useCameraStream } from "@apirtc/react-lib";
const { stream } = useCameraStream(session);

useStreamApplyAudioProcessor

import { useStreamApplyAudioProcessor } from "@apirtc/react-lib";
const { stream: noiseReductionStream } = useStreamApplyAudioProcessor(
  stream,
  "noiseReduction"
);

useStreamApplyVideoProcessor

import { useStreamApplyVideoProcessor } from "@apirtc/react-lib";
const { stream: blurredStream } = useStreamApplyVideoProcessor(stream, "blur");

usePresence

Get a stateful map of contacts by group:

import { usePresence } from "@apirtc/react-lib";
const [groups] = useState(["groupName1", "groupName2"]);
const { contactsByGroup } = usePresence(session, groups);

useConversation

Get a stateful Conversation:

import { useConversation } from "@apirtc/react-lib";
const { conversation } = useConversation(session, "conversationName");

useConversationContacts

Get Conversation Contacts in your state:

import { useConversationContacts } from "@apirtc/react-lib";
const { contacts } = useConversationContacts(conversation);

useConversationModeration

Get a set of candidates Contacts, and get notified of ejection:

import { useConversationModeration } from "@apirtc/react-lib";
const { candidates, onEjected, onEjectedSelf } =
  useConversationModeration(conversation);

useConversationMessages

import { useConversationMessages } from "@apirtc/react-lib";
const { messages, sendMessage } = useConversationMessages(conversation);

useConversationStreams

Control Streams to publish, and get stateful arrays of published and subscribed Streams:

import { useConversationStreams } from "@apirtc/react-lib";
const streamsToPublish = useMemo(
  () => (stream ? [{ stream: stream }] : []),
  [stream]
);
const { publishedStreams, subscribedStreams } = useConversationStreams(
  conversation,
  streamsToPublish
);

Components

VideoStream

Use it to display any ApiRTC Stream.

import { VideoStream } from "@apirtc/react-lib";

<VideoStream stream={stream} muted={false}></VideoStream>;

Note: For more comprehensive set of UI components, please have a look at @apirtc/mui-react-lib

Configure log level

Available log levels:

• debug
• info
• warn
• error

from web app code:

import { setLogLevel } from "@apirtc/react-lib";

setLogLevel("warn");

from console:

setApirtcReactLibLogLevel("debug");