WebRTCAPI supported browsers
sendbird-callsdependency to the
package.jsonfile in your project.
Import the Calls SDK in
ES6 module as shown below:
Note: If you are using
--esModuleInteropoption to true for 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.
The Calls SDK requires access permissions. To allow the Calls SDK to access microphone and camera, call the
SendBirdCall.useMedia() function. This will allow the user to retrieve a list of available media devices or to retrieve any actual media streams.
Note: If the
To integrate and run Sendbird Calls in your application, you need to initialize first. Initialize the
SendBirdCall instance by using the
APP_ID of your Sendbird application, which can be found on the Sendbird Dashboard after creating an application. If the instance is initialized with a different
APP_ID, all existing call-related data in a client app will be cleared and the
SendBirdCall instance will be initialized again with the new
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.
To make and receive a 1-to-1 call or start a group call, authenticate a user to Sendbird server by using their user ID through the
authenticate() method. To receive calls, the
SendBirdCall instance should be connected with 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. Two SDKs can work on the same Sendbird application for them to 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.
Sendbird Calls provides
SendBirdCallListener event handler for events related to Direct call. It is used to manage device specific events such as incoming calls.
SendBirdCallListenerby using the
Note: If a
SendBirdCallListenerevent handler isn’t registered, a user can't receive an
onRingingcallback event. Thus, this handler should be added at the initialization of the app. Also, a
SendBirdCallListenerevent handler is automatically removed when the app closes by default.
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.
Note: A media viewer includes a HTMLMediaElement such as
<video>to display media stream. The
remoteMediaViewis required for the remote media stream to be displayed. It is also recommended to set a media viewer's
autoplayproperty to true.
Note: Media viewers can also be set using the
You can accept or decline an incoming call. To accept an incoming call, use the
directCall.accept(). To decline the call, use the
directCall.end() method. When you accept the call, a media session will automatically be 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 the
callOption. If not, they will be overridden during executing the
The callee’s app receives an incoming call through the connection with Sendbird server established by the
When creating your first room for a group call, you can choose either a room that supports up to 6 participants with video or a room that supports up to 25 participants with audio. When the room is created, a
ROOM_ID is generated.
If you want to create a room with the
LARGE_ROOM_FOR_AUDIO_ONLY room type, you need to set the HTMLAudioElement for the room.
Sets audio when creating a large 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 Sendbird server with the room ID. To fetch the most up-to-date room instance from 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 will create a new participant.
Once the room is retrieved, call the
enter() method to enter the room.
Note: Share the room ID with other users for them to enter the room from the client app.