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 ...
随机推荐
- Java基础篇——垃圾收集详解
JAVA垃圾收集 1.如何判断对象死亡 说道垃圾回收,那么首要问题就是jvm如何判断一个对象已经死亡呢 1.1 引用计数法 说白了,就是为每个对象设立一个引用计数器,每当有一个引用指向它,计数器加一, ...
- [cocos2d-x]判断两个矩形是否有交叉区域
bool Rect::intersectsRect(const Rect& rect) const { return !( getMaxX() < rect.getMinX() || r ...
- 请求量突增一下，系统有效QPS为何下降很多？
原创:扣钉日记(微信公众号ID:codelogs),欢迎分享,转载请保留出处. 简介 最近我观察到一个现象,当服务的请求量突发的增长一下时,服务的有效QPS会下降很多,有时甚至会降到0,这种现象网上也 ...
- VUE assets里的scss没有引用会被打包进代码里，本地代码和打包后的代码样式不一致解决办法
1.打包部署后,发现样式和本地运行时候代码不一致 经过排查发现 这个路径的文件被打包进去了,但是我并没有引用这个文件啊啊啊啊啊a~~~~ src\assets\webgl-assets\scss\st ...
- 基础文之-----typeof 和 instanceof
为了巩固基础,我会通过实例来详细说明,让我们一起搞懂 typeof 和 instanceof. <!DOCTYPE html> <html lang="en"&g ...
- python学习第七周总结
C/S模块 1C/S模块: 1.1Client:客户端:客户端也就是你这一端可以接收到的程序,手机app,web网页等,我们可以在客户端页面上向度武器发送请求以及数据,交给服务器处理. 1.2Serv ...
- Git03 自建代码托管平台-GitLab
1 GitLab 简介 GitLab 是由 GitLabInc.开发,使用 MIT 许可证的基于网络的 Git 仓库管理工具,且具有wiki 和 issue 跟踪功能.使用 Git 作为代码管理工具, ...
- Quartz与Topshelf结合实现window定时服务
一,新建控制台应用程序 二,选中项目,右键 - 管理 NuGet 程序包,添加四个: Quartz Quartz.Plugins Topshelf log4net 三,创建项目文件 三个配置文件:必须 ...
- SpringMVC的表单组件、国际化
spring mvc 的表单标签库 1.Student实体类 package com.southwind.POJO; import lombok.Data; @Data public class St ...
- flask服务器 + 协程 + 爬虫 + ui自动化
公司有个爬取的需求,要求持续性爬取,需要永久性地挂载到目标网站上,每天爬一次里面的数据.数据有下载表格的,我通过ui自动化点击拿到数据:还有一部分数据是几乎所有的图片信息,信息量近百万,这部分用scr ...