How to Receive Phone Calls with the Nexmo Client SDK in JavaScript

In this guide, you'll learn how to forward an incoming phone call from a Nexmo phone number, to an in-app user by implementing a webhook and linking that to a Nexmo application.

You will create a simple app to receive a call. The app will automatically log in a user called Jane. After logging in, Jane is able to receive a call and perform actions such as answer, reject or hangup.

Nexmo Concepts

Before proceeding any further, here are couple of concepts that you'll need to understand.

A Nexmo application allows you to easily use Nexmo products, in this case the Voice API to build voice applications in the Cloud.

A Nexmo application requires two URLs as parameters:

  • answer_url - Nexmo will make a request to this URL as soon as someone makes a call to your Nexmo number. It contains the actions that will happen throughout the call.
  • event_url - Nexmo sends event information asynchronously to this URL when the call status changes; this ultimately depicts the flow of the call.

Both URLs need to return JSON and follow the Nexmo Call Control Object (NCCO) reference. In the example below, you will define an NCCO that reads a predefined text for an incoming call, using the Text to Speech engine.

A Nexmo virtual number will be associated with the app and serve as the "entry point" to it - this is the number you'll call to test the application.

For more information on Nexmo applications please visit the Nexmo API Reference.)

Prerequisites

Application webhook

For your application to connect an incoming phone call to an app user, you'll need to provide a URL as the Answer URL webhook - we've created a gist for you to use.

To add this URL, go to your Nexmo dashboard, navigate to applications, select your application and click the 'Edit' button.

Now, set the application's Answer URL to:

https://gist.githubusercontent.com/NexmoDev/ed91ac99a0b278fbdcbde72ca3599ac7/raw/4a134363f8b3bbebae27f04095a57d0cebc5a1be/ncco.json

and click 'Save changes'.

NOTE: This gist is specific to this tutorial and in a real-life scenario, the answer_url should be provided by a purposely built web solution that can serve custom NCCOs if required.

A Nexmo virtual number Nexmo phone number is a phone number that you can link to your Nexmo Application. When a user calls that phone number, the answer_url that is defined on your Nexmo Application is executed. In this tutorial case, you set up an answer_url in the above step, that upon calling connects the call to your app user Jane.

To link a Nexmo number to your app:

  1. Go to your Nexmo dashboard
  2. Navigate to applications
  3. Select your application
  4. Click the 'Edit' button.

  5. Switch to Numbers tab above, search for a number you'd like, and click Link, to link.

Adding the Nexmo Client to your application

We'll start with a blank HTML page with three buttons for answering, declining and hanging up a call. Create a minimal index.html file, for example:

<html>
  <head>
    <title>Receive Phone Calls</title>
    <script src="./node_modules/nexmo-client/dist/conversationClient.js"></script>
  </head>
  <body>
    <p id="notification"></p>
    <button type="button" id="answer">Answer</button>
    <button type="button" id="reject">Reject</button>
    <button type="button" id="hangup">Hang Up</button>
    <script>

    </script>
  </body>
</html>

We'll need to add the Nexmo Client to our folder, in order to do that we'll install it from NPM first, by running this command in the same folder as your index.html file:

$ npm install nexmo-client --save

Login

Using the Nexmo Client SDK should start with logging in to ConversationClient, using a jwt user token.

In production apps, your server would authenticate the user, and would return a correctly configured JWT to your app.

For testing and getting started purposes, you can use the Nexmo CLI to generate JWTs.

We'll update the empty <script> tag that's at the bottom of your <body> tag to login with a USER_JWT, and update the notification paragraph when the login was successful. We'll create a new ConversationClient, and then call the login method, with a string for the user JWT. That returns a promise containing an application object, and we'll use that to check we're logged in with the correct user.

<script>
  const USER_JWT = "YOUR USER JWT";

  let notification = document.getElementById("notification");

  new ConversationClient()
      .login(USER_JWT)
      .then(application => {
          notification.textContent = `You've logged in with the user ${application.me.name}`
      })
      .catch(console.log);
</script>

