What you need to know before using Twilio Video in React and intro to use-twilio-video
On my last project, I develop a video collaboration application in React with Twilio Video. Twilio Video is an SDK for building custom real-time video application. For more details about Twilio Video, you can visit this link. There are two resources that helped me to have better understanding how to implement Twilio Video in ReactJS:
If you want to get full featured video collaboration application in ReactJS, you can redirect to the first resource. If you want to learn step by step how to implement Twilio Video SDK with react hooks, you can follow the second resource. If you want to implement Twilio Video without thinking about details of state management in React, but still have flexibility in styling component, you can continue reading this article and give a try to use-twilio-video hooks.
Here, I don’t want to write how to use-twilio-video hooks step by step. Instead, I want to explain the basic concepts that we need to understand when building collaboration app using Twilio Video in React, and how use-twilio-video can help. So, if you are familiar with Twilio Video concepts and don’t like to wait, just jump to the example folder of the repo.
Basic Twilio Video application in ReactJs
Because we want to build Twilio Video app in React, we need to think in terms of components. Look at the diagram below.
We can imagine there will be a Room where some participants meet. A Room can be joined by one or more participants. There are two types of participants. Local Participant is you when you join a Room. Remote Participants are other participants who join to the same room as you. Each participant shares tracks in the room, such as video track that captures video from camera and audio track that records audio from microphone. Local Participant has local video and audio tracks. Remote Participants have remote video and audio tracks.
So, our React application will at least consist of these components: Room, Participant, VideoTrack, and AudioTrack. We can use the same component for remote and local participant or track, because they actually have the same properties.
use-twilio-video
Now, we know the components we need to build Twilio Video app in React. Next, we need the logic for each component. Here, I introduce use-twilio-video.
As Phil Nash said in his article:
Building with Twilio Video in React takes a bit more work because there are all sorts of side effects to deal with.
That’s why, instead of making another tutorial about Twilio Video in React, I think I just want to extract the logic I used before into custom hooks, so we can reuse it easily.
As we know, we can create custom hooks in ReactJS. Hooks lets us extract stateful logic into functions, so we can reuse it in different React component. For more details about React hooks, you can read Hooks at a Glance in React documentation.
use-twilio-video consist of custom hooks that used to manage Twilio Video states in React application. The hooks handle subscription and cleanup Twilio Video events when the component unmounts to avoid a memory leak. There are two main hooks, that are useRoom and useTrack.
useRoom
useRoom is used to manage Room states in Twilio Video app. useRoom returns Room states and functions for updating the states. Participant can join a Room using connectRoom function. It accept token and connection options. Here, overview of useRoom hook in Room component.
We can pass localParticipant and remoteParticipants to Participant component. We can get information of dominant speaker if dominantSpeaker option is enabled in connectRoom. toggleCamera and toggleMicrophone can be used to update the camera and microphone state of Local Participant. You can find the full sample code here.
useTrack
useTrack is used to manage tracks that are shared by Participants, such as video and audio track. Here, overview of useTrack hook in Participant component.
useTrack returns videoOn and audioOn state that indicate whether the video (camera) and audio (microphone) of participant is on or off. We can use this state to render certain user interface corresponding the state. useTrack also returns videoTrack and audioTrack. We need to attach the tracks to video and audio element.
That’s what we need to build basic features of video collaboration application with Twilio Video in React. Our user can join a room, toggle on/off their camera and microphone, and disconnect from the room.
For more detail usage example, please visit use-twilio-video repository.
Thank you :)
