jssip3.9.1的demo，webphone网页电话
2024-10-16 06:08:51
用的目前最新的3.9.1版本，全版本在这里：
https://jssip.net/download/releases/ https://github.com/versatica/JsSIP
代码：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Title</title>
</head> <head> <script src="./jssip.min.js"></script> <script> var ___phone = null;
var ___session = null; // 注册软电话,登录（建立与服务器的socket连接）
function startPhone() {
var socket = new JsSIP.WebSocketInterface('wss://sip.myhost.com'); var configuration = {
sockets: [socket],
uri: 'sip:alice@example.com',
password: 'superpassword'
}; ___phone = new JsSIP.UA(configuration);
setUAEvent();
___phone.start(); } // 登出
function logout() {
if (___phone) {
___phone.unregister(); // 注销
___phone.stop({ register: true });
}
} // 初始化会话id
function init() {
___session = null;
} // 绑定ua事件
function setUAEvent(ua) {
// ws 开始尝试连接
___phone.on('connecting', (args) => {
console.log('ws尝试连接');
}); // ws 连接完毕
___phone.on('connected', () => {
console.log('ws连接完毕');
}); // ws 连接失败
___phone.on('disconnected', () => {
console.log('ws连接失败');
}) // SIP 注册成功
___phone.on('registered', e => {
console.log('SIP注册成功')
}); // SIP 注册失败
___phone.on('registrationFailed', e => {
console.log('SIP注册失败')
}); // SIP 取消注册
___phone.on('unregistered', e => {
console.log('SIP主动取消注册或注册后定期重新注册失败')
}); // IM消息 事件
___phone.on('newMessage', e => console.log('im新消息事件')); // 来电或者外呼事件
___phone.on('newRTCSession', e => {
console.log(`新的${e.originator === 'local' ? '外呼' : '来电'}`, e);
const session = e.session;
___session = session;
const peerconnection = session.connection;
console.log(e)
if (e.originator === 'local') {
peerconnection.addEventListener('addstream', (event) => {
const audio = document.getElementById('remoteAudio');
audio.srcObject = event.stream;
});
} else {
const callers = session.remote_identity.uri.user;
} // 接听失败
session.on('failed', mdata => {
init();
console.log('来电的时候 拒接或者 还没接听对方自己就挂断了');
}); // 接听成功
session.on("accepted", (response, cause) => {
console.log('接听成功')
}); // 接听成功后 挂断
session.on('ended', () => {
console.log('接听结束');
init();
}); // 通话被挂起
session.on('hold', (data) => {
const org = data.originator;
if (org === 'local') {
console.log('通话被本地挂起:', org);
} else {
console.log('通话被远程挂起:', org);
}
}); // 通话被继续
session.on('unhold', (data) => {
const org = data.originator;
if (org === 'local') {
console.log('通话被本地继续:', org)
} else {
console.log('通话被远程继续:', org);
}
});
});
} // 接听
function answer() {
___session.answer({
media: {
constraints: {
audio: true,
video: false
},
render: {
remote: document.querySelector('.audio'),
}
}
})
} // 挂断
function hangUp() {
if (___session && ___session.isEnded() === false) {
___session.terminate();
}
___session = null;
} // 挂起
function hold() {
___session.hold({ useUpdate: false });
} // 继续
function unhold() {
___session.unhold({ useUpdate: false });
} // 一定等到页面加载OK之后
window.onload = function () {
startPhone();
} // 发起呼叫（注册打电话的回调事件）
function callNumber(phoneNumber) {
var eventHandlers = {
progress(e) {
console.log('正在呼叫:', e);
},
failed(e) {
console.log('呼叫失败: ', e);
},
ended(e) {
console.log('呼叫结束:' + e.originator === 'remote' ? '对方挂断' : '自己挂断', e);
},
confirmed(e) {
console.log('呼叫接受' + e.originator === 'remote' ? '自己已接受' : '对方已接受', e);
}
};
const options = {
eventHandlers: eventHandlers,
mediaConstraints: { 'audio': true, 'video': false }
};
___phone.call(`sip:${phoneNumber}`, options);
} </script> </head> <body>
<!-- 媒体播放dom树 -->
<audio id='remoteAudio' autoPlay></audio> <!-- 发起呼叫 -->
<button onclick="callNumber('17600427676')">拨打</button>
</body>
参考自：https://www.cnblogs.com/dingshaohua/p/15137584.html
最新文章
- Pyqt 动态的添加控件
- NSDate 时间
- NHibernate系列文章二十五：NHibernate查询之Query Over查询（附程序下载）
- asp检测数字类型函数
- linux常用命令--ps、netstat、find
- 【转载】Fragment 全解析（1）：那些年踩过的坑
- sql server 查看创建视图的sql语句
- 【BZOJ 1791】 [Ioi2008]Island 岛屿
- jQuery核心结构简单分析
- Timewarp 一种生成当中帧技术，异步时间扭曲（Asynchronous Timewarp）
- Swift3 GCD队列优先级说明
- Java面向对象 GUI 补录
- 一个例子理解break和continue的区别
- Python_添加行号
- python之路（6）迭代器和生成器
- 【Spark篇】---Spark调优之代码调优，数据本地化调优，内存调优，SparkShuffle调优，Executor的堆外内存调优
- github的markdown页内锚点以及本地资源链接
- DLC 数制与数制的转换
- AWS是怎么改写 MySQL的?
- Kotlin语言编程技巧集