At this point you should already be able to run the app and see that you can login successfully with the SDK. Because the Nexmo Client uses IndexedDB for its sync mechanism, we suggest you don't serve index.html using the file:// protocol. That corrupts the IndexedDB for any other users and makes the SDK behave inconsistently. You can use any HTTP server, like http-server. If you want to install it from NPM and then run it with cache disabled, here are the terminal commands:

$ npm install -g http-server
$ http-server -c-1

Listen for incoming call

When the phone number associated with your Nexmo app receives a call, the application should notify the user Jane so that they can decide whether to answer or reject it.

This is done by listening for member:call events on the application object returned by the login() promise.

.then(application => {
    notification.textContent = `You've logged in with the user ${application.me.user.name}`;
    application.on("member:call", (member, call) => {
      notification.textContent = `You're receiving a call`;
    })
})

The listener method receives an member object that contains information about who's calling, and a call object, that lets you interact with the call in progress.

Answer a call

In order to answer a call, you'll have to use the answer() method on the call object that you received when the member:call event was triggered.

application.on("member:call", (member, call) => {
  notification.textContent = `You're receiving a call`;

  document.getElementById("answer").addEventListener("click", () => {
    call.answer();
    notification.textContent = `You're in a call`;
  })
})

Reject a call

In order to reject an incoming call, you'll have to use the reject() method on the call object that you received when the member:call event was triggered.

application.on("member:call", (member, call) => {
  notification.textContent = `You're receiving a call`;
  ...
  document.getElementById("reject").addEventListener("click", () => {
    call.reject();
    notification.textContent = `You rejected the call`;
  })
})

Hangup a call

You can hang up a call after you've answered it by using the hangUp() method on the call object.

new ConversationClient()
    .login(USER_JWT)
    .then(application => {
        ...
        application.on("member:call", (member, call) => {
          notification.textContent = `You're receiving a call`;
          ...
          document.getElementById("hangup").addEventListener("click", () => {
            call.hangUp();
            notification.textContent = "The call has ended";
          })
        })
    })
    .catch(console.log);

Conclusion

You have implemented your first Phone to App Voice application with the Nexmo Client SDK for JavaScript.

Open the webpage in a browser to see that you can answer, reject and hangup a call received on the phone number associated with your Nexmo application. If you've followed along this tutorial, your code should look similar to this.

How to Receive Phone Calls with the Nexmo Client SDK on Android

In this guide, you'll learn how to receive an incoming phone call in an Android application.

You will create a simple Android app, that will log in a user called Jane. After logging in, Jane is able to receive a call and perform actions such as answer or hangup.

Nexmo Concepts

Before proceeding any further, here are couple of concepts that you'll need to understand.

A Nexmo application allows you to easily use Nexmo products, in this case the Voice API to build voice applications in the Cloud.

A Nexmo application requires two URLs as parameters:

  • answer_url - Nexmo will make a request to this URL as soon as someone makes a call to your Nexmo number. It contains the actions that will happen throughout the call.
  • event_url - Nexmo sends event information asynchronously to this URL when the call status changes; this ultimately depicts the flow of the call.

Both URLs need to return JSON and follow the Nexmo Call Control Object (NCCO) reference. In the example below, you will define an NCCO that reads a predefined text for an incoming call, using the Text to Speech engine.

A Nexmo virtual number will be associated with the app and serve as the "entry point" to it - this is the number you'll call to test the application.

For more information on Nexmo applications please visit the Nexmo API Reference.)

Prerequisites

Application webhook

For your application to connect an incoming phone call to an app user, you'll need to provide a URL as the Answer URL webhook - we've created a gist for you to use.

To add this URL, go to your Nexmo dashboard, navigate to applications, select your application and click the 'Edit' button.

Now, set the application's Answer URL to:

https://gist.githubusercontent.com/NexmoDev/ed91ac99a0b278fbdcbde72ca3599ac7/raw/4a134363f8b3bbebae27f04095a57d0cebc5a1be/ncco.json

and click 'Save changes'.

