Unable to get call notification ?

[vdoddichintala]

Hi @abrararshad I want to use this repo. I create one new application(angular 7) and used this. But didn't getting calling notification. Please help me.

thanks,

[vdoddichintala]

Hi @abrararshad Any help ?

Thanks.

[abrararshad]

Hello, sorry for late reply. I haven't updated the repo in a long time. So most likely things might have changed a bit at QB side OR it could be simply improper settings in your setup.

If you share more details about your setup and an exact issue. I might be able to help out.

[vdoddichintala]

Hi @abrararshad thanks for reply. Finally I found and fixed the issue. Now I am able to get the calling popup. And now I want to implement Calling function can you please share the code.

Thanks.

[abrararshad]

Great it worked for you. Unfortunately there is no calling functionality implemented as mentioned in README. I believe it won't be that hard to implement it

Here are the steps, i haven't tested

1. After connecting to chat QB.chat.connect which is already done in the repo but the example is here if you need: https://quickblox.com/developers/Sample-webrtc-web
2. Then create a video session QB.webrtc.createNewSession same link: https://quickblox.com/developers/Sample-webrtc-web - this step is missing from repo. Which you only need to implement in video-chat.component.ts
3. Once you get the stream from session.getUserMedia then call attachStreamToSession function inside video-chat.component.ts

Example: this.attachStreamToSession('remoteVideo_'+event.userID, event.userID);

Hope it helps

[vdoddichintala]

Thanks for quick reply. I am following same thing and trying to implement it but unable to create a call function.

[abrararshad]

Please share your code, any response or error in console if any

[vdoddichintala]

makeNewCall(){ let callees = [111111]; let isAudio = QB.webrtc.CallType.VIDEO let additionalOptions = {"bandwith": 512}; this.currentSession = QB.webrtc.createNewSession(callees, isAudio, additionalOptions); let mediaParams = this.getMediaParams(isAudio, 'localVideo'); this.currentSession.getUserMedia(mediaParams, (err, stream) => { if ( err || !stream.getAudioTracks().length || (isAudio ? false : !stream.getVideoTracks().length) ) {
let errorMsg = 'device_problem'; console.log('device_problem'); this.currentSession.stop({}); } else { if(this.currentSession.state !== QB.webrtc.SessionConnectionState.CLOSED){ try{ this.currentSession.call({}); console.log('this.currentSession', this.currentSession); }catch(e) { console.log('Connection issue while accepting the call ', e); console.log('session closed'); } } }
});
}

[abrararshad]

Its not clear. please format your code and also explain where you are writing this code.

BTW, you need to add the calling part that makes the actual calling inside qb.service.ts in a function and then make a call to that service function from the video-chat.component.ts using this.serviceManager (assuming here you have list of users to initiate the call for)

Your reference to QB is [this.service](https://github.com/abrararshad/angular2-quickblox/blob/master/qb.service.ts#L76) that you can use to call QB methods

[vdoddichintala]

Sorry sir I written actual calling method inside video-chat.component.ts

I am new to angular

Please help me.

Thanks

[vdoddichintala]

Hi @abrararshad Any help please. Thanks

[abrararshad]

Hello, sorry i am busy with other things at the moment. I will try to implement it as soon as i can.

[vdoddichintala]

Okay, thank you for your help. I will update you on this.

[vdoddichintala]

Hi @abrararshad

import { QBService } from '../../video-call/qb.service';
import { VideoChatComponent } from '../../video-call/video-chat.component';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.less'],
  providers: [VideoChatComponent]
})

export class ProfileComponent implements OnInit{
  constructor(
    public QBService: QBService,
    public VideoChatComponent: VideoChatComponent) { }

  ngOnInit() {}

  startNewCall(isAudio: string) {
    let calles = [123456];
    let callerId = 1111111;
    this.VideoChatComponent.initaiteAudioOrVideoCall(calles, callerId, isAudio);
  }

}

From this component I am calling this.VideoChatComponent.initaiteAudioOrVideoCall(calles, callerId, isAudio); function which is implemented in video-chat.component.ts Here I am able to create new session and receiver able to get notification.

But I am missing to display calling popup and receiver unable to get the stream data.

### Zip file having implementation code.

Please help me to resolve this and make call successfull.

Thanks.

[vdoddichintala]

Hello @abrararshad Can you help me please.

Thanks

[vdoddichintala]

Hi @abrararshad Any update please?

Thanks

[vdoddichintala]

Hi @abrararshad Please give me replay

[vdoddichintala]

Hi @abrararshad Now I am able to call and receiver receiving OnCallReceive notification. If receiver accept call is able to see video but caller side unable to display video. Please help me I am stopped here. Hope you will understand. Thanks.

[abrararshad]

Sorry for delay. Please check https://github.com/abrararshad/angular2-quickblox/issues/3#issuecomment-583820688

[vdoddichintala]

Thanks for replay. I will do the same.

[vdoddichintala]

Hi @abrararshad If you have a time could you please update the repo with outgoing call implementation. Thanks.

[vdoddichintala]

Hi @abrararshad Please update the repo with outgoing call functions Thanks

[vdoddichintala]

Hi @abrararshad Please see the below code and guide me please.

Profile.ts have click function to start to new call

Profile.ts

 startNewCall(isAudio: string) {
    let calles = [102089076]; // this.data.submittedBy.user.id
    let callerId = this.currentUserId;
    // this.onVideoChange.emit(true);
    if(!window.navigator.onLine) {
      this.commonToaster.toasterErrorMessage('No internet connection, please connect to internet');
      return false;
    }
    this.QBService.initaiteAudioOrVideoCall(calles, callerId, isAudio);
    // console.log('this.currentsession', this.currentSession);
  }

