用的目前最新的3.9.1版本，全版本在这里：

  1. https://jssip.net/download/releases/
  2.  
  3. https://github.com/versatica/JsSIP

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>Title</title>
  7. </head>
  8.  
  9. <head>
  10.  
  11.   <script src="./jssip.min.js"></script>
  12.  
  13.   <script>
  14.  
  15.     var ___phone = null;
  16.     var ___session = null;
  17.  
  18.     // 注册软电话,登录（建立与服务器的socket连接）
  19.     function startPhone() {
  20.       var socket = new JsSIP.WebSocketInterface('wss://sip.myhost.com');
  21.  
  22.       var configuration = {
  23.         sockets: [socket],
  24.         uri: 'sip:alice@example.com',
  25.         password: 'superpassword'
  26.       };
  27.  
  28.       ___phone = new JsSIP.UA(configuration);
  29.       setUAEvent();
  30.       ___phone.start();
  31.  
  32.     }
  33.  
  34.     // 登出
  35.     function logout() {
  36.       if (___phone) {
  37.         ___phone.unregister(); // 注销
  38.         ___phone.stop({ register: true });
  39.       }
  40.     }
  41.  
  42.     // 初始化会话id
  43.     function init() {
  44.       ___session = null;
  45.     }
  46.  
  47.     // 绑定ua事件
  48.     function setUAEvent(ua) {
  49.       // ws 开始尝试连接
  50.       ___phone.on('connecting', (args) => {
  51.         console.log('ws尝试连接');
  52.       });
  53.  
  54.       // ws 连接完毕
  55.       ___phone.on('connected', () => {
  56.         console.log('ws连接完毕');
  57.       });
  58.  
  59.       // ws 连接失败
  60.       ___phone.on('disconnected', () => {
  61.         console.log('ws连接失败');
  62.       })
  63.  
  64.       // SIP 注册成功
  65.       ___phone.on('registered', e => {
  66.         console.log('SIP注册成功')
  67.       });
  68.  
  69.       //  SIP 注册失败
  70.       ___phone.on('registrationFailed', e => {
  71.         console.log('SIP注册失败')
  72.       });
  73.  
  74.       // SIP 取消注册
  75.       ___phone.on('unregistered', e => {
  76.         console.log('SIP主动取消注册或注册后定期重新注册失败')
  77.       });
  78.  
  79.       // IM消息 事件
  80.       ___phone.on('newMessage', e => console.log('im新消息事件'));
  81.  
  82.       // 来电或者外呼事件
  83.       ___phone.on('newRTCSession', e => {
  84.         console.log(`新的${e.originator === 'local' ? '外呼' : '来电'}`, e);
  85.         const session = e.session;
  86.         ___session = session;
  87.         const peerconnection = session.connection;
  88.         console.log(e)
  89.         if (e.originator === 'local') {
  90.           peerconnection.addEventListener('addstream', (event) => {
  91.             const audio = document.getElementById('remoteAudio');
  92.             audio.srcObject = event.stream;
  93.           });
  94.         } else {
  95.           const callers = session.remote_identity.uri.user;
  96.         }
  97.  
  98.         // 接听失败
  99.         session.on('failed', mdata => {
  100.           init();
  101.           console.log('来电的时候 拒接或者 还没接听对方自己就挂断了');
  102.         });
  103.  
  104.         // 接听成功
  105.         session.on("accepted", (response, cause) => {
  106.           console.log('接听成功')
  107.         });
  108.  
  109.         // 接听成功后 挂断
  110.         session.on('ended', () => {
  111.           console.log('接听结束');
  112.           init();
  113.         });
  114.  
  115.         // 通话被挂起
  116.         session.on('hold', (data) => {
  117.           const org = data.originator;
  118.           if (org === 'local') {
  119.             console.log('通话被本地挂起:', org);
  120.           } else {
  121.             console.log('通话被远程挂起:', org);
  122.           }
  123.         });
  124.  
  125.         // 通话被继续
  126.         session.on('unhold', (data) => {
  127.           const org = data.originator;
  128.           if (org === 'local') {
  129.             console.log('通话被本地继续:', org)
  130.           } else {
  131.             console.log('通话被远程继续:', org);
  132.           }
  133.         });
  134.       });
  135.     }
  136.  
  137.     // 接听
  138.     function answer() {
  139.       ___session.answer({
  140.         media: {
  141.           constraints: {
  142.             audio: true,
  143.             video: false
  144.           },
  145.           render: {
  146.             remote: document.querySelector('.audio'),
  147.           }
  148.         }
  149.       })
  150.     }
  151.  
  152.     // 挂断
  153.     function hangUp() {
  154.       if (___session && ___session.isEnded() === false) {
  155.         ___session.terminate();
  156.       }
  157.       ___session = null;
  158.     }
  159.  
  160.     // 挂起
  161.     function hold() {
  162.       ___session.hold({ useUpdate: false });
  163.     }
  164.  
  165.     // 继续
  166.     function unhold() {
  167.       ___session.unhold({ useUpdate: false });
  168.     }
  169.  
  170.     // 一定等到页面加载OK之后
  171.     window.onload = function () {
  172.       startPhone();
  173.     }
  174.  
  175.     // 发起呼叫（注册打电话的回调事件）
  176.     function callNumber(phoneNumber) {
  177.       var eventHandlers = {
  178.         progress(e) {
  179.           console.log('正在呼叫:', e);
  180.         },
  181.         failed(e) {
  182.           console.log('呼叫失败: ', e);
  183.         },
  184.         ended(e) {
  185.           console.log('呼叫结束:' + e.originator === 'remote' ? '对方挂断' : '自己挂断', e);
  186.         },
  187.         confirmed(e) {
  188.           console.log('呼叫接受' + e.originator === 'remote' ? '自己已接受' : '对方已接受', e);
  189.         }
  190.       };
  191.       const options = {
  192.         eventHandlers: eventHandlers,
  193.         mediaConstraints: { 'audio': true, 'video': false }
  194.       };
  195.       ___phone.call(`sip:${phoneNumber}`, options);
  196.     }
  197.  
  198.   </script>
  199.  
  200. </head>
  201.  
  202. <body>
  203.   <!-- 媒体播放dom树 -->
  204.   <audio id='remoteAudio' autoPlay></audio>
  205.  
  206.   <!-- 发起呼叫 -->
  207.   <button onclick="callNumber('17600427676')">拨打</button>
  208. </body>

