Make your first call
- npm or yarn
- WebRTC API supported browsers
Step 1 Install the SDK
sendbird-callsdependency to the
package.jsonfile in your project.
Import the Calls SDK in
ES6 module as shown below.
Note: If you are using TypeScript, set
truefor default imports or use
import * as SendBirdCall from 'sendbird-calls'.
Or add the following code in the header to install and initialize the Calls SDK.
Step 2 Request to access media device
The Calls SDK requires access permissions. To allow the Calls SDK to access microphone and camera, call the
SendBirdCall.useMedia() function. This allows the user to retrieve a list of available media devices or to retrieve any actual media streams.
Note: If the
Step 3 Initialize the Calls SDK
To integrate and run Sendbird Calls in your application, you need to initialize first. Initialize the
SendBirdCall instance by using the Application ID of your Sendbird application, which can be found on Sendbird Dashboard after creating an application. If the instance is initialized with a different Application ID, all existing call-related data in a client app is cleared and the
SendBirdCall instance is initialized again with the new Application ID.
Note: Each Sendbird application can be integrated with a single client app. Within the same application, users can communicate with each other across all platforms, whether they are on mobile devices or on the web.
Step 4 Authenticate a user
To make and receive a 1-to-1 call or start a group call, authenticate a user to the Sendbird server by using their user ID through the
authenticate() method. To receive calls, the
SendBirdCall instance should be connected with the Sendbird server. Connect socket by using the
SendBirdCall.connectWebSocket() method after a user’s authentication has been completed.
After authenticating a user, you can continue to either make a 1-to-1 call with Direct call or start a group call with Group call. Skip to Step 8 if you wish to start a group call.
Note: You can implement both the Chat and Calls SDKs to your app. The two SDKs can work on the same Sendbird application and share users. In this case, you can allow Calls to retrieve a list of users in the client app by using the Chat SDK’s method or Chat API.
Make 1-to-1 call
Step 5 Add an event handler
Sendbird Calls provides the
SendBirdCallListener event handler for events related to Direct call. It is used to manage device specific events such as incoming calls.
SendBirdCallListenerby using the
SendBirdCall.addListener()method. You can add this listener before
Note: If a
SendBirdCallListenerevent handler isn’t registered, a user can't receive an
onRingingcallback event. Thus, this handler should be added when you initialize the app.
Step 6 Make a call
You are now ready to make your first 1-to-1 call. To make a call, provide the callee’s user ID into the
SendBirdCall.dial() method. To choose initial call configuration such as audio or video capabilities, video settings, and mute settings, use the
After making a call, add the call-specific
DirectCallListener event handler to the call object. It allows the callee's app to respond to events happening during the call through its callback methods.
A media viewer is a HTMLMediaElement such as
<video> to display media stream. The
remoteMediaView accessor is required for the remote media stream to be displayed. It is also recommended to set the value of a media viewer's
autoplay property to
localMediaView is required for the local media stream to be displayed. And it is also recommended to set the values of a media viewer's
muted properties to
Note: Media viewers can also be set using the
Step 7 Receive a call
You can accept or decline an incoming call. To accept an incoming call, use
directCall.accept(). To decline the call, use the
directCall.end() method. When you accept the call, a media session is automatically established by the Calls SDK.
Before accepting the call, add the call-specific
DirectCallListener event handler to the call object. It allows the callee's app to react to events happening during the call through its callback methods.
Note: If media viewer elements have been set by the
call.setRemoteMediaView()methods, make sure that the same media viewers are set in
callOption. If not, they are overridden during executing the
The callee’s app receives an incoming call through the connection with the Sendbird server established by the
Start a group call
Step 8 Create a room
When creating your first room for a group call, you can choose either a room that supports up to six participants with video or a room that supports up to 100 participants with audio. When the room is created,
ROOM_ID is generated.
List of properties
Specifies the type of the room. Valid values are the following.
Step 9 Enter a room
You can now enter a room and start your first group call. When you enter a room, a participant is created with a unique participant ID to represent the user in the room.
To enter a room, you must first acquire the
room instance from the Sendbird server with the room ID. To fetch the most up-to-date
room instance from the Sendbird server, use the
SendBirdCall.fetchRoomById() method. Also, you can use the
SendBirdCall.getCachedRoomById() method that returns the most recently cached
room instance from Sendbird Calls SDK.
Note: A user can enter the room using multiple devices or browser tabs. Entering from each device or browser tab creates a new participant.
Once the room is retrieved, call the
enter() method to enter the room.
Large room for audio only
LARGE_ROOM_FOR_AUDIO_ONLY room type, call the
enter() method to enter and set the HTMLAudioElement for the room to stream audio.
List of methods
Sets audio for a large room.
Note: Share the room ID with other users for them to enter the room from the client app.