RingCentral Client Video SDK React Components Library

The RingCentral Client Video SDK makes it easy to do the collaborative audio calling, video calling, and screen sharing based on the RingCentral platform service.

The RingCentral Client Video SDK React Component Library supplies client-side state management and reusable UI components for common web interfaces used in audio and video conferencing applications, including:

• ActionBar
• Baisc Actions
  • AudioAction
  • VideoAction
  • MeetingInfoAction
  • ParticipantAction
  • LogoIcon
  • ScreenSharingAction
  • InviteAction
  • LeaveAction
• Advanced Actions
  • ChatAction
  • RecordAction
  • MoreAction
  • ClosedCaptionAction
  • LiveTranscriptionAction
• Layout
  • Gallery
  • Speaker
  • Filmstrip
  • Custom
• Device list panel
• Participant panel
• Chat panel
• Meeting info panel

All components follow Google's Material Design, based on Material UI Library.

Samples

All samples refer to ringcentral videosdk js samples.

• Basic Meeting Sample app with @ringcentral/video-sdk-react sdk

Installation

If you are adding this library to your existing application, add @ringcentral/video-sdk and the necessary peer dependencies to your project.

pnpm/npm install @ringcentral/video-sdk react react-dom

The following versions of react are recommended:

"react": ">=16.14.0",
"react-dom": ">=16.14.0",

Getting Started

Step 1: Inject rcv instance to the uikit provider

To implement an audio/video communications experience, you just need to:

1. initialize a @ringcentral/video-sdk instance.
2. join or start a meeting by rcv instance.
3. Inject rcv instance to RcvEngineProvider.

For example, a simple App to join the meeting.

import { RcvEngine } from '@ringcentral/video-sdk'
import { RcvEngineProvider } from '@ringcentral/video-sdk-react'

const MyApp = ({ config, children }) => {
    const [rcvEngine, setRcvEngine] = useState()
    const [isMeetingJoined, setMeetingJoined] = useState(false)

    useEffect(() => {
        const initSDK = async () => {
            const { clientId, clientSecret, jwt, userName, password } = config
            const engine = RcvEngine.create({
                clientId,
                clientSecret,
            })
            // if config jwt, initialize SDK with jwt
            // else initialize SDK with password
            await engine.authorize({
                grantType: jwt ? GrantType.JWT : GrantType.PASSWORD,
                jwt,
                username: userName,
                password,
            })

            engine.on(EngineEvent.MEETING_JOINED, (meetingId, errorCode) => {
                // todo
                setMeetingJoined(true)
            })
            engine.on(EngineEvent.MEETING_LEFT, () => {
                // todo
                setMeetingJoined(false)
            })
            setRcvEngine(engine)
        }

        initSDK()
    }, [])

    const joinMeeting = async () => {
        // get meetingId and password (if the meeting requires password) from a form
        await rcvEngine.joinMeeting(meetingId, { password })
    }

    return (
        <>
            <button onClick={joinMeeting}>Join</button>
            <RcvEngineProvider rcvEngine={rcvEngine}>{children}</RcvEngineProvider>
        </>
    )
}

export default MyApp

Step 2: Render UI components

Layout component renders all meeting session video tiles in a responsive grid layout. This includes the local tile and remote tiles. ActionBar component is a container to wrapper action widgets.

// MyApp is the above React component, see Step 1.
import { MyApp } from './app'
import {
    ActionBar,
    AudioAction,
    ChatAction,
    LeaveAction,
    LogoIcon,
    MeetingInfoAction,
    ParticipantAction,
    RecordAction,
    VideoAction,
    Layout,
    LayoutType,
} from '@ringcentral/video-sdk-react'

const MyDemo = () => {
    return (
        <MyApp>
            <div
                style={{
                    display: 'flex',
                    width: '100%',
                    height: '300px',
                    flexDirection: 'column',
                    boxSizing: 'border-box',
                }}>
                <Layout
                    defaultLayout={LayoutType.gallery}
                    style={{
                        flex: 1,
                    }}
                />
                <ActionBar
                    leftActions={[<MeetingInfoAction key={'meeting-info-action'} />]}
                    centerActions={[
                        <AudioAction key={'audio-action'} />,
                        <VideoAction key={'video-action'} />,
                        <ParticipantAction key={'participant-action'} />,
                        <ChatAction key={'chat-action'} />,
                        <RecordAction key={'record-action'} />,
                        <LeaveAction key={'leave-action'} />,
                    ]}
                    rightActions={[<LogoIcon key={'logo-icon'} />]}
                />
            </div>
        </MyApp>
    )
}