NOTE: This gist is specific to this tutorial and in a real-life scenario, the answer_url should be provided by a purposely built web solution that can serve custom NCCOs if required.

A Nexmo virtual number Nexmo phone number is a phone number that you can link to your Nexmo Application. When a user calls that phone number, the answer_url that is defined on your Nexmo Application is executed. In this tutorial case, you set up an answer_url in the above step, that upon calling connects the call to your app user Jane.

To link a Nexmo number to your app:

  1. Go to your Nexmo dashboard
  2. Navigate to applications
  3. Select your application
  4. Click the 'Edit' button.

  5. Switch to Numbers tab above, search for a number you'd like, and click Link, to link.

The starter project

Clone or download the GitHub repository on either Kotlin orJava. On that repository you'll find two apps:

  • GetStartedCalls-Start - if you want to follow along and add the code with this tutorials
  • GetStartedCalls-Complete - if you want to look at the final result

Open the NexmoHelper class.

  1. Make sure that in enabledFeatures you have to Features.PHONE_to_IN_APP. You can remove the rest, if you haven't completed their tutorials yet.

  2. Replace the user IDs and tokens:

String USER_ID_JANE = "USR-XXX"; //TODO: replace with the UserId you generated for Jane
String JWT_JANE = "PLACEHOLDER";//TODO: replace with the JWT you generated for Jane
val USER_ID_JANE = "USR-XXX"; //TODO("replace with the UserId you generated for Jane")
val JWT_JANE = "PLACEHOLDER"; //TODO("replace with the JWT you generated for Jane")

Login

To start using the Nexmo Client SDK you need to log in to NexmoClient, using a JWT user token.

In production apps, your server would authenticate the user, and would return a correctly configured JWT to your app.

For testing and getting started purposes, you can use the Nexmo CLI to generate JWTs.

Open LoginActivity. It already has a button handler:onLoginJaneClick(...) that calls loginToSdk(...) method, with the jwt you provided.

When the login is successful, the logged in NexmoUser returns. For convenience, save a reference to NexmoUser on NexmoHelper, and then, start MainActivity.

Complete the loginToSdk() method implementation:

void loginToSdk(String token) {
    NexmoClient.get().login(token, new NexmoRequestListener<NexmoUser>() {

        @Override
        public void onError(NexmoApiError nexmoApiError) {}

        @Override
        public void onSuccess(NexmoUser user) {
            NexmoHelper.user = user;

            Intent intent = new Intent(getBaseContext(), MainActivity.class);
            startActivity(intent);
            finish();
        }
    });
}
fun loginToSdk(token: String) {
        NexmoClient.get().login(token, object : NexmoRequestListener<NexmoUser> {

            override fun onError(nexmoApiError: NexmoApiError) {
                notifyError(nexmoApiError)
            }

            override fun onSuccess(user: NexmoUser) {
                currentUser = user

                val intent = Intent(baseContext, MainActivity::class.java)
                startActivity(intent)
                finish()
            }
        })
    }
}

At this point you should already be able to run the app and see that you can login successfully with the SDK.

Receive incoming call

When the phone number associated with your Nexmo app receives a call, the app should notify the user Jane so that she can decide whether to answer or reject it.

It is done by registering to incoming events, with NexmoIncomingCallListener and implementing onIncomingCall().

For simplicity in this example, you will accept incoming calls only on MainActivity. Open MainActivity and create the NexmoIncomingCallListener to save the reference to the incoming call on NexmoHelper, and start IncomingCallActivity:

NexmoIncomingCallListener incomingCallListener = new NexmoIncomingCallListener() {
    @Override
    public void onIncomingCall(NexmoCall call) {

        NexmoHelper.currentCall = call;
        startActivity(new Intent(MainActivity.this, IncomingCallActivity.class));
    }
};
val incomingCallListener = NexmoIncomingCallListener { call ->
    currentCall = call
    startActivity(Intent(this@MainActivity, IncomingCallActivity::class.java))
}

You need to register and unregister the listener in onCreate() and onDestroy():

