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 ...
随机推荐
- ac自动姬
字符串 ac自动姬 前言 省选临近,不能再颓了! 说着开始研究起moonlight串流.真香 本期博客之所以在csdn上发了一份,因为没有图床!如果有图床我一定会自力更生的! 好像和字符串没有毛关系 ...
- 【Dubbo3 终极特性】「云原生三中心架构」带你探索 Dubbo3 体系下的配置中心和元数据中心、注册中心的原理及开发实战（中）
承接上文 通过之前的[Dubbo3终极特性]「云原生三中心架构」带你探索 Dubbo3 体系下的配置中心和元数据中心.注册中心的原理及开发实战(上),让我们对Dubbo3的三中心架构体系有了一定的认识 ...
- 对 Pulsar 集群的压测与优化
前言 这段时间在做 MQ(Pulsar)相关的治理工作,其中一个部分内容关于消息队列的升级,比如: 一键创建一个测试集群. 运行一批测试用例,覆盖我们线上使用到的功能,并输出测试报告. 模拟压测,输出 ...
- cordova第三方插件的创建,修改以及调试指南---真机调试，浏览器调试
cordova使用以及真机调试,浏览器调试 创建插件 点击参考此文-- 超详细手把手教你cordova开发使用指南+自定义插件 插件修改注意事项--很重要 每次对自己代码目录里面任何内容进行修改后 都 ...
- ChatGPT开发实战
1.概述 前段时间使用体验了ChatGPT的用法,感受到ChatGPT的强大,通过搜索关键字或者输入自己的意图,能够快速得到自己想要的信息和结果.今天笔者将深挖一下ChatGPT,给大家介绍如何使用C ...
- day13-实现Spring底层机制-03
实现Spring底层机制-03 7.实现任务阶段5 7.1分析 阶段5目标:bean后置处理器的实现 7.2代码实现 新增: 1.创建 InitializingBean 接口,实现该接口的 Bean ...
- vue修改内容点击显示隐藏内容不自动刷新问题
今天遇到一个在card组件中点击显示隐藏的问题,修改了动态绑定的值,但是组件内容没有刷新,但是偶而其他元素修改导致页面动态刷新又刷新了,就猜想修改这个数组中一个对象的值并没有引起vue的动态刷新 解决 ...
- 【Oculus Interaction SDK】（三）限制可操作物体的移动 / 旋转
前言 这篇文章是[Oculus Interaction SDK]系列的一部分,如果发现有对不上的对方,可以回去翻看我之前发布的文章,或在评论区留言.如果文章的内容已经不适用于新版本了,也可以直接联系我 ...
- logback日志输出到mongodb
1.继承UnsynchronizedAppenderBase package com.xf.config; import java.util.Map; import org.springframewo ...
- 【学习日志】Java8的CompletableFuture
Java 8引入的CompletableFuture,对Future做了改进: 1.可以传入回调对象,不再像Future那样循环查询执行结果. 2.另外可以将多个Future结合到一起并行或串行执行, ...