Add accept and reject call example

[viztushar]

Please add ringing state example like accept then start video call but if rejected then reject the call.

[Condelab]

please any luck on this, i really need to be able to pick calls, i know i need to modify the signaling class but thats all i know.

[cloudwebrtc]

Need to modify signaling.dart.

       case 'offer':
         {
           var id = data['from'];
           var description = data['description'];
           var media = data['media'];
           var sessionId = data['session_id'];
           this._sessionId = sessionId;

           if (this.onStateChange != null) {
             this.onStateChange(SignalingState.CallStateNew);
           }

           /* 
           ===> Move the code block here to an accpet method <===
           _createPeerConnection(id, media, false).then((pc) {
             _peerConnections[id] = pc;
             pc.setRemoteDescription(new RTCSessionDescription(
                 Description['sdp'], description['type']));
             _createAnswer(id, pc, media);
           });
           */
         }

Looks like this

accept(id){
   _createPeerConnection(id, media, false).then((pc) {
       _peerConnections[id] = pc;
       pc.setRemoteDescription(new RTCSessionDescription(
                 Description['sdp'], description['type']));
       _createAnswer(id, pc, media);
   });
}

Then when you receive the SignalingState.CallStateNew message, you can first pop up the answering prompt page, then press the answer button to execute signaling.accept(id); to connect the call.

[Condelab]

Thank you so much i really appreciate for any other person in the house here you go:

`class Signaling {
...
var description; //just to make values global
var data; //just to make values global
...

case 'offer':
{
var id = data['from'];
description = data['description'];
var media = data['media'];
var sessionId = data['session_id'];
this._sessionId = sessionId;

      if (this.onStateChange != null) {
        //this.onStateChange(SignalingState.CallStateNew);
        this.onStateChange(SignalingState.CallStateRinging);
      }
      //callPicked(id, media);

      /*    ===> Move the code block here to an accpet method <===
      _createPeerConnection(id, media, false).then((pc) {
        _peerConnections[id] = pc;
        pc.setRemoteDescription(new RTCSessionDescription(
            description['sdp'], description['type']));
        _createAnswer(id, pc, media);
      });*/
    }

//place this somewhere
void callPicked() {
_createPeerConnection(data['from'], data['media'], false).then((pc) {
_peerConnections[data['from']] = pc;
pc.setRemoteDescription(
new RTCSessionDescription(description['sdp'], description['type']));
_createAnswer(data['from'], pc, data['media']);
});
}`

[Condelab]

everything seem to be working as expected only that once i pick the call the remote video does not connect, but the state changes, so i figured its a part of the code that wants to run immediately the call is initiated

this was how i checked:

` callPicked() {
_createPeerConnection(data['from'], data['media'], false).then((pc) {
///from here
_peerConnections[data['from']] = pc;
pc.setRemoteDescription(
new RTCSessionDescription(description['sdp'], description['type']));
///to here want to run inside the switch case

//this part below connects even after 5secs delay still connect
Future.delayed(const Duration(milliseconds: 5000), () {
if (this.onStateChange != null) {
this.onStateChange(SignalingState.CallStateNew);
}
_createAnswer(data['from'], pc, data['media']);
});
});
}`

my code works perfect but because am separating that function from the switch case for some time (the time for the user to pick the call), i think its timing out.

any ideas? Thanks

[GioviQ]

Hi, starting from this project, I developed a more realistic use case of video chat with 'accept and reject call'.
The code is at https://github.com/GioviQ/video-chat-experiment

I hope other developers want to contribute especially to the iOS part.

The app is published in beta section of Google Play here https://play.google.com/store/apps/details?id=net.quarella.videochatexperiment&hl=en

[Condelab]

@GioviQ You have done a wonderful Job, i will test it and let you know. But from what i have read so far, its gonna perform fine.

[GioviQ]

@Condelab Thank you

[Condelab]

@GioviQ thank you for everything you have really been of great help with this code you shared and I have shared the link to this great code of yours on some platforms including github.
However, i have an issue with my _remoteRenderer.
The issue is that I changed my ringing widget for video call to full height and full width i.e

