Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/masashi-sutou/flutter_ios_voip_kit

One-to-one video call using CallKit and PushKit with flutter iOS app.
https://github.com/masashi-sutou/flutter_ios_voip_kit

callkit flutter pushkit voip webrtc

Last synced: about 1 month ago
JSON representation

One-to-one video call using CallKit and PushKit with flutter iOS app.

Awesome Lists containing this project

README 

        
# flutter_ios_voip_kit



One-to-one video call using CallKit and PushKit with flutter iOS app.



## Motivation



We need to use CallKit to handle incoming VoIP notifications from iOS 13. [Check the WWDC2019 video for more information](https://developer.apple.com/videos/play/wwdc2019/707/). So instead of using CallKit and PushKit separately, there is a growing need to use them together. However, there are still few VoIP notification samples on the net that use CallKit and PushKit (especially for Flutter). I decided to create a flutter plugin with the minimum required functions. **You can use this plugin, but the actual purpose is to help you create a VoIPKit tailored to your service.**



## Requirement



- iOS only, not support Android.

- iOS 10 or above.

- one-to-one call only, not support group call.

- need to a server for pushing VoIP notification with APNs.

- to actually make a video or call, you need to link to a service such as WebRTC（ex: Agora, SkyWay, Amazon Kinesis Video Streams）.



## Usage



### 1. install



- Add `flutter_ios_voip_kit` as a dependency in your pubspec.yaml file.



### 2. setting Capability in Xcode



1. Select Background Modes > Voice over IP and Remote notifications is ON.

1. Select Push Notifications.

1. Changed `ios/Runner/Info.plist` after selected Capability.



```

UIBackgroundModes



    remote-notification

    voip



```



### 2. edit Info.plist



- Edit `ios/Runner/Info.plist` as below.



```

FIVKIconName

AppIcon-VoIPKit

FIVKLocalizedName

VoIP-Kit

FIVKSupportVideo



FIVKSkipRecallScreen



```



### 3. add New Image set for CallKit



- Add an icon（.png or .pdf） `ios/Runner/Assets.xcassets/AppIcon-VoIPKit` to use on the screen when a call comes in while locked iPhone.



### 4. create VoIP Services Certificate



- Visit the Apple Developer https://developer.apple.com/certificates and create a new VoIP Services Certificate(`.cer`). [Check Voice Over IP (VoIP) Best Practices Figure 11-2 for more information](https://developer.apple.com/library/archive/documentation/Performance/Conceptual/EnergyGuide-iOS/OptimizeVoIP.html).

- Create `.p12` from `.cer` with KeyChainAccess, and `.pem` with openssl.



Create `.p12` from `.cer` with KeyChainAccess |

:-: |

 |



```

openssl pkcs12 -in voip_services.p12 -out voip_services.pem -nodes -clcerts

```

> If you're running OpenSSL version 3 or later, please note that you may need to include the "-legacy" option.

> ```

> openssl pkcs12 -legacy -in voip_services.p12 -out voip_services.pem -nodes -clcerts

> ```



### 5. request VoIP notification APNs from your server



- See Apple document.

- https://developer.apple.com/documentation/usernotifications/setting_up_a_remote_notification_server/sending_notification_requests_to_apns

- Add data(payload) like a below.



```

{

    "aps": {

        "alert": {

          "uuid": ,

          "incoming_caller_id": ,

          "incoming_caller_name": ,

        }

    }

}

```



- You can use curl to test VoIP notifications as follows.



```

curl -v \

-d '{"aps":{"alert":{"uuid":"982cf533-7b1b-4cf6-a6e0-004aab68c503","incoming_caller_id":"0123456789","incoming_caller_name":"Tester"}}}' \

-H "apns-push-type: voip" \

-H "apns-expiration: 0" \

-H "apns-priority: 0" \

-H "apns-topic: .voip" \

--http2 \

--cert ./voip_services.pem \

https://api.sandbox.push.apple.com/3/device/

```



## Try out example app



- It is possible to try the example app with some features without a server.

- [There is also a example that can confirm the operation of flutter_ios_voip_kit using SkyWay](https://github.com/masashi-sutou/flutter_ios_webrtc_kit)



Select call role | 🤙 Caller page | 🔔 Callee page

:-: | :-: | :-:

 |  | 



🔔 Callee(incoming call) | 🔔 Callee(locked) | 🔔 Callee(locked) | 🔔 Callee(recall)

:-: | :-: | :-: | :-:

 |  |  | 



🔔 Callee(unanswered local notification) | 🔔 Callee(unanswered local notification)

:-: | :-:

 | 



## Q&A



### Does CallKit have a call and outgoing call screen?



- No. CallKit support incoming call screen only. You need to make your own a call and outgoing call screens.



### Can I use remote push device token instead of VoIP device token?



- No. Since the specifications of VoIP token and push token are different, it is necessary to manage them separately in your database.



### Can't get VoIP token on iOS13



- Please uninstall the app, restart the terminal and reinstall the app. You can get it after a while.



### Don't receive VoIP notifications



- Please check the following items.

   1. Is the VoIP device token correct?

   1. Did you set your app’s bundle ID with `.voip` to apns-topic?

   1. Did you set `voip` to apns-push-type?

   1. Is the APNs endpoint（Development or Production） correct?

   1. For iOS13, VoIP notifications may not be received if call kit call fails many times. Please uninstall the app, restart the terminal and reinstall the app.



### No icon is displayed on the incoming call screen when locked



- The icon image should be a square with side length of 40 points. The color is ignored. Please design with the difference of alpha.

- If created in PDF, checked `Preserve Vector Data` for Resizing and change `Single Scale` for Scales.



create icon (e.g.: sketch) | Xcode Image Set

:-: | :-:

 | 



## Reference



- https://developer.apple.com/documentation/callkit

- https://developer.apple.com/documentation/pushkit

- https://developer.apple.com/documentation/callkit/making_and_receiving_voip_calls_with_callkit