@Override
protected void onStart() {
    super.onStart()
    NexmoClient.get().addIncomingCallListener(incomingCallListener);
}

@Override
protected void onStop() {
    NexmoClient.get().removeIncomingCallListeners();
    super.onStop();
}
override fun onStart() {
    super.onStart()
    NexmoClient.get().addIncomingCallListener(incomingCallListener)
}

override fun onStop() {
    NexmoClient.get().removeIncomingCallListeners()
    super.onStop()
}

Answer a call

Once a incoming call is received, it can be answered. Open IncomingCallActivity, and complete the prepared onAnswer() button handler, to start OnCallActivity after a successful answer:

public void onAnswer(View view) {
    NexmoHelper.currentCall.answer(new NexmoRequestListener<NexmoCall>() {
        @Override
        public void onError(NexmoApiError nexmoApiError) { }

        @Override
        public void onSuccess(NexmoCall call) {
            startActivity(new Intent(IncomingCallActivity.this, OnCallActivity.class));
            finish();
        }
    });
}
fun onAnswer(view: View) {
    currentCall?.answer(object : NexmoRequestListener<NexmoCall> {
        override fun onError(nexmoApiError: NexmoApiError) {}

        override fun onSuccess(call: NexmoCall) {
            startActivity(Intent(this@IncomingCallActivity, OnCallActivity::class.java))
            finish()
        }
    })
}

Hangup

The onHangup() handler allows to reject the call. Complete the implementation in IncomingCallActivity to finish the activity:

public void onHangup(View view) {
    NexmoHelper.currentCall.hangup(new NexmoRequestListener<NexmoCall>() {
        @Override
        public void onError(NexmoApiError nexmoApiError) { }

        @Override
        public void onSuccess(NexmoCall call) {
            finish();
        }
    });
}
currentCall?.hangup(object : NexmoRequestListener<NexmoCall> {
    override fun onError(nexmoApiError: NexmoApiError) {}

    override fun onSuccess(call: NexmoCall) {
        startActivity(Intent(this@IncomingCallActivity, OnCallActivity::class.java))
        finish()
    }
})

Register to call status

To be aware of the call status, for example, if one of the members answers or hangs up, you should register to CallEvents. The FinishOnCallEnd is a NexmoCallEventListener that finishes the current activity if the call is completed or canceled.

Register to its instance, to address the use cases mentioned previously.

On both OnCallActivity and IncomingCallActivity, add:

NexmoCallEventListener callEventListener = new FinishOnCallEnd(this);

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    NexmoHelper.currentCall.addCallEventListener(callEventListener);
}


@Override
protected void onDestroy() {
    NexmoHelper.currentCall.removeCallEventListener(callEventListener);
    super.onDestroy();
}
var callEventListener = FinishOnCallEnd(this)

override fun onCreate(savedInstanceState: Bundle?) {
    currentCall?.addCallEventListener(callEventListener)
}


override fun onDestroy() {
    currentCall?.removeCallEventListener(callEventListener)
    super.onDestroy()
}

Handle permissions

For devices running Android 6.0 (API level 23) and higher, creation and operation of calls requires requesting runtime permissions. To simplify the implementation in this tutorial, BaseActivity checks the permissions in every Activity's onStart() and onStop().

To read more about the permissions required, see the setup tutorial.

Conclusion

Congratulations! You have implemented your first Phone to App Voice application with the Nexmo Client SDK for Android.

Run the app on a simulator or a device, and with another device call the Nexmo Number you linked to you application. Then, see that you receive the call, and can answer and hangup.

How to Receive Phone Calls with the Nexmo Client SDK on iOS

In this guide, you'll learn how to receive an incoming phone call in a iOS application.

You will create a simple iOS app, that will automatically log in a user called Jane. After logging in, Jane is able to receive a call and perform actions such as answer, reject or hangup.

Nexmo Concepts

Before proceeding any further, here are couple of concepts that you'll need to understand.

A Nexmo application allows you to easily use Nexmo products, in this case the Voice API to build voice applications in the Cloud.

