Estoy tratando de implementar sip.js en mi repositorio vue.js.
'
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 += '*'
}
}
}
`
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),
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?
No debería necesitar llamar a getUserMedia
usted mismo. El controlador de medios predeterminado lo hará por usted.
Hola Eric, gracias por tu respuesta. Como dije en mi primer problema cuando elimino la línea de código:
SIP.WebRTC.getUserMedia(this.audioConstraints, function (stream) { console.log(stream) this.mediaStream = stream }, function (e) { console.error(e) }) })
El error deja de aparecer y puedo realizar llamadas desde mi sitio web. Sin embargo, la persona a la que llamo puede escucharme desde su teléfono móvil, pero yo no puedo escuchar a la persona a la que llamo desde los altavoces de mi computadora. Eso significa que la aplicación accede a mi micrófono pero no a mis altavoces. ¿Alguna idea de por qué sucede?
Gracias.
En primer lugar, ¿puede confirmar que el audio remoto se está adjuntando al elemento de audio en el DOM? También confirme que se reproduce y no se pausa.
Si ese es el caso, primero haría que SIP.js funcionara fuera de vue.js. Luego intégralo en vue. Realmente no hay nada en vue que deba afectar a SIP.js afaik.
Gracias Eric, finalmente lo hice funcionar Cambié mi método calculado de
calculado: {
media () {
const audio = document.getElementById('remoteAudio')
const audio2 = document.getElementById('localAudio')
return {
stream: this.audioConstraints,
render: {
remote: audio,
local: audio2
}
}
}
},
Para:
options () {
const audio = document.getElementById('remoteAudio')
const audio2 = document.getElementById('localAudio')
return {
media: {
constraints: {
audio: true,
video: false
},
render: {
remote: audio,
local: audio2
}
}
}
},
Y llamar a this.options en lugar de this.media y parece funcionar.
Muchas gracias por la ayuda, cierro el problema.
@ Juli0GT
Hola,
¿Podría compartir el resto de la muestra de su código de trabajo?
Yo también estoy luchando para que funcione y tú podrías ayudarme mucho.
Gracias
Comentario más útil
@ Juli0GT
Hola,
¿Podría compartir el resto de la muestra de su código de trabajo?
Yo también estoy luchando para que funcione y tú podrías ayudarme mucho.
Gracias