The Dolby.io Communications API can be used to provide real-time audio and video calls to build a communications application. We can add the Stream Chat API to level-up our application by add real-time chat and messaging. Stream’s library of SDKs and components make it a a seamless way to add a scalable feature. The combination of these two services provide a solid foundation to build an interactive video conferencing app with text chat.
While the APIs are straightforward to get up and running on their own, integrating the two can introduce new challenges. A challenge we will touch on in this article is the concept of synchronizing the display username of the participants between these chat and audio/video providers.
Note: To follow along, check out the application in this GitHub repository.
Challenge with Dolby.io Chat
How do we make sure that both the Stream Chat API and the Dolby.io API synchronize the identity of the users between their respective service?
To lay out the scope of the challenge:
- The first participant joins call, assigned random user name “Guest-9”.
- Then the second participant joins call, and is assigned random username “Guest-64”.
The expectation is that each participant’s username will appear in the top right corner of their Dolby.io Communications video stream, as well as appear under any Stream Chat messages they send to the other participant.
As in, Guest-9’s video will be labelled accurately, and any messages they send will be labelled accurately.
The next section will explain the solution at a high level to that problem, and hopefully help you build your own application.
Solution for Dolby.io Chat
In our case, we built a React application using the Stream Chat React Component Library and the Dolby.io Javascript Web SDK.
This code snippet demonstrates one way to handle synchronizing usernames between the two services. This code is called when the application mounts. At a high level, this snippet handles authentication for both the Dolby.io and getStream.io services, and sets the username in state. To learn more about handling the authentication flow to get an access token from Dolby.io, see this article.
async componentDidMount() {
// make call to authentication server get Dolby access token
await this.getDolbyToken();
// set random username for participant ie "Guest-9", and set in state
// open a Dolby Communications session with that username
await this.initDolbySession();
// set up Stream Chat client
// get a Stream token with the username that has been set in state
// connect the Stream user using the Stream chat client, the username in state, and Stream token
await this.initializeStreamChatClient();
}This way, when a participant joins, they are are initialized on both services, and join each service with the correct username.
Once a Stream Chat client has been initialized and set in state, a Stream Chat channel can be opened. See Stream’s documentation for more information. Additionally, a Stream Chat channel cannot be opened unless there are at least two members. In the case of a 1:1 chat app, we therefore must wait to open a channel until both users have joined. This logic is handled within initDolbySession(), in this snippet:
// when a video stream is added, check the participant id
// if added participant is the current session participant (local), stream will be set as local
VoxeetSDK.conference.on('streamAdded', async (participant, stream) => {
if (participant.id === VoxeetSDK.session.participant.id) {
this.setState({
localParticipant: participant,
localStream: stream,
isConnecting: false,
});
} else {
// otherwise, if the joining participant is not local participant(based on participant id),
// the stream will be set as remote
// since a second participant has joined, we can start a Stream Chat channel with the two joined members
let channel = await setUpStreamChatChannel(this.state.streamChatClient);
this.setState({
remoteParticipant: participant,
remoteStream: stream,
streamChannel: channel,
});BONUS: Notice, this logic also handles setting local and remote video streams in state. This informs the child components whether to render the video stream in the top right (local) or center div (remote).
Finally, when a chat message is sent, the Stream Chat Client SDK sets the user id automatically. See the Stream documentation for more information. In this case, the user id will correspond to the same username set when a session was opened with Dolby.io Communications. This ensures that the username that appears in the top right of a video stream corresponds with the the username that appears under the sent chat message.
Hopefully this guide was helpful in getting started building your video and chat application using Stream Chat and the Dolby.io Communication API. See the code and fork it yourself here!
If you want to expand this further, check out the Stream Activity Feed React Documentation and UX Components to add another layer of interactivity to your video conferencing application.
For more information, see Stream Chat Documentation as well as the Dolby.io Communications API Documentation.
Happy Building!
