v2

One-to-One Call

This section will provide you a tutorial on how you can implement a one-to-one call using Channelize.io Call SDK. We will be using some terminologies for this tutorial.

  • Caller - A user who initiate a call with another user.
  • Receiver - A user who has received the call and can choose to accept/join or decline/reject the call.

We will be covering this tutorial in three parts.

Initializing SDK

First, initialize the Channelize.io Call SDK using connect functions.

HTML Code

<script src='https://cdn.channelize.io/calls/sdk/4.1.0/browser.js'></script>

JavaScript Code

const channelizeCall = new ChannelizeCall.client({publicKey: YOUR_PUBLIC_KEY});
const webrtcOptions = {}
channelizeCall.connect(userId, accessToken, webrtcOptions, function (err, res) {

});

To know more about the initialization of Channelize.io Call SDK, Please visit the overview section. Once Channelize.io Calls SDK is connected, a user can initiate or receive a call.

Initiate Call (Caller's End)

  1. To start a call use the startCall function with the receiver's userId in members parameter and type of call. The startCall function will return call model and you will be using it in the next few steps.
  2. On the success of start call show the local media stream on an HTML element using playLocalStream function. You can either create this div dynamically on startCall completion or statically in your HTML file.
  3. Post setting your stream to HTML element, you can also show Connecting/Contacting status in your call unless call invite is received at the other end.
  4. Use the member.invite_received event on the call model to know if the call invite is received at the other end. After call invite receive you can start showing Ringing status on your end. You can also add a ringing sound for a better user experience.
  5. Use the member.joined event on the call model to know if the receiver has accepted/joined the call. Once the receiver has accepted the call, you need to show the remote media stream on an HTML element using playRemoteStream function. Once it is done, you will start receiving the receiver's audio/video.
  6. Use the member.rejected event on the call model to know if the receiver has rejected/declined the call. After this you can provide options to the caller to Call Again or end the call using end function.
  7. Once the call is successfully established the caller or the receiver can end the call. The caller can use the end function to end the call. If the call is ended by the receiver then the caller would be notified using ended event on the call model.
<body>
    <div id="call_local_stream"></div>
    <div id="call_remote_stream"></div>
</body>

const data = {
    type: 'video',
    members: [ receiverId ],
}

channelizeCall.Call.startCall(data, {}, (err, call) => {

    if (err) return console.error(err);

    // play local media stream on html element #call_local_stream
    call.playLocalStream('call_local_stream');

    // Show contacting/connecting status

    // Add required events on the call model
    call.on('member.invite_received', (res) => {
        if (res.busy === true) {
            // Show busy status
            // Now you can either wait for the user accept/reject or you can end the call
        }

        // Show Ringing status
    });

    call.on('member.joined', (res) => {

        // Show connected status and you can start call timer for a better user experience
       
        // Play remote media stream on html element #call_remote_stream
        const receiver = res.members[0].user;
        call.playRemoteStream(receiver.id, 'call_remote_stream');

    });

    call.on('member.rejected', (res) => {

        // Show rejected status
        // End the call if member rejects the call
        call.end({}, () => {
            
        });

    });

    call.on('ended', (res) => {

        // Show call ended status and stop the timer

    });

});

Receive a Call (Receiver's End)

  1. On call receive you will be notified using user.call_invite_received event. You will get a call property in the callback function of this event which will be a call model and will be used in the next few steps.
  2. Use sendInviteReceivedEvent function on the call model to let the caller know that you have received the call invite. This function will trigger member.invite_received event on caller's end and then the caller will change the status of Connecting/Contacting to Ringing.
  3. Use the busy parameter as true in sendInviteReceivedEvent function if you are busy on another call. The caller will use this parameter to show a busy message at his end.
  4. You can start showing a popup on your side that will prompt the options to Accept or Decline the call. Simultaneously you can also start Ringing sound for better user experience.
  5. Now there are several options for you and the caller i.e Accept the call, Reject the call and Caller ends the call before you accept it. On any of these three actions, stop the ringing sound and remove the actions prompted in the above step.
  6. Use the join function to accept/join the call. On the success of join function show the local media stream as well as remote media stream in an HTML element. Use playLocalStream function to show local media stream and playRemoteStream to show remote media stream. These HTML elements can be statically created in HTML or dynamically created. The caller will be notified using member.joined event.
  7. Use the reject function to reject/decline the call. The caller will be notified using member.rejected event and then the caller can either proceed to call again or end the call.
  8. Use the ended event on the call model to notify if the caller has ended the call. The caller can end the call before or after the receiver accepts or rejects it. So you can use ended event for both the cases.
  9. Once you successfully join/accept the call, you can start showing time and end call options. On click of end call CTA, trigger the end function.
channelizeCall.chsocket.on('user.call_invite_received', (res) => {
    
    const call = res.call;
    const caller = res.user;

    // Start ringing sound

    // Open popup having options to accept or reject call

    // Send an event so that caller can show ringing status at its end.
    const busy = false;
    call.sendInviteReceivedEvent(busy);

    // Rejects the call - caller will be notified using member.rejected event 
    call.reject(() => {
        // Stop ringing sound and close the popup
    });

    // Joins the call - caller will be notified using member.joined event
    call.join({}, () => {

        // Stop ringing sound, close the popup

        // play local media stream on html element #call_local_stream
        call.playLocalStream('call_local_stream');
        
        // Play remote media stream on html element #call_remote_stream
        call.playRemoteStream(caller.id, 'call_remote_stream');

    });

    // If caller cancel/end the call
    call.on('ended', (res) => {

    });

    // Receiver can end the call after accepting/joining the call
    call.end({}, () => {
        // Stop ringing sound and close the popup        
    });

});
← OverviewGroup Call →