jssip3.9.1的demo，webphone网页电话
用的目前最新的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
jssip3.9.1的demo，webphone网页电话的更多相关文章
- 纯CSS3实现3D动画导航，html5 webRTC技术实现免费网页电话拨打
花了一周的时间完成了 说吧 (免费网页电话) 的前端开发工作,先将技术点总结如下: 免费电话采用最新的html5 webRTC 技术 实现互联网和电信MIS网互通实现网页电话,目前只有 google ...
- 如何js编译的文件dll对于网页电话
1. 加入一个项目的解决方案:JSControl 2. 在这个项目中加入js文件(JScript1.js) 脚本的内容: function showAlert(){ alert('Today is a ...
- python--爬虫入门（八）体验HTMLParser解析网页，网页抓取解析整合练习
python系列均基于python3.4环境 基本概念 html.parser的核心是HTMLParser类.工作的流程是:当你feed给它一个类似HTML格式的字符串时,它会调用goahead方法 ...
- android与javascript相互调用
下面这一节来介绍android和javascript是怎么相互调用的,这样我们的UI界面设计起来就简单多了,而且UI设计起来也可以跨平台.现在有好多web app前台框架了,比如sencha和jque ...
- Android中webview和js之间的交互(转)
http://www.cnblogs.com/leizhenzi/archive/2011/06/29/2093636.html 1.android中利用webview调用网页上的js代码. Andr ...
- JDK的目录
要想深入了解Java必须对JDK的组成, 本文对JDK6里的目录做了基本的介绍,主要还是讲解 了下JDK里的各种可执行程序或工具的用途 Java(TM) 有两个平台 JRE 运行平台,包括Java虚拟 ...
- ASP 发送邮件
ASP发送邮件源码 ASP通过调用API接口发送邮件 <% ' '网吧数据 'www.zgw8.com '邮件发送接口调用demo ' ' '获取网页源代码函数 '=============== ...
- JS 点击事件学习总结
废话篇: 在我们编写无论什么网页内容的时候我们总是或多或少的要接触到点击事件这一范畴的,写过几个简短的demo和网页之后,感觉自己对电机事件一类的东西了解也更为的清楚了,之前写过很多零零散散的东西现在 ...
- Javascript基础(2)
开始更咯~~~嘻嘻. ---------------------------------------------------------------------------------- 异常捕获:即 ...
- android 中webview调用js
1.android中利用webview调用网页上的js代码. Android 中可以通过webview来实现和js的交互,在程序中调用js代码,只需要将webview控件的支持js的属性设置为true ...
随机推荐
- 【前端调试】- 借助Performance分析并优化性能
欢迎阅读本系列其他文章 [前端调试]- 更好的调试方式 VSCode Debugger [前端调试]- 断点调试的正确打开方式 介绍 首先简单过一下Performance的使用,打开网页点击控制台Pe ...
- Win10的OneDrive目录在旧系统里无法访问、删不掉
近日又一次忍不了Win10的傻逼了,把主要设备降级回 Win8.1 了,配合 StartIsBack 以及 AeroGlass 使用.之所以没降级回 Win7,是因为当年买的大 Surface,只能 ...
- Java运算的精度和溢出问题
double和float的0.1问题 代码如下 public class demo2 { public static void main(String[] args) { float f=0.1f; ...
- 腾讯云服务器CentOS 7.6安装基本中间件
腾讯云服务器CentOS 7.6安装基本中间件 摘要:由于最近开始学习Redis和Zookeeper了,因此使用云服务器的频率开始多了起来,并且开始了基础的安装教学,由于我之前确实没用过Linux ...
- 一次JVM GC长暂停的排查过程
作者:京东科技 徐传乐 背景 在高并发下,Java程序的GC问题属于很典型的一类问题,带来的影响往往会被进一步放大.不管是「GC频率过快」还是「GC耗时太长」,由于GC期间都存在Stop The Wo ...
- 震网（Stuxnet）病毒深度解析：首个攻击真实世界基础设施的病毒
摘要:震网病毒主要是通过改变离心机的转速,来破坏离心机,并影响生产的浓缩铀质量. 本文分享自华为云社区<[安全技术]震网(Stuxnet)病毒深度解析:首个攻击真实世界基础设施的病毒(1)[原创 ...
- 从 GPT2 到 Stable Diffusion：Elixir 社区迎来了 Hugging Face
上周,Elixir 社区向大家宣布,Elixir 语言社区新增从 GPT2 到 Stable Diffusion 的一系列神经网络模型.这些模型得以实现归功于刚刚发布的 Bumblebee 库.Bum ...
- 使用VMware Converter Standalone P2V（物理机转换虚拟机）
使用VMware Converter Standalone P2V(物理机转换虚拟机) 环境说明: 1.P2V软件:VMware-converter-en-6.3.0-20575345 下载地址:v ...
- 各种排序算法实现(JAVA)
转载: https://blog.csdn.net/qq_42453117/article/details/100036347 Exer010Sort01BubbleSortV1 import ja ...
- 一次生产环境CPU占用高的排查
1. 项目背景 甲方是保密级别非常高的政府部门.所以我们全程拿不到任何测试数据,只能是自己模拟数据进行测试. 项目部署的时候,公司派了一人到甲方现场,在甲方客户全程监督下,进行部署,调试,导入数据等工 ...