flutter_xto_ios_voip_kit 0.1.2+2

Flutter Android iOS

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

flutter_xto_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. 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_xto_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.
  2. Select Push Notifications.
  3. Changed ios/Runner/Info.plist after selected Capability.
<key>UIBackgroundModes</key>
<array>
    <string>remote-notification</string>
    <string>voip</string>
</array>

2. edit Info.plist #

  • Edit ios/Runner/Info.plist as below.
<key>FIVKIconName</key>
<string>AppIcon-VoIPKit</string>
<key>FIVKLocalizedName</key>
<string>VoIP-Kit</string>
<key>FIVKSupportVideo</key>
<true/>
<key>FIVKSkipRecallScreen</key>
<true/>

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 #

Create .p12 from .cer with KeyChainAccess
openssl pkcs12 -in voip_services.p12 -out voip_services.pem -nodes -clcerts

5. request VoIP notification APNs from your server #

{
    "aps": {
        "alert": {
          "uuid": <Version 4 UUID (e.g.: https://www.uuidgenerator.net/version4) >,
          "incoming_caller_id": <your service user id>,
          "incoming_caller_name": <your service user 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: <your app’s bundle ID>.voip" \
--http2 \
--cert ./voip_services.pem \
https://api.sandbox.push.apple.com/3/device/<VoIP device Token for your iPhone>

Try out example app #

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?
    2. Did you set your app’s bundle ID with .voip to apns-topic?
    3. Did you set voip to apns-push-type?
    4. Is the APNs endpoint(Development or Production) correct?
    5. 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 #

3
likes
90
pub points
32%
popularity

Publisher

xinhtuoi.online

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

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on flutter_xto_ios_voip_kit