sip.js on Vue.js

[Juli0GT]

I'm trying to implement sip.js in my vue.js repo.

`<script>

import sipModal from './sipModal.vue'

export default {
template: '#sipDialler',

name: 'sip-dialler',

data () {
    return {
        session: '',
        ua: '',
        hangupType: 'NOCALL',
        inputNumber: '',
        onCall: false,
        callIncoming: false,
        audioConstraints: {
            audio: true,
            video: false
        },
        mediaStream: ''
    }
},

computed: {
    media () {
        const audio = document.getElementById('remoteAudio')
        const audio2 = document.getElementById('localAudio')
        return {
            stream: this.audioConstraints,
            render: {
                remote: audio,
                local: audio2
            }
        }
    }
},

components: {
    'sip-modal': sipModal
},

created () {
    this.registerUserAgent()
},

methods: {
    registerUserAgent () {
        // eslint-disable-next-line
        this.ua = new SIP.UA({
            uri: '******.callwise.net',
            wsServers: 'wss://sip.callwise.net:443',
            traceSip: true,
            authorizationUser: '******',
            password: '********'
        })
        this.onRegistered()
        this.onUnregistered()
        this.onInvite()
    },
    onRegistered () {
        this.ua.on('registered', function () {
            // eslint-disable-next-line
            SIP.WebRTC.isSupported()
            // eslint-disable-next-line
            SIP.WebRTC.getUserMedia(this.audioConstraints, function (stream) {
                console.log(stream)
                this.mediaStream = stream
            }, function (e) {
                console.error(e)
            })
        })
    },
    onUnregistered () {
        this.ua.on('unregistered', function () {
            console.log('unregistered')
        })
    },
    onInvite () {
        this.ua.on('invite', function (incoming) {
            console.log('receiving call')
            this.session = incoming
            this.callIncoming = true
        })
    },
    onFailed () {
        this.session.on('failed', function (response, cause) {
            this.callIncoming = false
        })
    },
    makeCall () {
        this.session = this.ua.invite('sip:' + this.inputNumber + '********.callwise.net', this.media)
    },
    answerCall () {
        this.session.accept(this.media)
        this.callIncoming = false
    },
    rejectCall () {
        this.session.reject({statusCode: '486', reasonPhrase: 'Busy Here'})
    },
    deleteInput () {
        this.inputNumber = this.inputNumber.slice(0, -1)
    },
    addHash () {
        this.inputNumber += '#'
    },
    addAsterisk () {
        this.inputNumber += '*'
    }
}

}
</script>
`
When using that code I get ---> TypeError: Failed to execute 'getUserMedia' on 'Navigator': At least one of audio and video must be requested
at sip-0.7.5.js:10447
at Promise ()
at Object.promisifiedMethod [as getUserMedia] (sip-0.7.5.js:10442)
at UA.eval (eval at 186 (0.9df3722….hot-update.js:7), :71:28)
at UA.EventEmitter.emit (sip-0.7.5.js:112)
at RegisterContext.EventEmitter.emit (sip-0.7.5.js:112)
at RegisterContext.receiveResponse (sip-0.7.5.js:3477)
at RequestSender.receiveResponse (sip-0.7.5.js:3758)
at NonInviteClientTransaction.receiveResponse (sip-0.7.5.js:7615)
at Transport.onMessage (sip-0.7.5.js:8526)
(anonymous) @ sipDialler.vue?36c1:114

If I remove the bit:
SIP.WebRTC.getUserMedia(this.audioConstraints, function (stream) { console.log(stream) this.mediaStream = stream }, function (e) { console.error(e) }) })
I don't get any errors and I'm able to make calls, the person I'm calling to can hear me on the mobile-phone but I'm not ables to hear the person I'm calling on my speakers.

Any ideas why is that happening?

[egreenmachine]

You should not need to call getUserMedia yourself. The default media handler will do it for you.

[Juli0GT]

Hey Eric, thanks for your response. As I said on my first issue when I remove the line of code:
SIP.WebRTC.getUserMedia(this.audioConstraints, function (stream) { console.log(stream) this.mediaStream = stream }, function (e) { console.error(e) }) })

The error stops showing up, and I'm able to make calls from my website. However, the person I'm calling to can hear me from his mobile-phone but I'm not able to listen to the person I'm calling from my computer speakers. That means, the app access my microphone but not my speakers. Any idea why does it happen?

Thanks.

[egreenmachine]

First off can you confirm that the remote audio is being attached to the audio element on the DOM? Also confirm that it is played and not paused.

If that is the case, I would get SIP.js working outside of vue.js first. Then integrate it into vue. There is really nothing in vue that should affect SIP.js afaik.

[Juli0GT]

Thanks Eric, finally I made it work I changed my computed method from
computed: {
media () { const audio = document.getElementById('remoteAudio') const audio2 = document.getElementById('localAudio') return { stream: this.audioConstraints, render: { remote: audio, local: audio2 } } } },

To:

options () { const audio = document.getElementById('remoteAudio') const audio2 = document.getElementById('localAudio') return { media: { constraints: { audio: true, video: false }, render: { remote: audio, local: audio2 } } } },

And calling this.options instead of this.media and seems to work.
Thanks a lot for the help, I close the issue.

[klukiyan]

@Juli0GT
Hi,
Could you please share the rest of the sample of your working code?
I'm strugling to make it work too and you could help me very much.
Thank you