Dolby.io delivers high-quality voice and video calls that power the creativity and collaboration of folks around the world. To help you build new immersive experiences in your web applications and ship production code faster, our team is happy to share a new React UIKit and accompanying Kickstart App.
What is a UIKit for React?
The Dolby.io Communications UIKit for React provides user interface components for building web applications. These React components are open-source implementations that you can use like lego bricks or puzzle pieces to fit together in your ReactJS project. This makes it easier to add real-time video chat features. Instead of writing a bunch of JavaScript, you can often include a single element that encapsulates all of the complex behaviors and user-interface elements your users would need.
For example, this single element is like a shortcut that handles all of the layout needed to provide multi-party audio and video streams:
<ParticipantsGrid localText="You" />This saves you time during development by providing components that handle the standard behaviors most users expect from video conferencing such as:
- CommsProvider
- VideoView
- MicrophoneSelect
- CameraSelect
- ParticipantSpeakingIndicators
- and 40+ more
What can you build with UIKit? Try out the Kickstart App to see it in action.
Experience a Video Call with the Kickstart App
Developers choose Dolby.io for the quality of media that can be streamed in interactive real-time voice and video calls. To experience a full conferencing solution built with the UIKit, download and try the sample app: dolbyio-samples/comms-app-react-videocall
When you look at this app, you will see a full conference view that includes a grid layout for all video streams, standard functions like muting, camera selection, video on/off, who’s speaking, participant names, and more.
Start by cloning the repository:
$ git clone [email protected]:dolbyio-samples/comms-app-react-videocall.git
$ cd comms-app-react-videocallYou’ll need to sign-up for a Dolby.io account if you don’t already have one to retrieve an API Token. Add this token to the source code in src/App.tsx.
From there, you can install the dependencies and view it in a web browser.
$ npm install
$ npm run devIf you need some help, a more thorough explanation of these steps can be found in the README.md. Once you have this up and running you should take a look at how it all works, make minor changes to the code to see what happens, and start to explore.
Hello World for the React UIKit
The comms-app-react-videocall kickstart app includes all the bells and whistles you expect from a standalone conference application. For simpler use cases, the UIKit components are ready to use out of the box for your specific needs.
Start by adding the UIKit from NPM into your existing React web project.
$ npm install @dolbyio/comms-uikit-react --saveTake a look at a listing of a simple voice call conferencing solution that lets you join and leave a conference.
const App = () => {
const [inCall, setInCall] = useState(false);
return (
<CommsProvider token={token}>
<div className="App">
{ !inCall ? (
<Button onClick={() => setInCall(true) }>Join</Button>
) : (
<div>
<Session participantInfo={ { name: 'Jaron Creedle' } }>
<Conference audio={ true } video={ true } alias="Business meeting">
<ParticipantsGrid localText="You" />
<LeaveConferenceButton tooltipText="Leave" onSuccess={() => setInCall(false)} />
</Conference>
</Session>
</div>
)
}
</div>
</CommsProvider>
);This example with just a few components mirrors the functionality that would be many more lines of code to build the same app without components. Similar to the underlying Dolby.io Communications Web SDK there is flexibility to establish a session and conference between users.
For a more detailed explanation of how to assemble the UIKit components for your needs, visit the comms-ui-kit/README.md and learn more.
- How-to connect your app to Dolby.io
- Initializing and opening sessions
- Creating a conference with video
- Displaying participants
- Providing user controls for input/output devices
Start Building with UIKit for React
We’re anxious to see how the UIKit can accelerate your development efforts to add high-quality communications that your users will appreciate. Take a look at some of these resources and reach out if you need any help along the way.
With this initial launch, we’re just getting started. You can find the source code for the components in the DolbyIO/comms-uikit-react repository on GitHub. Add a star and watch the repository to get a better understanding of how it works and find out right away whenever there are new updates.