new Stack(children: <Widget>[
              new ClipRect(
                child: new Container(
                  width: size.width,
                  height: size.height,
                  child: new Transform.scale(
                    scale: 1 / size.aspectRatio,
                    child: new Center(
                      child: new AspectRatio(
                        aspectRatio: 1.0,
                        child: new RTCVideoView(_localRenderer),
                      ),
                    ),
                  ),
                ),
              ),
              new Container(
                width: double.infinity,
                height: double.infinity,
                decoration: new BoxDecoration(
                  color: Colors.black.withOpacity(0.3),
                ),
              ),
              new Container(
                  margin: const EdgeInsets.only(top: 70.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      Align(
                        alignment: Alignment.topCenter,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: <Widget>[
                            Icon(Icons.videocam, color: Colors.white),
                            SizedBox(
                              width: 5.0,
                            ),
                            Text(
                              "VIDEO CALL",
                              style: TextStyle(color: Colors.white),
                            )
                          ],
                        ),
                      ),
                      SizedBox(
                        height: 20.0,
                      ),
                      Align(
                        alignment: Alignment.topCenter,
                        child: Stack(
                          children: <Widget>[
                            ClipOval(
                                child: CachedNetworkImage(
                              imageUrl: _currentPeer['profilePicture'] != null
                                  ? _currentPeer['profilePicture']
                                  : UIData.profilePicturePlaceHolder,
                              fit: BoxFit.cover,
                              height: 100.0,
                              width: 100.0,
                              placeholder: (context, url) =>
                                  new CircularProgressIndicator(
                                valueColor: new AlwaysStoppedAnimation(
                                    Theme.Colors.ThemeColorPinkOrangeLight),
                              ),
                              errorWidget: (context, url, error) =>
                                  new Icon(Icons.error),
                            )),
                            Positioned(
                              child: Image.asset(
                                'assets/images/logo.png',
                                width: 30.0,
                                height: 30.0,
                              ),
                              top: 70.0,
                              left: 70.0,
                            ),
                          ],
                        ),
                      ),
                      SizedBox(
                        height: 20.0,
                      ),
                      Align(
                        alignment: Alignment.topCenter,
                        child: Text(
                          _currentPeer['name'],
                          style: TextStyle(
                              fontSize: 26.0,
                              fontWeight: FontWeight.w500,
                              color: Colors.white),
                        ),
                      ),
                    ],
                  )),
              Container(
                  alignment: Alignment.bottomCenter,
                  padding: EdgeInsets.symmetric(vertical: 80),
                  child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: <Widget>[
                        Expanded(
                            flex: 2,
                            child: GestureDetector(
                                onTap: () => _hangUp(),
                                child: ClipOval(
                                    child: Container(
                                  height: 65,
                                  width: 65,
                                  margin: EdgeInsets.only(left: 40, right: 40),
                                  decoration: new BoxDecoration(
                                    color: Colors.red,
                                    borderRadius: new BorderRadius.all(
                                        Radius.elliptical(100, 100)),
                                  ),
                                  child: Center(
                                    child: Icon(
                                      Icons.call_end,
                                      color: Colors.white,
                                      size: 30.0,
                                    ),
                                  ),
                                )))),
                        Expanded(
                            flex: 1,
                            child: SizedBox(
                              height: 0.0,
                            )),
                        Expanded(
                            flex: 2,
                            child: GestureDetector(
                                onTap: () => _pickUp(),
                                child: ClipOval(
                                    child: Container(
                                  height: 65,
                                  width: 65,
                                  margin: EdgeInsets.only(left: 40, right: 40),
                                  decoration: new BoxDecoration(
                                    color: Colors.green,
                                    borderRadius: new BorderRadius.all(
                                        Radius.elliptical(100, 100)),
                                  ),
                                  child: Center(
                                    child: Icon(
                                      Icons.videocam,
                                      color: Colors.white,
                                      size: 30.0,
                                    ),
                                  ),
                                )))),
                      ])),
            ]);

and my incall widget to same layout only that i replaced the _localRenderer with _remoteRenderer i.e