A Nexmo application requires two URLs as parameters:

  • answer_url - Nexmo will make a request to this URL as soon as someone makes a call to your Nexmo number. It contains the actions that will happen throughout the call.
  • event_url - Nexmo sends event information asynchronously to this URL when the call status changes; this ultimately depicts the flow of the call.

Both URLs need to return JSON and follow the Nexmo Call Control Object (NCCO) reference. In the example below, you will define an NCCO that reads a predefined text for an incoming call, using the Text to Speech engine.

A Nexmo virtual number will be associated with the app and serve as the "entry point" to it - this is the number you'll call to test the application.

For more information on Nexmo applications please visit the Nexmo API Reference.)

Prerequisites

Application webhook

For your application to connect an incoming phone call to an app user, you'll need to provide a URL as the Answer URL webhook - we've created a gist for you to use.

To add this URL, go to your Nexmo dashboard, navigate to applications, select your application and click the 'Edit' button.

Now, set the application's Answer URL to:

https://gist.githubusercontent.com/NexmoDev/ed91ac99a0b278fbdcbde72ca3599ac7/raw/4a134363f8b3bbebae27f04095a57d0cebc5a1be/ncco.json

and click 'Save changes'.

NOTE: This gist is specific to this tutorial and in a real-life scenario, the answer_url should be provided by a purposely built web solution that can serve custom NCCOs if required.

A Nexmo virtual number Nexmo phone number is a phone number that you can link to your Nexmo Application. When a user calls that phone number, the answer_url that is defined on your Nexmo Application is executed. In this tutorial case, you set up an answer_url in the above step, that upon calling connects the call to your app user Jane.

To link a Nexmo number to your app:

  1. Go to your Nexmo dashboard
  2. Navigate to applications
  3. Select your application
  4. Click the 'Edit' button.

  5. Switch to Numbers tab above, search for a number you'd like, and click Link, to link.

The starter project

Clone this Github project.

Using the Github project you cloned, in the Starter app, with XCode:

  1. Open Constants.swift file and replace the user token:

        enum Constant {
        static var userName = "Jane"
        static var userToken = "" //TODO: swap with a token for Jane
    }
    
  2. Open MainViewController.swift file and make sure the following lines exist:

  • import NexmoClient - imports the sdk
  • var client: NXMClient? - property for the client instance
  • var call: NXMCall? - property for the call instance

Clone this Github project.

From the Github project you cloned, open the Starter app using XCode:

  1. Open IAVAppDefine.h file and replace the user token:

        #define kInAppVoiceJaneToken @"JANE_TOKEN" //TODO: replace with a token for Jane
    
  2. Open MainViewController.m file and make sure the following lines exist:

  • #import <NexmoClient/NexmoClient.h> - imports the sdk
  • @property NXMClient *nexmoClient; - property for the client instance
  • @property NXMCall *ongoingCall; - property for the call instance

Login

Using the Nexmo Client SDK should start with logging in to NexmoClient, using a jwt user token.

In production apps, your server would authenticate the user, and would return a correctly configured JWT to your app.

For testing and getting started purposes, you can use the Nexmo CLI to generate JWTs.

Open MainViewController.swift. Explore the setup methods that were written for you on viewDidLoad.

Now locate the following line //MARK: - Setup Nexmo Client and complete the setupNexmoClient method implementation:

func setupNexmoClient() {
    client = NXMClient(token: Constant.userToken)
    client?.setDelegate(self)
    client?.login()
}

Notice that self is set to be the delegate for NXMClient. Do not forget to adopt the NXMClientDelegate protocol and implement the required methods.

Add the required protocol adoption declaration to the class extension located towards the end of the MainViewController.swift file:

extension MainViewController: NXMClientDelegate {
    ...
}

The connectionStatusChanged:reason methods of the NXMClientDelegate protocol indicates if the login was successful and you can start using the SDK.

Add the following method under the #pragma mark NXMClientDelegate line.

func connectionStatusChanged(_ status: NXMConnectionStatus, reason: NXMConnectionStatusReason) {
    updateInterface()
}

