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 ...
随机推荐
- [数据结构]普里姆（Prim）算法生成最小生成树
前提介绍:最小生成树概念 一个连通图的生成树是图的极小连通子图,它包含图中的所有定点,并且只含尽可能少的边,这意味着对于生成树来说,就砍去使生成树变成非连通图:若给它怎家一条边就会形成图中的一条回路. ...
- angular--路由导航三种方法
- BUG日记---运行Tomcat报406错误：根据请求中接收到的主动协商头字段，目标资源没有用户代理可以接受的当前表示，而且服务器不愿意提供缺省表示。
网页报错内容 HTTP Status 406 – 不可接收 Type Status Report 描述 根据请求中接收到的主动协商头字段,目标资源没有用户代理可以接受的当前表示,而且服务器不愿意提供缺 ...
- Unity_UIWidgets - 文字图标Icon
Unity_UIWidgets - 文字图标Icon 文字图标Icon 开篇 不吐不快的废话 正题 主题Icon 获取Icon 第一步 第二步 第三步 使用Icon 1.导入至Resources文件夹 ...
- Nacos注册中心 (介绍与配置)
Nacos注册中心 和Euraka一样都是注册中心,但Nacos不需要注册Nacos,因为阿里巴巴已经注册在好了.只需要下载安装后打开即可 Windows安装 开发阶段采用单机安装即可 1.1.下载安 ...
- spring boot swagger ui使用 nginx 部署后无法使用问题
location /saleapi/ { ## 指定HOST proxy_set_header Host $host; proxy_set_header X-Forwarded-For $proxy_ ...
- CSS特效集锦(9款 , 总有一款是你喜欢的)
主要是: 穿越时空特效, 图片放大镜, 3D相册, 立方体相册, 昼夜更替特效, 飘雪, 七彩雨, 签名生成器, 水波纹动画等 代码部分 <section> <div class=& ...
- 模型预处理层介绍（1） - Discretization
预处理的作用主要在于将难以表达的string或者数组转换成模型容易训练的向量表示,其中转化过程大多是形成一张查询表用来查询. 常见的预处理方式包括: class Discretization: Buc ...
- Seleniumweb自动化测试01
1.selenium简介 selenium是python的一个web第三方包,主要使用来做web自动化测试的 环境要求: ①.要有谷歌浏览器 ②.下载谷歌浏览器的驱动chromedriver(驱动我们 ...
- JSTL标签库C标签的使用注意事项
今天在写jsp中在c标签上踩了不少坑,在此记录一下. <c:if>标签单独使用,不与<c:otherwise>配套使用,搭配使用会报错. <c:otherwise> ...