react library for ApiRTC
npm install @apirtc/react-libThis 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:
``ts`
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:
`ts`
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:
`ts`
import { useCameraStream } from "@apirtc/react-lib"
const { stream } = useCameraStream(session)
`ts`
import { useStreamApplyAudioProcessor } from "@apirtc/react-lib"
const { stream: noiseReductionStream } = useStreamApplyAudioProcessor(stream, "noiseReduction")
`ts`
import { useStreamApplyVideoProcessor } from "@apirtc/react-lib"
const { stream: blurredStream } = useStreamApplyVideoProcessor(stream, "blur")
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)
Get a stateful Conversation:
`ts`
import { useConversation } from "@apirtc/react-lib"
const { conversation } = useConversation(session, "conversationName")
Get Conversation Contacts in your state:
`ts`
import { useConversationContacts } from "@apirtc/react-lib"
const { contacts } = useConversationContacts(conversation)
Get a set of candidates Contacts, and get notified of ejection:
`ts`
import { useConversationModeration } from "@apirtc/react-lib"
const { candidates, onEjected, onEjectedSelf } = useConversationModeration(conversation)
`ts`
import { useConversationMessages } from "@apirtc/react-lib"
const { messages, sendMessage } = useConversationMessages(conversation)
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)
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)
`
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
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")
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.
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
- 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`