Search code examples
javascriptangularjslistenerwebrtcquickblox

QBWebRTC with id X is busy at the moment? QB.webrtc.onRemoteStreamListener is not firing. Quickblox Javascript SDK + angular + WebRTC


I have followed the documentation over three times and I cannot accept calls. Here is the code:

$scope.occupants = [6184, 6186];
$scope.session = QB.webrtc.createNewSession($scope.occupants, QB.webrtc.CallType.VIDEO);
$scope.localMediaParams = {
    audio: true,
    video: true,
    options: {
        muted: true,
        mirror: true
    },
    elemId: 'localVideoEl',
    optional: {
        minWidth: 240,
        maxWidth: 320,
        minHeight: 160,
        maxHeight: 240
    }
};

$scope.startCall = function() {
    if (angular.equals($scope.recipients, {})) {
        alert('Please choose a person to call');
    }else {
        if (angular.equals($scope.session, {})) {
            console.log('session hasn\'t been started');
            $scope.session.stop({});
            $scope.session = {};
            return false;
        }else {
            $scope.session.getUserMedia($scope.localMediaParams, function(err, stream) {
                if (err){
                    console.log(err);
                }else{
                    console.log(stream);
                    $scope.session.call({}, function(error) {
                        console.log(error);
                    });
                }
            });
        }
    }
};
$scope.answerCall = function() {
    $scope.session.getUserMedia($scope.localMediaParams, function(err, stream) {
        if (err){
            console.log(err);
            $scope.session.stop({});
        }else{
            console.log(stream);
            $scope.session.accept({});
        }
    });
};
QB.webrtc.onRemoteStreamListener = function(session, userID, remoteStream) {
    // attach the remote stream to DOM element
    console.log('onRemoteStreamListener');
    console.log($scope.session);
    $scope.session.attachMediaStream('remoteVideoEl', remoteStream);
};

I have two users with ID's 6184 and 6186. I am initiating the call from User 6186 and the console show this:

[QBWebRTC]: RTCPeerConnection init. userID: 6186, sessionID: 7e7ea17c-a207-4af0-82e1-744fbcce830e, type: offer
telemed.js:432 null
quickblox.min.js:86149 [QBWebRTC]: getAndSetLocalSessionDescription success
quickblox.min.js:86149 [QBWebRTC]: _startDialingTimer, dialingTimeInterval: 5000
quickblox.min.js:86149 [QBWebRTC]: _dialingCallback, answerTimeInterval: 0
quickblox.min.js:86149 [QBWebRTC]: getAndSetLocalSessionDescription success
quickblox.min.js:86149 [QBWebRTC]: _startDialingTimer, dialingTimeInterval: 5000
quickblox.min.js:86149 [QBWebRTC]: _dialingCallback, answerTimeInterval: 0
quickblox.min.js:86149 [QBWebRTC]: onCall. UserID:6186. SessionID: 7e7ea17c-a207-4af0-82e1-744fbcce830e
quickblox.min.js:86149 [QBWebRTC]: onReject. UserID:6184. SessionID: 7e7ea17c-a207-4af0-82e1-744fbcce830e
quickblox.min.js:86149 [QBWebRTC]: _clearDialingTimer
quickblox.min.js:86149 [QBWebRTC]: All peer connections closed: false
quickblox.min.js:86149 [QBWebRTC]: onIceConnectionStateCallback: closed
quickblox.min.js:86149 [QBWebRTC]: _dialingCallback, answerTimeInterval: 5000
quickblox.min.js:86149 [QBWebRTC]: onCall. UserID:6186. SessionID: 7e7ea17c-a207-4af0-82e1-744fbcce830e
quickblox.min.js:86149 [QBWebRTC]: Stop, extension: {}
quickblox.min.js:86149 [QBWebRTC]: _close
quickblox.min.js:86149 [QBWebRTC]: _clearDialingTimer
quickblox.min.js:86149 [QBWebRTC]: onIceConnectionStateCallback: closed

Now on the anwering side I see a call being generated but then it says that the initiating caller is busy:

[QBWebRTC]: onCall. UserID:6186. SessionID: 7e7ea17c-a207-4af0-82e1-744fbcce830e
quickblox.min.js:86149 [QBWebRTC]: User with id 6186 is busy at the moment.
quickblox.min.js:86149 [QBWebRTC]: onStop. UserID:6186. SessionID: 7e7ea17c-a207-4af0-82e1-744fbcce830e

Can someone tell me what is going on here and why the QB.webrtc.onRemoteStreamListener doesn't fire on the answering side?

One more thing:

after I hit End call, I get this error which I also do not understand as it also has bad english:

[QBWebRTC]: onStop. UserID:6186. SessionID: 7e7ea17c-a207-4af0-82e1-744fbcce830e
quickblox.min.js:86161 [QBWebRTC]: Ignore 'onStop', there is no information about session 7e7ea17c-a207-4af0-82e1-744fbcce830e by some reason.

Solution

  • The reason I was not able to accept the call was that I wasn't attaching the stream from the QB.webrtc.onCallListener Listener.

    QB.webrtc.onCallListener = function(session, extension) {
                $scope.session = session;
                console.log('User '+session.currentUserID+' is calling');
            };
    

    The documentation fails to explain what users need to be in the occupants array as well as what you should do with the stream once it hits that listener. From an angular perspective you should get a $scope.session or session is undefined if you do not attach the QB.webrtc.onCallListener stream to the session or $scope.session object. Also as Igor points out you should not include your users id in the occupants array.