Open MainViewController.m. Explore the setup instructions that were written for you on viewDidLoad.

Now locate the following line #pragma mark - Tutorial Methods and complete the setupNexmoClient method implementation:

- (void)setupNexmoClient {
    self.nexmoClient = [[NXMClient alloc] initWithToken:kInAppVoiceJaneToken];
    [self.nexmoClient setDelegate:self];
    [self.nexmoClient login];
}

Notice that self is set to be the delegate for NXMClient. Do not forget to adopt the NXMClientDelegate protocol and implement the required methods.

Add the required protocol adoption declaration to the class extension located in the MainViewController.m file:

@interface MainViewController () <NXMClientDelegate>

The NXMClientDelegate indicates if the login was successful and you can start using the SDK.

Add the following method under the #pragma mark NXMClientDelegate line.

- (void)connectionStatusChanged:(NXMConnectionStatus)status reason:(NXMConnectionStatusReason)reason {
    self.connectionStatus = status;
    [self updateInterface];
}

At this point you should already be able to run the app and see that you can login successfully with the SDK.

Receive incoming call

When the phone number associated with your Nexmo app receives a call, the app should notify the user Jane so that she can decide whether to answer or reject it.

This is done by implementing the optional incomingCall: method which is declared in the NXMClientDelegate.

Go back to the #pragma mark NXMClientDelegate line and add the `incomingCall:' method

func incomingCall(_ call: NXMCall) {
    print("📲 📲 📲 Incoming Call: \(call)")
    DispatchQueue.main.async { [weak self] in
        self?.displayIncomingCallAlert(call: call)
    }
}

Go back to the #pragma mark NXMClientDelegate line and add the `incomingCall:' method

- (void)incomingCall:(nonnull NXMCall *)call {
    self.ongoingCall = call;
    [self displayIncomingCallAlert];
}

This method takes as a parameter an NXMCall object with which you can answer or reject the call. An alert was implemented for you, to allow the user to choose whether to answer or reject the call.

Answer a call

Under the //MARK: Incoming call - Accept, implement this method to answer the incoming call:

private func answer(call: NXMCall) {
    self.call = call
    self.call?.setDelegate(self)
    call.answer(self) { [weak self] error in
        if let error = error {
            print("error answering call: \(error.localizedDescription)")
        }
        self?.updateInterface()
    }
}

Under the #pragma mark IncomingCall, implement this method to answer the incoming call:

- (void)didPressAnswerIncomingCall {
    __weak MainViewController *weakSelf = self;
    [weakSelf.ongoingCall answer:self completionHandler:^(NSError * _Nullable error) {
        if(error) {
            [weakSelf displayAlertWithTitle:@"Answer Call" andMessage:@"Error answering call"];
            weakSelf.ongoingCall = nil;
            weakSelf.isInCall = NO;
            [self updateCallStatusLabelWithText:@""];
            [weakSelf setActiveViews];
            return;
        }
        self.isInCall = YES;
        [weakSelf setActiveViews];
    }];
}

answer:completionHandler: accepts an object adopting the NXMCallDelegate and a completion block to indicate if an error occurred in the process. You already implemented NXMCallDelegate in a previous step.

Reject a call

Under the //MARK: Incoming call - Accept, implement this method to answer the incoming call:

private func answer(call: NXMCall) {
    self.call = call
    self.call?.setDelegate(self)
    call.answer(self) { [weak self] error in
        if let error = error {
            print("error answering call: \(error.localizedDescription)")
        }
        self?.updateInterface()
    }
}

Under the #pragma mark IncomingCall, implement this method to answer the incoming call:

- (void)didPressAnswerIncomingCall {
    __weak MainViewController *weakSelf = self;
    [weakSelf.ongoingCall answer:self completionHandler:^(NSError * _Nullable error) {
        if(error) {
            [weakSelf displayAlertWithTitle:@"Answer Call" andMessage:@"Error answering call"];
            weakSelf.ongoingCall = nil;
            weakSelf.isInCall = NO;
            [self updateCallStatusLabelWithText:@""];
            [weakSelf setActiveViews];
            return;
        }
        self.isInCall = YES;
        [weakSelf setActiveViews];
    }];
}

