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

$3

Get a stateful session:

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

$3

Get a stateful list of available media devices:

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

This hook can also manage devices selection.

$3

Get a stateful value for the camera stream:

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

$3

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

$3

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

$3

Get a stateful map of contacts by group:

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

$3

Get a stateful Conversation:

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

$3

Get Conversation Contacts in your state:

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

$3

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

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

$3

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

$3

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

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

$3

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

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

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

Components

$3

Use it to display any ApiRTC Stream.

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

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:

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

setLogLevel("warn")
`

from console:

`js
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:

`bash
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`