Freeswitch+Sip.js实现软电话功能

最新推荐文章于 2024-04-16 12:58:59 发布
置顶 最新推荐文章于 2024-04-16 12:58:59 发布
阅读量2w 收藏 36
点赞数 18
分类专栏： freeswitch学习 文章标签： freeswitch sip.js 软电话 fs sip
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42275389/article/details/93610894
版权

Freeswitch+Sip.js实现软电话功能

版本:
sip.js : 0.13.8
freeswitch: 1.6

freeswitch相关配置

  • 修改 acl.conf.xml(笔者之前有遇到分机呼不通的情况,后来修改了此配置)
     <list name="lan" default="allow">
 <node type="deny" cidr="192.168.42.0/24"/>
 <node type="allow" cidr="192.168.42.42/32"/>
 <!-- use cidr= if you wish to allow ip ranges to this domains acl. -->
 <node type="allow" cidr="0.0.0.0/0"/>   <!-- 允许所有ip 此处根据自己的需要设置 -->
</list>
  • 修改 internal.xml
    修改,如没有则添加
    <param name="apply-candidate-acl" value="lan"/>

Sip.js相关代码及说明

	<!DOCTYPE html>
	<html>
	<head>
	    <meta charset="utf-8">
	    <title>sipjstest</title>
	    <link rel="stylesheet" href="css/style.css"/>
	</head>
	<body>
	<div>
	    <input id="number" value="1000" type="text"/>
	    <button id="startCall">Start Call</button>
	    <button id="endCall">End Call</button>
	    <button id="transfer">transfer</button>
	    <button id="hold">hold</button>
	    <button id="unhold">unhold</button>
	    <button id="mute">mute</button>
	    <button id="unmute">unmute</button>
	</div>
	<br>
	<div>
	    <input id="msg" value="你好" type="text"/>
	    <button id="sendMessage">Send Message</button>
	
	    <audio id="ringtone" loop src="./sounds/ringtone.wav"></audio>            <!--//来电提示音-->
	    <audio id="ringbacktone" loop src="./sounds/ringbacktone.wav"></audio>    <!--//电话呼叫后声音-->
	    <audio id="dtmfTone" src="./sounds/dtmf.wav"></audio>
	
	    <video id="remoteVideo" autoplay="autoplay"></video>
	    <video id="localVideo" autoplay="autoplay" muted="muted"></video>
	    <!-- DTMF -->
	    <div id="dtmf-buttons">
	        <button onclick="sendDtmf('1');">1</button>
	        <button onclick="sendDtmf('2');">2</button>
	        <button onclick="sendDtmf('3');">3</button>
	        <button onclick="sendDtmf('4');">4</button>
	        <button onclick="sendDtmf('5');">5</button>
	        <button onclick="sendDtmf('6');">6</button>
	        <button onclick="sendDtmf('7');">7</button>
	        <button onclick="sendDtmf('8');">8</button>
	        <button onclick="sendDtmf('9');">9</button>
	        <button onclick="sendDtmf('0');">0</button>
	        <button onclick="sendDtmf('#');">#</button>
	        <button onclick="sendDtmf('*');">*</button>
	    </div>
	</div>
	
	<script src="./js/sip-0.13.8.js"></script>
	<script>
	
	    var extCode = "1012"; //分机号
	    var extPass = "1012"; //分机密码
	    var config = {
	        uri: "sip:" +extCode + '@192.168.0.253:5066',
	        authorizationUser: extCode,
	        password: extPass,
	        displayName: extCode,
	        log: {
	            builtinEnabled: true,
	            level: 3 // log日志级别
	        },
	        transportOptions: {
	          //  wsServers: ['ws://192.168.0.253:5066'], // ws协议
	             wsServers: ['wss://192.168.0.253:7443'], //wss协议
	            traceSip: true  //开启sip日志,用于排查问题
	        },
	        allowLegacyNotifications: true,
	        hackWssInTransport: true, // 设置为true 则注册时 transport=wss; false:transport=ws;
	        /**
	         * sip.js生成的随机contact字符串 设置后会以此为后缀 可以搭配 cusContactName使用,根据自身业务进行使用
	         *  设置前: sofia/internal/sip:admin10@df7jal23ls0d.invalid;
	         *  设置后: sofia/internal/sip:admin10@192.168.0.253;
	         *
	         */
	        hackIpInContact: "192.168.0.253",
	        userAgentString: "myAwesomeApp",
	        registerOptions: {
	            expires: 300,
	            registrar: 'sip:registrar.mydomain.com',
	        },
	        /**
	         * 此处是笔者自定义的参数,因为注册到fs时,sip.js会随机生成contact字符串,如:sofia/internal/sip:admin10@df7jal23ls0d.invalid;
	         *  笔者自己添加了一个参数,对sip.js的源码进行了修改 ,修改后效果  sofia/internal/sip:1012@192.168.0.253 不需要的可以不理会此参数
	         * 此处纠正问题,官方提供了一个参数[contactName],使用此参数即可,sip.js使用官方的即可
	         * contactName:"1012"
	         */
	        // cusContactName: "1012"
	    };
	    var ua = new SIP.UA(config);
	
	    var sessionall;
	    var startCall = document.getElementById('startCall');
	    var endCall = document.getElementById('endCall');
	    var transfer = document.getElementById('transfer');
	    var hold = document.getElementById('hold');
	    var unhold = document.getElementById('unhold');
	    var sendMessage = document.getElementById('sendMessage');
	    var mute = document.getElementById('mute');
	    var unmute = document.getElementById('unmute');
	
	    var Ring={
	        /**
	         * 振铃
	         */
	        startRingTone: function () {
	            let play = document.getElementById("ringtone").play();
	            play.then(()=>{
	
	            }).catch((err)=>{
	
	            });
	
	        },
	        /**
	         * 停止振铃
	         */
	        stopRingTone: function () {
	            document.getElementById("ringtone").pause();
	        },
	
	        startRingbackTone: function () {
	            let play = document.getElementById("ringbacktone").play();
	            play.then(()=>{
	
	            }).catch((err)=>{
	
	
	            });
	        },
	        stopRingbackTone: function () {
	            document.getElementById("ringbacktone").pause();
	        }
	
	
	    };
	
	    /**
	     *  绑定方法
	     * @param obj 要绑定事件的元素
	     * @param ev 绑定的事件
	     * @param fn  绑定事件的函数
	     */
	    function bindEvent(obj, ev, fn) {
	        if (obj.attachEvent) {
	            obj.attachEvent("on" + ev, fn);
	        }
	        else {
	            obj.addEventListener(ev, fn, false);
	        }
	    }
	
	    /**
	     *  发送DTMF
	     * @param num 按键
	     */
	    function sendDtmf(num) {
	        sessionall.dtmf(num);
	    }
	
	    /**
	     * 拨打电话
	     */
	    bindEvent(startCall, 'click', function () {
	
	
	        var number = document.getElementById("number").value;
	        //创建一个新的出站（用户代理客户端）会话
	        sessionall = ua.invite(number, {
	            sessionDescriptionHandlerOptions: {
	                constraints: {
	                    audio: true,
	                    video: false
	                },
	                alwaysAcquireMediaFirst: true // 此参数是sip.js官方修复在firefox遇到的bug所设置
	            }
	        });
	
	        //开始嘟嘟嘟
	        Ring.startRingbackTone();
	
	
	        var remoteVideo = document.getElementById('remoteVideo');
	        var localVideo = document.getElementById('localVideo');
	
	
	        //每次收到成功的最终（200-299）响应时都会触发。
	        sessionall.on("accepted", function (response, cause) {
	            console.log(response);
	            Ring.stopRingbackTone();
	            var pc = this.sessionDescriptionHandler.peerConnection;
	            var remoteStream;
	
	            if (pc.getReceivers) {
	                remoteStream = new window.MediaStream();
	                pc.getReceivers().forEach(function (receiver) {
	                    var track = receiver.track;
	                    if (track) {
	                        remoteStream.addTrack(track);
	                    }
	                });
	            } else {
	                remoteStream = pc.getRemoteStreams()[0];
	            }
	            remoteVideo.srcObject = remoteStream;
	
	
	            var localStream_1;
	            if (pc.getSenders) {
	                localStream_1 = new window.MediaStream();
	                pc.getSenders().forEach(function (sender) {
	                    var track = sender.track;
	                    if (track && track.kind === "video") {
	                        localStream_1.addTrack(track);
	                    }
	                });
	            }
	            else {
	                localStream_1 = pc.getLocalStreams()[0];
	            }
	            localVideo.srcObject = localStream_1;
	        })
	
	        //挂机时会触发
	        sessionall.on("bye", function (response, cause) {
	            Ring.stopRingbackTone();
	            console.log(response);
	        })
	
	        //请求失败时触发，无论是由于最终响应失败，还是由于超时，传输或其他错误。
	        sessionall.on("failed", function (response, cause) {
	            Ring.stopRingbackTone();
	            console.log(response);
	        })
	
	        /**
	         *
	         */
	        sessionall.on("terminated", function (message, cause) {
	            Ring.stopRingbackTone();
	        })
	
	        /**
	         * 对方拒绝
	         */
	        sessionall.on('rejected', function (response, cause) {
	            Ring.stopRingbackTone();
	        })
	    })
	
	
	    //挂断事件
	    bindEvent(endCall, 'click', function () {
	        if (!sessionall) {
	            return;
	        } else if (sessionall.startTime) { // Connected
	            sessionall.bye();
	        } else if (sessionall.reject) { // Incoming
	            sessionall.reject();
	        } else if (sessionall.cancel) { // Outbound
	            sessionall.cancel();
	        }
	    })
	
	
	
	    //电话转移盲转
	    bindEvent(transfer, 'click', function () {
	        if (!sessionall) {
	            return;
	        }
	        var number = document.getElementById("number").value;
	        sessionall.refer(number, {
	            receiveResponse: function (msg, ss) {
	                console.error(msg);
	                console.error(ss);
	            }
	        });
	    })
	
	
	    //电话保持
	    bindEvent(hold, 'click', function () {
	        if (!sessionall) {
	            return;
	        }
	        sessionall.hold();
	    })
	
	
	    //恢复电话保持
	    bindEvent(unhold, 'click', function () {
	        if (!sessionall) {
	            return;
	        }
	        sessionall.unhold();
	    })
	
	    //发送消息
	    bindEvent(sendMessage, 'click', function () {
	        // Sends a new message
	        var number = document.getElementById("number").value;
	        var message = document.getElementById("msg").value;
	        ua.message(number, message);
	        // When receiving a message, prints it out
	        ua.on('message', function (message) {
	            console.log(message.body);
	        });
	    })
	
	    // 静音
	    bindEvent(mute, 'click', function () {
	        if (!sessionall) {
	            console.warn("No session to toggle mute");
	            return;
	        }
	
	        var pc = sessionall.sessionDescriptionHandler.peerConnection;
	        if (pc.getSenders) {
	            pc.getSenders().forEach(function (sender) {
	                if (sender.track) {
	                    sender.track.enabled = false;
	                }
	            });
	        } else {
	            pc.getLocalStreams().forEach(function (stream) {
	                stream.getAudioTracks().forEach(function (track) {
	                    track.enabled = false;
	                });
	                stream.getVideoTracks().forEach(function (track) {
	                    track.enabled = false;
	                });
	            });
	        }
	    })
	
	    // 解除静音
	    bindEvent(unmute, 'click', function () {
	        if (!sessionall) {
	            console.warn("No session to toggle mute");
	            return;
	        }
	
	        var pc = sessionall.sessionDescriptionHandler.peerConnection;
	        if (pc.getSenders) {
	            pc.getSenders().forEach(function (sender) {
	                if (sender.track) {
	                    sender.track.enabled = true;
	                }
	            });
	        } else {
	            pc.getLocalStreams().forEach(function (stream) {
	                stream.getAudioTracks().forEach(function (track) {
	                    track.enabled = true;
	                });
	                stream.getVideoTracks().forEach(function (track) {
	                    track.enabled = true;
	                });
	            });
	        }
	    })
	
	
	    // 接受入站（用户代理服务器）会话
	    ua.on('invite', function (session) {
	        // 开始振铃
	        Ring.startRingTone();
	        var url = session.remoteIdentity.uri.toString() + "来电了，是否接听";
	
	        var remoteVideo = document.getElementById('remoteVideo');
	        var localVideo = document.getElementById('localVideo');
	
	
	        session.on("terminated", function (message, cause) {
	            Ring.stopRingTone();
	            console.error(message);
	
	        })
	
	        /**
	         *
	         */
	        session.on('accepted', function (response, cause) {
	            console.error(response);
	            console.error(session);
	            Ring.stopRingTone();
	            // If there is a video track, it will attach the video and audio to the same element
	            var pc = this.sessionDescriptionHandler.peerConnection;
	            console.error(this.sessionDescriptionHandler);
	            var remoteStream;
	
	            if (pc.getReceivers) {
	                remoteStream = new window.MediaStream();
	                pc.getReceivers().forEach(function (receiver) {
	                    var track = receiver.track;
	                    if (track) {
	                        remoteStream.addTrack(track);
	                    }
	                });
	            } else {
	                remoteStream = pc.getRemoteStreams()[0];
	            }
	            remoteVideo.srcObject = remoteStream;
	
	
	            var localStream_1;
	            if (pc.getSenders) {
	                localStream_1 = new window.MediaStream();
	                pc.getSenders().forEach(function (sender) {
	                    var track = sender.track;
	                    if (track && track.kind === "video") {
	                        localStream_1.addTrack(track);
	                    }
	                });
	            }
	            else {
	                localStream_1 = pc.getLocalStreams()[0];
	            }
	            localVideo.srcObject = localStream_1;
	            localVideo.volume = 0;
	
	
	        })
	
	        session.on('bye', function (resp, cause) {
	            Ring.stopRingTone();
	        });
	
	        var isaccept = confirm(url);
	        if (isaccept) {
	            //接受来电
	            session.accept({
	                sessionDescriptionHandlerOptions: {
	                    constraints: {
	                        audio: true,
	                        video: false
	                    }
	                }
	            });
	            sessionall = session;
	        }
	        else {
	            //拒绝来电
	            session.reject();
	        }
	
	    });
	
	</script>
	
	</body>
	</html>