reject: accepts a single completionHandler parameter to indicate if an error occurred in the process.

Call Delegate

As with NXMClient, NXMCall also has a delegate. You will now adopt the NXMCallDelegate as an extension on MainViewController:

extension MainViewController: NXMCallDelegate {

}

Copy the following implementation for the statusChanged method of the NXMCallDelegate along with the aid methods under the //MARK:- Call Delegate line:

func statusChanged(_ member: NXMCallMember!) {
    print("🤙🤙🤙 Call Status changed | member: \(String(describing: member.user.name))")
    print("🤙🤙🤙 Call Status changed | member status: \(String(describing: member.status.description()))")

    guard let call = call else {
        // this should never happen
        self.callStatus = .unknown
        self.updateInterface()
        return
    }

    // call ended before it could be answered
    if member == call.myCallMember, member.status == .answered, let otherMember = call.otherCallMembers.firstObject as? NXMCallMember, [NXMCallMemberStatus.completed, NXMCallMemberStatus.cancelled].contains(otherMember.status)  {
        self.callStatus = .completed
        self.call?.myCallMember.hangup()
        self.call = nil
    }

    // call rejected
    if call.otherCallMembers.contains(member), member.status == .cancelled {
        self.callStatus = .rejected
        self.call?.myCallMember.hangup()
        self.call = nil
    }

    // call ended
    if member.status == .completed {
        self.callStatus = .completed
        self.call?.myCallMember.hangup()
        self.call = nil
    }

    updateInterface()
}

As with NXMClient, NXMCall also has a delegate. Add the required protocol adoption declaration to the class extension located in the MainViewController.m file:

@interface MainViewController () <NXMClientDelegate, NXMCallDelegate>

Copy the following implementation for the statusChanged method of the NXMCallDelegate along with the aid methods under the #pragma mark NXMCallDelegate line:

- (void)statusChanged:(NXMCallMember *)callMember {
    [self updateCallStatusLabelWithStatus:callMember.status];
}

The statusChanged: method notifies on changes that happens to members on the call.

Hangup a call

Once Jane presses the 'End Call' button, it is time to hangup the call. Implement the private end: method and call hangup for myCallMember.

private func end(call: NXMCall) {
    guard let call = call else {
        updateInterface()
        return
    }
    call.myCallMember.hangup()
}

Updates for callMember statuses are received in statusChanged as part of the NXMCallDelegate as you have seen before.

The existing implementation for statusChanged: is already handling call hangup.

Once Jane presses the "End Call" button, it is time to hangup the call. Implement endCall: method and call hangup for myCallMember.

- (IBAction)endCall:(id)sender {
    [self.ongoingCall.myCallMember hangup];
}

Updates for callMember statuses are received in statusChanged as part of the NXMCallDelegate as you have seen before.

Update the implementation for statusChanged to handle call hangup:

- (void)statusChanged:(NXMCallMember *)callMember {
    [self updateCallStatusLabelWithStatus:callMember.status];

    //Handle Hangup
    if(callMember.status == NXMCallMemberStatusCancelled || callMember.status == NXMCallMemberStatusCompleted) {
        self.ongoingCall = nil;
        self.isInCall = NO;
        [self updateCallStatusLabelWithText:@"Call ended"];
        [self updateInterface];
    }
}

Handle permissions

For the call to happen, Audio Permissions are required. In the appDelegate of the sample project, you can find an implementation for the permissions request in application:didFinishLaunchingWithOptions.

To read more about the permissions required, see the setup tutorial.

Conclusion

Congratulations! You have implemented your first Phone to App Voice application with the Nexmo Client SDK for iOS.

Run the app on a simulator, and with another device call the nexmo Number you linked. Then, see that you can answer, reject and hangup a call received on the phone number associated with your Nexmo application.

If possible, test the application on a device using your developer signing and provisioning facility.