Flutter incoming video/audio call notification using Agora

Question

I have been working on an application and I need to implement in app audio and video calling in my app which I have done using Agora.io but the issue is I have to display incoming call notification does not matter if app is in foreground or in background. I have tried many things but still I am unable to configure that out. I am using agora_rtc_engine package for making calls.

Any help would be appreciated.

Thanks

The code I am working with currently:

Call Methods

class CallMethods {
  final callRef = FirebaseFirestore.instance.collection('Calls');

  Stream<DocumentSnapshot> callstream({@required String id}) =>
      callRef.doc(id).snapshots();

  Future<bool> makeCall({@required Call call}) async {
    try {
      log('Making call');
      call.hasdialed = true;
      Map<String, dynamic> hasDialedMap = call.toMap(call);

      call.hasdialed = false;
      Map<String, dynamic> hasNotDialedMap = call.toMap(call);

      await callRef.doc(call.senderid).set(hasDialedMap);
      await callRef.doc(call.receiverid).set(hasNotDialedMap);

      return true;
    } catch (e) {
      print(e);
      return false;
    }
  }

  Future<bool> endCall({@required Call call}) async {
    try {
      log('ending call');
      await callRef.doc(call.senderid).delete();
      await callRef.doc(call.receiverid).delete();

      return true;
    } catch (e) {
      print(e);
      return false;
    }
  }
}

Call Utils: Which is used to make calls

class CallUtils {
  static final CallMethods callmethods = CallMethods();

  static dial(
    BuildContext context, {
    @required User from,
    @required var to,
  }) async {
    Call call = Call(
      senderid: from.id,
      // senderpic: from.avatar.url,
      callername: from.name,
      receiverid: to.id,
      // receiverpic: to.avatar.url,
      receivername: to.name,
      channelid: Random().nextInt(999999).toString(),
    );

    bool callmade = await callmethods.makeCall(call: call);
    call.hasdialed = true;

    if (callmade) {
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => VideoCallScreen(call: call),
        ),
      );
    }
  }
}

After that I have a pickup layout which is used to wrap all the screens to display incoming call notification.

Pickup Call Layout:

(user.value.id != null)
          ? StreamBuilder<DocumentSnapshot>(
              stream: callmethods.callstream(id: user.value.id),
              builder: (context, snapshot) {
                if (snapshot.hasData && snapshot.data.data() != null) {
                    Call call = Call.fromMap(snapshot.data.data());
                  if (!call.hasdialed) {
                    return PickupScreen(call: call);
                  } else {
                    return widget.scaffold;
                  }

                } else {
                  return widget.scaffold;
                }
              },
            )
          : widget.scaffold,

Pennebaker

why don't you post your tried code? – Lobel

it tried the code from one of the already build applications. I can share the link of that because share the whole code here is not going to be feasible at all – Pennebaker

sharing all code might not be feasible at all but sharing relevant part and explaining the cause can make it easy. – Lobel

I have used the code from this project: github.com/sidhya3112/MyChatty---Chat-and-Video-Call-App – Pennebaker

let me add the parts that are bugging me more – Pennebaker

you can check the code now, I have added it in the question – Pennebaker

yeah ,if you can implement : developer.stringee.com/docs/push-notification/flutter – Lobel

it is not displaying pickup screen when app is open – Pennebaker

Let us continue this discussion in chat. – Lobel

Another way to add this call screen feature can be by using connection service and callkit natively on your Flutter app. – Coriecorilla

@meherdeepthakur can you please share the code sample if you have any? – Pennebaker

@AyeshaIftikhar do you find any solutions for this? – Frontpage

Answer 1

It can be done via firebase push notifications & backend API service.

Sender side:

As soon as a call is made, you would post your backend api service with caller and receiver id, and your backend service is further responsible to send a push notification with a payload to the receiver.

Receiver side:

When receiver gets a push notification, you can configure it to open your app automatically and show a screen with all the payload information. Maybe you can show him a screen with accept and decline button and if he accepts, you can connect him to Agora.

Check this for payload configuration.

Gantt

can you please share the code sample? – Pennebaker

Unfortunately, I can't. You can look into open github repositories for that but I tried to give you an idea of how this whole process is gonna work. – Gantt

I have idea but it is not working correctly. – Pennebaker

Feel free to share your attempt on the code, and I'll see if I can help you. – Gantt

I have added my attempt in the question, you can have a look at it – Pennebaker