##参考资料: https://www.sipjs.com/
##参考资料: https://freeswitch.org/confluence/display/FREESWITCH/ACL
##参考资料: https://freeswitch.org/confluence/display/FREESWITCH/WebRTC#WebRTC-InstallCertificates
##源码连接: https://download.csdn.net/download/weixin_42275389/12919279
##码云地址:
如果文章帮到了你，请点个赞给笔者一个鼓励。如果有疑问，欢迎留言

Bang-181****0385
关注
  • 18
    点赞
  • 踩
  • 36
    收藏
    觉得还不错? 一键收藏
  • 28
    评论
专栏目录
vue项目调用jssip_SIP.js 一个简单，直观，功能强大的JavaScript信号库
weixin_36168972的博客
01-13 2025
SIP.jsA JavaScript SIP stack for WebRTC, instant messaging, and more!Website and DocumentationDownloadAuthorsPrevious AuthorsJoseph FrazierWill MitchellJsSIP AuthorsSIP.js contains substantial portion...
sipjs+FreeSWITCH+webrtc电话呼入、呼出、转移、保持网页端的应用示例
03-01
sipjs+FreeSWITCH+webrtc电话呼入、呼出、转移、保持网页端的应用的示例 谷歌浏览器下运行即可。 更改自己的分机、密码、服务器地址，可直接进行功能测试。 参考：http://sipjs.com。
浏览器web页面使用sipml5（jssip,sipjs）拨打电话(mod_cti基于FreeSWITCH)-webrtc
H4_9Y的博客
10-20 2236
文本主要介绍如何在网页web端上注册sip账户，进而实现拨打和接听电话。不用再额外安装sip软电话软件以及实体的电话机，方便CRM等系统集成电话呼叫。但是需要在网页web端上注册sip账户之前，获取到ssl证书，这个ssl证书是需要购买的。没有它是无法注册成功的。提示：以下是本篇文章正文内容，下面案例可供参考使用网页web端的sip软电话省去安装sip软电话软件以及实体的电话机的麻烦，而且顶顶通呼叫中心中间件的这些操作也不算太复杂，也算给用户带来了一定的便利。用户最烦的就是页面复杂以及铺天的广告。
FreeSWITCH 1.10.10 简单图形化界面15 - JsSIP媒体控制(LookLook)
最新发布
jia198810的博客
04-16 575
通过JsSIP建立通话后，获取JsSIP.RTCSession类的confirmed事件获取远端媒体MediaStream对象，然后通过媒体轨道MediaStreamTrack关闭和开启远端媒体。通过JsSIP建立通话后，获取JsSIP.RTCSession类，通过mute()方法可控制是否关闭和开启本地音频或者视频媒体。通过MediaStreamTrack的enabled属性控制媒体轨道。用户名：admin，密码：admin。可参考JsSIP使用手册。可参考web开发手册。
sip.js基于 FreeSwitch的使用过程
虫网的专栏
12-05 4635
sip.js基于 FreeSwitch的使用过程 tags：WebRTC sip.js FreeSwitch 音视频通话 创建时间：2016-10-23 13:29:05 http://139.196.40.50:8088/topics/9?r=1477200242 Configure FreeSWITCH SIP.js has been tested with F
sip.js: WebRTC的SIP客户端库
gitblog_00001的博客
03-10 741
sip.js: WebRTC的SIP客户端库 sip.js是一个轻量级、模块化的JavaScript库，用于构建基于WebRTC的SIP客户端应用程序。它提供了与SIP服务器进行交互的基本功能，并支持语音通话、视频通信和其他实时通信服务。 sip.js是什么？ sip.js是一个开源的JavaScript库，专为在现代浏览器中实现SIP（会话初始化协议）通信而设计。它允许开发者轻松地创建WebRT...
SIP.js 0.20.0版本简单Demo
Selicens的博客
12-03 3969
SIP.js的0.20.0版本是使用typescript开源的JavaScript库 首先从npm上加载SIP.js npm install sip.js 可以根据习惯使用ts或js来开发 <script lang="ts"> import { UserAgent, UserAgentOptions, Registerer, Inviter, SessionState } from 'sip.js' const transportOptions = { server: "w
uniapp Vue 使用 sip.js进行语音通话视频通话
weixin_43965143的博客
08-14 3345
下载或者安装 sip.js 到 uniapp 项目，APP 端在 menifest.json 中配置麦克风权限。(参数同上，只列出 methods 里的部分)
freeswitch 使用sipjs 、jssip webrtc网页音视频通话
热门推荐
Java_lilin的专栏
03-12 1万+
关于linphone手机端开发参考https://blog.csdn.net/Java_lilin/article/details/80539116 配置帮助群:261074724 sipjs 官网http://sipjs.com/ 参考官网说明 写法如下: <body> <div id="id_msg"></div> <input id...
JsSIP专栏一-引入JsSIP到html
weixin_43567874的博客
02-25 452
作者偷懒去了提示：以下是本篇文章正文内容，下面案例可供参考。
sipjs+FreeSWITCH+webrtc电话呼入、呼出、转移、保持网页端的应用
01-22
sipjs+FreeSWITCH+webrtc电话呼入、呼出、转移、保持网页端的应用 备注：谷歌浏览器下运行，更改自己的分机、密码、服务器地址，可直接进行功能测试，更详细深入学习参考：http://sipjs.com/
jssip完整案例demo
12-13
1.JsSIP是一個簡單易用的JavaScript庫，它利用SIP和WebRTC的最新發展，在任何網站上提供全功能的SIP端點。 2.通過JsSIP ，只要幾行代碼，任何網站都可以通過音頻，視頻等獲得實時通信功能。
SIP.js：一个简单，直观，功能强大JavaScript信号库
02-04
JavaScript的SIP库 通过创建实时的对等音频和视频会话 通过SIP在Web应用程序中利用SIP 发送即时消息并查看状态 支持早期媒体，保留和转让 发送DTMF RFC 2833或SIP INFO 分享您的屏幕或桌面 用TypeScript编写 在所有主要的网络浏览器中运行 与符合标准的服务器兼容，包括和 演示版 想要看到它在行动吗？ 项目网站上有。 寻找开始的代码？ 该存储库包括在Web浏览器中运行的。 用法 要发出SIP呼叫，请利用... import { Web } from "sip.js" ; // Helper function to get an HTML aud
sipjs_freeswitch_sipjs_sip.js_sipjs视频_
09-29
通过页面sipjs+freeswitch服务器实现视频音频通话。
freeswitch+webrtc+sipjs+jssip
10-12
一、sipjs版本0.13.*,sipjs+FreeSWITCH+webrtc，实现电话呼入、呼出、转移、保持、静音等功能，修改了部分sip.js源码,支持自定义呼叫字符串（contact），支持chrome、firefox，新增100rel页面,已测试可支持卡线, 更...
sip.js可用.rar
12-10
sip.js可用，配合freeswitch使用，需要手动更改添加自己的Ip地址
深入浅出SIP协议详解(以呼叫中心呼入呼出为例)
一只程序猿的修炼之旅
12-24 1万+
一、背景 传统拨打电话流程： A呼叫B，邀请B建立通话(Invite) 电话B振铃(Ring)，同时电话A也可以听见振铃 电话B提起表示应答，因此通话建立 通话中。。。 任意方挂断电话，通话结束 传统电话使用电磁波传输通信信号，而现阶段网络几乎拥有完整的覆盖率，因此SIP协议的意义是在IP网络中实现网络电话功能 二、协议内容 sip协议是应用层协议，与其他应用层协议协同工作，通过网络控制多媒体通信会话 通话双方需在IP网络中拥有一个SIP账号，区别于传统数字号码，SIP采用URL表示方法 sip:j
sip客户端源码c语言,SIP协议的VOIP
weixin_28979345的博客
05-27 1080
压缩包 : 69380659sip.rar 列表一个带源代码和文档的sip客户端(可运行)/SipAgentDemo/SipAgentDemo.clw一个带源代码和文档的sip客户端(可运行)/SipAgentDemo/ReadMe.txt一个带源代码和文档的sip客户端(可运行)/SipAgentDemo/SipAgentDemo.h一个带源代码和文档的sip客户端(可运行)/SipAgentD...
sipjs+freeswitch+webrtc电话呼入、呼出、转移、保持网页端的应用示例
09-07
SIP.js是一个基于WebRTC协议的JavaScript库，用于在网页上实现语音通信功能。FreeSWITCH是一个开源的软交换平台，可用于支持SIP/SIP WebSocket/WebRTC通信。下面是一个关于使用SIP.js和FreeSWITCH实现呼入、呼出、转移和保持功能的简单示例： 1. 呼入功能：当有人拨打网页端的电话号码时，SIP.js与FreeSWITCH建立连接，并接收到呼叫请求。网页端可通过SIP.js提供的API获取对方的号码以及其他相关信息。 2. 呼出功能：网页端可以使用SIP.js提供的API发送呼叫请求到FreeSWITCH，以实现拨打电话的功能。SIP.js会建立与FreeSWITCH的连接，并在对方接听时建立语音通信。 3. 转移功能：在通话过程中，网页端可以使用SIP.js提供的API将当前通话转移到其他号码或者分机上。通过将转移请求发送到FreeSWITCH，通话可以在不同的终端之间转移。 4. 保持功能：网页端可以使用SIP.js提供的API请求保持当前通话。SIP.js会发送相关的保持请求到FreeSWITCH，并在对方接受请求后将通话保持起来。稍后，网页端可以使用相应的API恢复通话。 这些示例仅展示了SIP.js和FreeSWITCH的一小部分功能，而实际的应用场景可能更加复杂。但这些基本功能已经足够示范如何在网页端实现电话的呼入、呼出、转移和保持功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 28
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值