This library offers React ApiRTC high order components. Theses are mostly hooks to fasten your ApiRTC integration.
npm install @apirtc/react-lib @apirtc/apirtc
Note: @apirtc/apirtc is required as a peer dependency.
Visit this codesandbox to understand how easy it is to create a simple conferencing application with @apirtc/react-lib.
Get a stateful session:
import { useSession } from "@apirtc/react-lib";
const [credentials] = useState({ apiKey: "your_api_key" });
const { session } = useSession(credentials);
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.
Get a stateful value for the camera stream:
import { useCameraStream } from "@apirtc/react-lib";
const { stream } = useCameraStream(session);
import { useStreamApplyAudioProcessor } from "@apirtc/react-lib";
const { stream: noiseReductionStream } = useStreamApplyAudioProcessor(
stream,
"noiseReduction"
);
import { useStreamApplyVideoProcessor } from "@apirtc/react-lib";
const { stream: blurredStream } = useStreamApplyVideoProcessor(stream, "blur");
Get a stateful map of contacts by group:
import { usePresence } from "@apirtc/react-lib";
const [groups] = useState(["groupName1", "groupName2"]);
const { contactsByGroup } = usePresence(session, groups);
Get a stateful Conversation:
import { useConversation } from "@apirtc/react-lib";
const { conversation } = useConversation(session, "conversationName");
Get Conversation Contacts in your state:
import { useConversationContacts } from "@apirtc/react-lib";
const { contacts } = useConversationContacts(conversation);
Get a set of candidates Contacts, and get notified of ejection:
import { useConversationModeration } from "@apirtc/react-lib";
const { candidates, onEjected, onEjectedSelf } =
useConversationModeration(conversation);
import { useConversationMessages } from "@apirtc/react-lib";
const { messages, sendMessage } = useConversationMessages(conversation);
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
);
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
Available log levels:
from web app code:
import { setLogLevel } from "@apirtc/react-lib";
setLogLevel("warn");
from console:
setApirtcReactLibLogLevel("debug");
Generated using TypeDoc