new Stack(children: <Widget>[
            new ClipRect(
              child: new Container(
                decoration: BoxDecoration(color: Colors.black),
                width: size.width,
                height: size.height,
                child: new Transform.scale(
                  scale: 1 / size.aspectRatio,
                  child: new Center(
                    child: new AspectRatio(
                      aspectRatio: 1.0,
                      child: new RTCVideoView(_remoteRenderer),
                    ),
                  ),
                ),
              ),
            ),
            new Positioned(
              width: 100.0,
              height: 125.0,
              top: 30.0,
              left: 5.0,
              child: new ClipRect(
                child: new Container(
                  child: new Transform.scale(
                    scale: 1 / size.aspectRatio,
                    child: new Center(
                      child: new AspectRatio(
                        aspectRatio: 1.0,
                        child: new RTCVideoView(_localRenderer),
                      ),
                    ),
                  ),
                ),
              ),
            ),
            new Container(
                alignment: Alignment.bottomCenter,
                padding: EdgeInsets.symmetric(vertical: 80),
                child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      Expanded(
                          flex: 1,
                          child: SizedBox(
                            height: 0.0,
                          )),
                      Expanded(
                          flex: 2,
                          child: GestureDetector(
                              onTap: () => _hangUp(),
                              child: ClipOval(
                                  child: Container(
                                height: 65,
                                width: 65,
                                margin: EdgeInsets.only(left: 40, right: 40),
                                decoration: new BoxDecoration(
                                  color: Colors.red,
                                  borderRadius: new BorderRadius.all(
                                      Radius.elliptical(100, 100)),
                                ),
                                child: Center(
                                  child: Icon(
                                    Icons.call_end,
                                    color: Colors.white,
                                    size: 30.0,
                                  ),
                                ),
                              )))),
                      Expanded(
                          flex: 1,
                          child: SizedBox(
                            height: 0.0,
                          )),
                    ])),
            new Positioned(
              left: 0.0,
              right: 0.0,
              top: MediaQuery.of(context).size.height - 70.0,
              bottom: 10.0,
              child: new Container(
                  child: BottomAppBar(
                      color: Colors.transparent,
                      clipBehavior: Clip.antiAlias,
                      shape: CircularNotchedRectangle(),
                      child: Ink(
                          padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceAround,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: <Widget>[
                              MaterialButton(
                                  child: SizedBox(
                                    width: 70.0,
                                    height: double.infinity,
                                    child: Icon(
                                      Icons.repeat,
                                      color: Colors.white,
                                    ),
                                  ),
                                  onPressed: () => _onSwitchCamera()),
                              MaterialButton(
                                  child: SizedBox(
                                    width: 70.0,
                                    height: double.infinity,
                                    child: Icon(
                                        cameraOff
                                            ? Icons.videocam
                                            : Icons.videocam_off,
                                        color: Colors.white),
                                  ),
                                  onPressed: () => _onCameraOff()),
                              MaterialButton(
                                  child: SizedBox(
                                    width: 70.0,
                                    height: double.infinity,
                                    child: Icon(
                                        muted ? Icons.mic : Icons.mic_off,
                                        color: Colors.white),
                                  ),
                                  onPressed: () => _onToggleMute()),
                            ],
                          )))),
            ),
          ]);

The issue now is that when the video call get picked, the _remoteRenderer does not replace the _localRenderer and as a result what i still see is the _localRenderer which of is still my device local camera but the funny thing is that on the web side i can see the remote device once the call is picked without issues. do you have an idea of what might be happening?

the layout looks like this

[GioviQ]

The web client is implemented here https://github.com/cloudwebrtc/flutter-webrtc-server or in my fork.
Probably your issue is somewhere else, maybe you call _signaling.switchCamera()...

[Condelab]

hello everyone, please can you help out with suggestion on best way to add billing
(per seconds) to the video or audio call. do you think it will be better if it is done inside the app or on the server side. and whats the most efficient method to go about this? thanks.

[ghenry]

Server side.

…

On Mon, 3 Feb 2020, 18:41 Adepoju-Conde Adesegun Chris., < ***@***.***> wrote: hello everyone, please can you help out with suggestion on best way to add billing (per seconds) to the video or audio call. do you think it will be better if it is done inside the app or on the server side. and whats the most efficient method to go about this? thanks. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#27>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABG66HTV37MZF4NXDCN7VDRBBQOHANCNFSM4IJON6JA> .

[Condelab]

Server side.
…
On Mon, 3 Feb 2020, 18:41 Adepoju-Conde Adesegun Chris., < @.***> wrote: hello everyone, please can you help out with suggestion on best way to add billing (per seconds) to the video or audio call. do you think it will be better if it is done inside the app or on the server side. and whats the most efficient method to go about this? thanks. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#27?email_source=notifications&email_token=AABG66GS34AXRARAZH4B7Z3RBBQOHA5CNFSM4IJON6JKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKU5VRY#issuecomment-581556935>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AABG66HTV37MZF4NXDCN7VDRBBQOHANCNFSM4IJON6JA .

thanks but can u describe the logic?