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)

useTranscriptService

Start, stop, and get messages from a TranscriptService in a conversation.

import { useTranscriptService } from "@apirtc/react-lib"

const { transcriptService, hasStarted, transcripts, startTranscriptService, stopTranscriptService } = useTranscriptService(conversation, true)

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")

Contribute

You need to get access in write mode to the repository.

The 'developers' team has access.

Then work on a branch and submit merge requests to main branch.

Code Formatting

This project uses Prettier for code formatting.

Most editors can format automatically using the provided configuration. If not, you can manually run:

npm run format

Release a new version

• run npm run test, making sure tests passed, and code coverage is fully 100%.

• Update README documentation section if relevant.

• Update codesandbox mentioned above if necessary.

• Update package.json version number.

• Update CHANGELOG accordingly.

• run npm run build

• run npm publish --access public