参考自：https://www.cnblogs.com/dingshaohua/p/15137584.html

jssip3.9.1的demo，webphone网页电话的更多相关文章

  1. 纯CSS3实现3D动画导航，html5 webRTC技术实现免费网页电话拨打

    花了一周的时间完成了 说吧 (免费网页电话) 的前端开发工作,先将技术点总结如下: 免费电话采用最新的html5 webRTC 技术 实现互联网和电信MIS网互通实现网页电话,目前只有 google ...

  2. 如何js编译的文件dll对于网页电话

    1. 加入一个项目的解决方案:JSControl 2. 在这个项目中加入js文件(JScript1.js) 脚本的内容: function showAlert(){ alert('Today is a ...

  3. python--爬虫入门（八）体验HTMLParser解析网页，网页抓取解析整合练习

    python系列均基于python3.4环境  基本概念 html.parser的核心是HTMLParser类.工作的流程是:当你feed给它一个类似HTML格式的字符串时,它会调用goahead方法 ...

  4. android与javascript相互调用

    下面这一节来介绍android和javascript是怎么相互调用的,这样我们的UI界面设计起来就简单多了,而且UI设计起来也可以跨平台.现在有好多web app前台框架了,比如sencha和jque ...

  5. Android中webview和js之间的交互(转)

    http://www.cnblogs.com/leizhenzi/archive/2011/06/29/2093636.html 1.android中利用webview调用网页上的js代码. Andr ...

  6. JDK的目录

    要想深入了解Java必须对JDK的组成, 本文对JDK6里的目录做了基本的介绍,主要还是讲解 了下JDK里的各种可执行程序或工具的用途 Java(TM) 有两个平台 JRE 运行平台,包括Java虚拟 ...

  7. ASP 发送邮件

    ASP发送邮件源码 ASP通过调用API接口发送邮件 <% ' '网吧数据 'www.zgw8.com '邮件发送接口调用demo ' ' '获取网页源代码函数 '=============== ...

  8. JS 点击事件学习总结

    废话篇: 在我们编写无论什么网页内容的时候我们总是或多或少的要接触到点击事件这一范畴的,写过几个简短的demo和网页之后,感觉自己对电机事件一类的东西了解也更为的清楚了,之前写过很多零零散散的东西现在 ...

  9. Javascript基础(2)

    开始更咯~~~嘻嘻. ---------------------------------------------------------------------------------- 异常捕获:即 ...

  10. android 中webview调用js

    1.android中利用webview调用网页上的js代码. Android 中可以通过webview来实现和js的交互,在程序中调用js代码,只需要将webview控件的支持js的属性设置为true ...

随机推荐

  1. [Leetcode]设计链表

    题目 设计链表的实现.您可以选择使用单链表或双链表.单链表中的节点应该具有两个属性:val 和 next.val 是当前节点的值,next 是指向下一个节点的指针/引用.如果要使用双向链表,则还需要一 ...

  2. 题解 P5607 [Ynoi2013] 无力回天 NOI2017

    简要题意 其实我觉得这个部分可以不要,因为这道题的题面还是很清晰的. 你需要维护一个数据结构,支持区间异或和区间求与 \(v\) 的最大异或和. 思路 对于这种区间问题,最容易想到的就是 分块 线段树 ...

  3. GIS数据下载合集：遥感、土壤、气象、行政区数据...

      本文介绍GIS领域相关的各类综合数据免费获取网站,包括遥感数据.气象数据.土地数据.土壤数据.农业数据.行政区数据.社会数据.经济数据等等.   数据较多,大家可以直接通过下方目录加以总览:点击数 ...

  4. vue小技巧-vue引入样式、修改难以修改的子组件内部标签样式

  5. Unity之Android端权限申请

    Unity之Android端权限申请 Unity之Android端权限申请 前言 开篇废话 Unity版本 正题 前期准备 挂载脚本 打包发布 安装App 查看结果 结尾 唠家常 今日无推荐 Unit ...

  6. magic-api数据库存储方案

    建表语句 drop table if exists magic_api_file; CREATE TABLE `magic_api_file` ( `id` int(11) NOT NULL AUTO ...

  7. 从 Newtonsoft.Json 迁移到 System.Text.Json

    一.写在前面 System.Text.Json 是 .NET Core 3 及以上版本内置的 Json 序列化组件,刚推出的时候经常看到踩各种坑的吐槽,现在经过几个版本的迭代优化,提升了易用性,修复了 ...

  8. mybatis学习日记

    1.什么是框架 框架是软件开发中的一套解决方案,不同的框架解决不同的问题 2.三层架构 表现层:展示数据 业务层:处理业务需求 持久层:与数据库交互 3.持久层解决技术 JDBC技术(JDBC是一种规 ...

  9. el-input 限制只能输入正整数

    1.前端页面 <el-row :gutter="20"> <el-col :span="20"> <el-form-item la ...

  10. 代码随想录算法训练营day02 | leetcode 977/209/59

    leetcode 977   分析1.0:   要求对平方后的int排序,而给定数组中元素可正可负,一开始有思维误区,觉得最小值一定在0左右徘徊,但数据可能并不包含0:遂继续思考,发现元素分布有三种情 ...