Next calling QBservice function initaiteAudioOrVideoCall()

qb.service.ts

 // Implememntation of new audio or video call
initaiteAudioOrVideoCall(calles ?: any, callerId ?: number, audio ?: string) {
    // default setting to video call
    let isAudio = audio === 'audio' ? QB.webrtc.CallType.AUDIO : QB.webrtc.CallType.VIDEO;
    console.log('calltype', isAudio);
    // adding additional params
    let additionalOptions = { "bandwith": 512 }
    //promise function for session creation and getusermedia
    this.startCall(calles, callerId, isAudio, additionalOptions).then((response) => {
        console.log('response', response);

       //initiating video.chat.component.ts and sending current session to video component
        this.initiateComponent();
        this.componentEvents.next(response);
    })
}

//promise implementation
 startCall(calles?: any, callerId?: number, type?: string, additionalOptions?: any) {
        return new Promise((resolve, reject) => {
            let isAudio = this.service.webrtc.CallType.VIDEO;
            let currentSession = this.service.webrtc.createNewSession(calles, isAudio, callerId, additionalOptions);
            if (!currentSession) {
                reject('Session alredy created');
            } else {
                let mediaParams = this.getMediaParams(isAudio, 'localVideo');
                currentSession.getUserMedia(mediaParams, (err, stream) => {
                    console.log('stream', stream);
                if (err || !stream.getAudioTracks().length || (isAudio ? false : !stream.getVideoTracks().length)) {
                    let errorMsg = 'device_problem';
                    console.log('device_problem');
                    currentSession.stop({});
                } else {
                    if (currentSession.state !== this.service.webrtc.SessionConnectionState.CLOSED) {
                        try {
                            currentSession.call({});
                            resolve(currentSession);
                        } catch (e) {
                            console.log('Connection issue while accepting the call ', e);
                            console.log('session closed');
                        }
                    }
                }
            });

    }
    })

    }

Next video.chat component.ts to receive session from qb.service

video.chat.component.ts

ngOnInit(){
        console.log('oninit initiated');
        this.mainContainer = jQuery(this.mainContainerRef.nativeElement);
        this.overlay = jQuery(this.overlayRef.nativeElement);

        console.log(' this.serviceManager ',  this.serviceManager);
        this.rtcListenerSubcription = this.serviceManager.eventListener.subscribe(event => {

            console.log('this.serviceManager.eventListener', event);
            this.attachListeners(event);

            if(!(event instanceof OnCallStatsReport)) {
                this.windowResizerNoitifier.emit(this.getWindowSize());
            }
        });  

        //new implementation for receiving session fromq **qb.service**
        this.newCallSubscription = this.serviceManager.componentEvents.subscribe(event => {
            this.currentSession = {};
            this.currentSession.session = event;
            // this.caller = event.extension.userInfo.username;
            this.caller = event;
            console.log('outgoing call event this.currentSession ', this.currentSession);
            try{
                this.ringInComingRef.nativeElement.play();
            }catch(e) {
               console.log('Incoming call audio ', e);
            }

            this.isCallInProgress = true;
            this.callEnded = false;
            this.selectedStream = null;
            // this.localStream = event.localStream;
            this.attachStreamToSession('remoteVideo_big', null,  this.currentSession.localStream);
        })

        this.attachSubscriptions();
    } 

Please check the code above and help me. I am unable to bind stream to video element

Thanks.

[vdoddichintala]

Hi @abrararshad The above implementation is right or need to change the logic Please update me. Thanks.

[abrararshad]

Hey, sorry again but i have been completely busy with things at my end. I don't think i can integrate outgoing call functionality anytime soon as I don't have any working environment to setup the project and also coz of a load of things at hand. But if you got it setup soon you can create a pull request for merge.

You didn't mention any error or something but apparently code looks OK except one thing that I suspect could be an issue

Don't call this.initiateComponent() because video-chat.component should already be embbeded using its selector in the angular layout template. It should already be part of the DOM but invisible. Pls README of the repo

I think you are very close. Pls check this comment once again if you are missing anything https://github.com/abrararshad/angular2-quickblox/issues/3#issuecomment-583820688

[vdoddichintala]

Hi @abrararshad
Thanks for your reply. I will create a small project for this and I will update it. You are the only one to help me on this. I tried it different ways but no use. And I am not getting any error. thanks.

[vdoddichintala]

Hi @abrararshad I created one demo project. It have the video call implementation. Please download the below zip file and follow he steps.

1. Download the video-call-demo.zip
2. npm install
3. ng serve
4. Open browser (i.e. localhost;4200) and give credentials that shows in login page.
5. After login you enter into the dashboard page. Here we can make audio and video calls

It works well when incoming call coming problem is out going call make to show video popup and session close.

Please spend some time for me and make outgoing call successful. And I believe it don't take much time for you.

I am waiting for your replay.

Thanks..

[vdoddichintala]

Hi @abrararshad I tried a lot but no use... You are the only one person to help me on this. Please download video-call-demo.zip file and try to figure it my mistake.

Thanks.

[vdoddichintala]

Hello @abrararshad
Could you please update the outgoing call functionality with this code. Just update the code testing not required. I know you are very busy, but please try to understand my problem.

video-call-demo.zip

Thanks in advance.

[vdoddichintala]

Hi @abrararshad Please reply me.

Thanks.

[vdoddichintala]

Hi @abrararshad

I am currently facing outgoing call issues some times session breaking. Please give me replay.

[vdoddichintala]

Hi @abrararshad Still I am facing the issue. Hope you understand.

Thanks.