Skip to content

Instantly share code, notes, and snippets.

@echohes
Created August 3, 2018 07:20
Show Gist options
  • Select an option

  • Save echohes/a15fcef59e78271d7a3acb0df480b6b6 to your computer and use it in GitHub Desktop.

Select an option

Save echohes/a15fcef59e78271d7a3acb0df480b6b6 to your computer and use it in GitHub Desktop.
Jssip (jssip-3.2.11.min.js) WebPhone (Video Calling Example)
<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>
@echohes

echohes commented Jan 23, 2023

Copy link
Copy Markdown
Author

Hi @Cruzzhere, what browser are you using?

@Cruzzhere

Copy link
Copy Markdown

@echohes Google Chrome Version 108.0.5359.124

@echohes

echohes commented Jan 26, 2023

Copy link
Copy Markdown
Author

@Cruzzhere I can't check right now, I will have to run a test server. Try replacing the method with an object, in add_stream func:

const remoteAudio = document.createElement('audio');
remoteAudio.src = window.URL.createObjectURL(e.stream);
remoteAudio.play();

@shwetasinghx

Copy link
Copy Markdown

hi new with jssip while using ur code im getting document is not defined ,window is not defined how do i solve it please help

@AndreyVolkov88

Copy link
Copy Markdown

How can I turn on the webcam on my laptop to send video to subscriber 2?

@echohes

echohes commented Apr 5, 2023

Copy link
Copy Markdown
Author

document is not defined

Hi! Is your code running in the browser?

@echohes

echohes commented Apr 5, 2023

Copy link
Copy Markdown
Author

How can I turn on the webcam on my laptop to send video to subscriber 2?

I understand correctly, you have 2 active calls, and only one need activate video?

@dr-plugin

Copy link
Copy Markdown

Hello
I am using this code and it works on android and desktop
But the sound does not play in the ios and chrome browser

In Safari it doesn't work at all !!!!!

@echohes

echohes commented May 11, 2023

Copy link
Copy Markdown
Author

Hello I am using this code and it works on android and desktop But the sound does not play in the ios and chrome browser

In Safari it doesn't work at all !!!!!

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.

@dr-plugin

Copy link
Copy Markdown

Thanks

@m-yunus

m-yunus commented Nov 8, 2024

Copy link
Copy Markdown

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