Created
August 3, 2018 07:20
-
-
Save echohes/a15fcef59e78271d7a3acb0df480b6b6 to your computer and use it in GitHub Desktop.
Jssip (jssip-3.2.11.min.js) WebPhone (Video Calling Example)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width" /> | |
| <title>Sip demo</title> | |
| </head> | |
| <body> | |
| <head><title>WebRT</title> | |
| <style> | |
| video { height: 240px; width: 320px; border: 3px solid grey; } | |
| </style> | |
| </head> | |
| <video id="selfView" autoplay muted=true></video> | |
| <video id="remoteView" autoplay></video> | |
| </body> | |
| <script src="jssip-3.2.11.min.js"> </script> | |
| <script> | |
| var socket = new JsSIP.WebSocketInterface('wss://${{SERVER}}/ws'); | |
| socket.via_transport = "tcp"; | |
| //Create HTML Audio Object | |
| var remoteAudio = new window.Audio() | |
| remoteAudio.autoplay = true; | |
| const mediaSource = new MediaSource(); | |
| var selfView = document.getElementById('selfView'); | |
| var remoteView = document.getElementById('remoteView'); | |
| var user = "${{USERNAME}}"; | |
| var pass = "${{PASSWORD}}"; | |
| var userAgent = JsSIP.version; | |
| console.log('sip:%s@${{SERVER}}', user); | |
| var configuration = { | |
| 'uri': 'sip:'+ user + '@${{SERVER}}', | |
| 'password': pass, // FILL PASSWORD HERE, | |
| 'sockets': [ socket ], | |
| 'register_expires': 180, | |
| 'session_timers': false, | |
| 'user_agent' : 'JsSip-' + userAgent | |
| }; | |
| var phone; | |
| if(user && pass){ | |
| JsSIP.debug.enable('JsSIP:*'); | |
| phone = new JsSIP.UA(configuration); | |
| phone.on('registrationFailed', function(ev){ | |
| alert('Registering on SIP server failed with error: ' + ev.cause); | |
| configuration.uri = null; | |
| configuration.password = null; | |
| }); | |
| phone.on('newRTCSession',function(ev){ | |
| var newSession = ev.session; | |
| if(session){ // hangup any existing call | |
| session.terminate(); | |
| } | |
| session = newSession; | |
| var completeSession = function(){ | |
| session = null; | |
| }; | |
| if(session.direction === 'outgoing'){ | |
| console.log('stream outgoing -------->'); | |
| session.on('connecting', function() { | |
| console.log('CONNECT'); | |
| }); | |
| session.on('peerconnection', function(e) { | |
| console.log('1accepted'); | |
| }); | |
| session.on('ended', completeSession); | |
| session.on('failed', completeSession); | |
| session.on('accepted',function(e) { | |
| console.log('accepted') | |
| }); | |
| session.on('confirmed',function(e){ | |
| console.log('CONFIRM STREAM'); | |
| }); | |
| }; | |
| if(session.direction === 'incoming'){ | |
| console.log('stream incoming -------->'); | |
| session.on('connecting', function() { | |
| console.log('CONNECT'); | |
| }); | |
| session.on('peerconnection', function(e) { | |
| console.log('1accepted'); | |
| add_stream(); | |
| }); | |
| session.on('ended', completeSession); | |
| session.on('failed', completeSession); | |
| session.on('accepted',function(e) { | |
| console.log('accepted') | |
| }); | |
| session.on('confirmed',function(e){ | |
| console.log('CONFIRM STREAM'); | |
| }); | |
| var options = { | |
| 'mediaConstraints' : { 'audio': true, 'video': true }, | |
| 'pcConfig': { | |
| 'rtcpMuxPolicy': 'require', | |
| 'iceServers': [ | |
| ] | |
| }, | |
| }; | |
| console.log('Incoming Call'); | |
| session.answer(options); | |
| } | |
| }); | |
| phone.start(); | |
| } | |
| var session; | |
| function callAsterisk(numTels) { | |
| var options = { | |
| 'mediaConstraints' : { 'audio': true, 'video': true }, | |
| 'pcConfig': { | |
| 'rtcpMuxPolicy': 'require', | |
| 'iceServers': [ | |
| ] | |
| }, | |
| }; | |
| var numTel = numTels.toString(); | |
| var num = '200'; | |
| console.log(numTel); | |
| phone.call(numTel, options) | |
| add_stream(); | |
| }; | |
| function add_stream(){ | |
| session.connection.addEventListener('addstream',function(e) { | |
| remoteAudio.srcObject = (e.stream); | |
| remoteView.srcObject = (e.stream); | |
| selfView.srcObject = (session.connection.getLocalStreams()[0]); | |
| }) | |
| } | |
| </script> | |
| <p> | |
| <a href="javascript:callAsterisk(123)">Test</a> | |
| <a href="javascript:callAsterisk(777)">Echo</a> | |
| <a href="javascript:callAsterisk(501)">Call to 501</a> |
Thanks
Hello! I’m new to JSSIP and am exploring ways to improve the handling of outgoing calls. When I make an outgoing call, there’s no response if the callee is busy or their phone is switched off. Is there a way to enable early media or similar functionality in JSSIP to receive feedback in these cases? Any guidance or examples would be much appreciated. Thank you!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi!
As far as I remember, the mechanism of working with i/o devices is implemented differently in browsers. It is necessary to read the documentation for Safari. Because I did a different implementation between google chrome and firefox.