vue项目调用jssip_JsSIP和FreeSWITCH整合
写在前面:FreeSWITCH作为服务器,通过SIP协议,Web端使用jssip+webrtc和其他软电话进行通信
一、先配置FreeSWITCH(用的版本1.6.20)的配置:
1 、修改vars.xml文件,找到下面字段,并设置
2、修改 autoload_configs/acl.conf.xml文件,增加acl选项
在配置文件 sip_profiles/internal.xml 增加如下配置
默认情况下建立连接失败,提示下面错误,并呼叫失败
a21d347d-5622-451b-a1db-d241ca823e4d 2018-08-09 20:28:15.217384 [WARNING] switch_core_media.c:3451 NO candidate ACL defined, Defaulting to wan.auto
a21d347d-5622-451b-a1db-d241ca823e4d 2018-08-09 20:28:15.217384 [DEBUG] switch_core_media.c:3481 Save audio Candidate cid: 1 proto: udp type: host addr: 10.10.21.32:52786
a21d347d-5622-451b-a1db-d241ca823e4d 2018-08-09 20:28:15.217384 [DEBUG] switch_core_media.c:3523 Searching for rtp candidate.
a21d347d-5622-451b-a1db-d241ca823e4d 2018-08-09 20:28:15.217384 [DEBUG] switch_core_media.c:3523 Searching for rtcp candidate.
a21d347d-5622-451b-a1db-d241ca823e4d 2018-08-09 20:28:15.217384 [DEBUG] switch_core_media.c:3567 sofia/internal/82s6ps5e@80ug9oo63ltj.invalid no suitable candidates found.
a21d347d-5622-451b-a1db-d241ca823e4d 2018-08-09 20:28:15.217384 [DEBUG] switch_core_media.c:4767
a21d347d-5622-451b-a1db-d241ca823e4d 2018-08-09 20:28:15.217384 [NOTICE] sofia.c:8240 Hangup sofia/internal/82s6ps5e@80ug9oo63ltj.invalid [CS_CONSUME_MEDIA] [INCOMPATIBLE_DESTINATION]
5fe89e1d-bb0c-473b-8877-d3648acd4076 2018-08-09 20:28:15.217384 [DEBUG] switch_core_codec.c:248 sofia/internal/1009@192.168.20.78 Restore previous codec PCMA:8.
a21d347d-5622-451b-a1db-d241ca823e4d 2018-08-09 20:28:15.217384 [DEBUG] sofia.c:1453 Channel is already hungup.
在配置文件 sip_profiles/internal.xml 增加如下配置,解决这个问题
二、编写Web客户端
样式如下:
不是专业前端,没有做布局
启动之后,就和正常的SIP软终端一致了,通过FreSWITCH拨打其他软终端,测试正常。
源代码:基于JsSIP的客户端,参考网上,并自己修改并调试通过
JsSIP 对接 FreeSWITCH
style="width: 424px; height: 260px; background-color: #f2f4f4; border: 1px solid grey; padding-top: 4px">
SIP URI: | ||||
SIP Password: | ||||
WSS URI: | ||||
SIP Phone Info: | ||||
初始化 |
||||
注册 |
||||
注销 |
||||
呼叫 |
||||
挂断 |
var outgoingSession = null;
var incomingSession = null;
var currentSession = null;
var videoView = document.getElementById('videoView');
var constraints = {
audio: true,
video: false,
mandatory: {
maxWidth: 640,
maxHeight: 360
}
};
URL = window.URL || window.webkitURL;
var localStream = null;
var userAgent = null;
function testStart() {
var sip_uri_ = document.getElementById("sip_uri").value.toString();
var sip_password_ = document.getElementById("sip_password").value.toString();
var ws_uri_ = document.getElementById("ws_uri").value.toString();
console.info("get input info: sip_uri = ", sip_uri_, " sip_password = ", sip_password_, " ws_uri = ", ws_uri_);
var socket = new JsSIP.WebSocketInterface(ws_uri_);
var configuration = {
sockets: [socket],
outbound_proxy_set: ws_uri_,
uri: sip_uri_,
password: sip_password_,
register: true,
session_timers: false
};
userAgent = new JsSIP.UA(configuration);
//注册成功
userAgent.on('registered', function (data) {
console.info("registered: ", data.response.status_code, ",", data.response.reason_phrase);
});
//注册失败
userAgent.on('registrationFailed', function (data) {
console.log("registrationFailed, ", data);
//console.warn("registrationFailed, ", data.response.status_code, ",", data.response.reason_phrase, " cause - ", data.cause);
});
//注册超时
userAgent.on('registrationExpiring', function () {
console.warn("registrationExpiring");
});
userAgent.on('newRTCSession', function (data) {
console.info('onNewRTCSession: ', data);
//通话呼入
if (data.originator == 'remote') {
console.info("incomingSession, answer the call----------------------");
incomingSession = data.session;
data.session.answer({
'mediaConstraints': {
'audio': true,
'video': false,
mandatory: {maxWidth: 640, maxHeight: 360}
}, 'mediaStream': localStream
});
} else {
console.info("outgoingSession");
outgoingSession = data.session;
outgoingSession.on('connecting', function (data) {
console.info('onConnecting - ', data.request);
currentSession = outgoingSession;
outgoingSession = null;
});
}
data.session.on('accepted', function (data) {
console.info('onAccepted - ', data);
if (data.originator == 'remote' && currentSession == null) {
currentSession = incomingSession;
incomingSession = null;
console.info("setCurrentSession - ", currentSession);
}
});
data.session.on('confirmed', function (data) {
console.info('onConfirmed - ', data);
if (data.originator == 'remote' && currentSession == null) {
currentSession = incomingSession;
incomingSession = null;
console.info("setCurrentSession - ", currentSession);
}
});
data.session.on('sdp', function (data) {
console.info('onSDP, type - ', data.type, ' sdp - ', data.sdp);
});
data.session.on('progress', function (data) {
console.info('onProgress - ', data.originator);
if (data.originator == 'remote') {
console.info('onProgress, response - ', data.response);
}
});
data.session.on('peerconnection', function (data) {
console.info('onPeerconnection - ', data.peerconnection);
data.peerconnection.onaddstream = function (ev) {
console.info('onaddstream from remote ----------- ', ev);
videoView.src = URL.createObjectURL(ev.stream);
};
});
});
userAgent.on('newMessage', function (data) {
if (data.originator == 'local') {
console.info('onNewMessage , OutgoingRequest - ', data.request);
} else {
console.info('onNewMessage , IncomingRequest - ', data.request);
}
});
console.info("call register");
userAgent.start();
}
// Register callbacks to desired call events
var eventHandlers = {
'progress': function (e) {
console.log('call is in progress');
},
'failed': function (e) {
console.log('call failed: ', e);
},
'ended': function (e) {
console.log('call ended : ', e);
},
'confirmed': function (e) {
console.log('call confirmed');
}
};
function testCall() {
var sip_phone_number_ = document.getElementById("sip_phone_number").value.toString();
var options = {
'eventHandlers': eventHandlers,
'mediaConstraints': {
'audio': true, 'video': false,
mandatory: {maxWidth: 640, maxHeight: 360}
},
'mediaStream': localStream
};
outgoingSession = userAgent.call(sip_phone_number_, options);
}
function reg() {
console.log('register----------->');
userAgent.register();
}
function unReg() {
console.log('unregister----------->');
userAgent.unregister(true);
}
function hangup() {
console.log('hangup----------->');
userAgent.terminateSessions();
}
vue项目调用jssip_JsSIP和FreeSWITCH整合相关推荐
- vue项目调用activeX控件
vue项目调用activeX控件 最近的vue前端项目中需要使用aciveX控件,结合网络资料摸索后进行了小整理,成功实现'引入-获取-调用'.本地成功安装控件后操作步骤如下: 1. Internet ...
- vue项目调用百度地图定位,判断当前位置是否在目标位置范围内
之前用vue做了一个百度地图定位功能,判断是否当前位置在目标位置范围内的小功能,类似这样: 直接上代码 百度地图定位,设置目标位置范围,判断当前位置到目标位置的距离,BDMap.vue <tem ...
- 微信/企业微信-本地(MAC)VUE项目调用JS-SDK,开发测试环境搭建
调用微信SDK前置条件 根据官方文档,前端在使用微信的接口前要先进行配置,配置信息得从后端获取,后端在计算signature时需要前端传入当前页面的URL,开发者要在公众平台设置JS SDK安全域名, ...
- 前端Vue项目调用页面web3.js:连接metaMask钱包,(查询钱包ETH余额,查询代币余额,ETH转账,代币转账,代币授权,查询授权数量,计算价格)等功能
这里分享下相关文档 1.web3.js中文文档 https://learnblockchain.cn/docs/web3.js/getting-started.html 2.metamask官方文档: ...
- vue项目调用百度地图api 学习总结
一.安装百度地图插件: npm install vue-baidu-map –save 二.在vue项目首页index.html进入插件: 注:src里的http必须要写如果不写会出现bug! ! ! ...
- vue项目调用通用组件_详细解析:uniapp项目|vue组件形式实现的科技感loading纯CSS动效...
前言 本人是一枚并不安分守己的后端程序猿,一直对前端开发"垂涎三尺",所以,一有机会就会"不务正业"一番.最近,发现了一个非常好的学习资料,于是乎,我的老毛病又 ...
- vue项目 调用百度地图 BMap is not defined
这次老板新接了一个四点半官网页面,使用vue来写.emm--我感觉整个人都不好了,两天半解决了20个静态页面.还好vue写页面简直飞快,遇到一个vue的新坑,使用百度地图. 研究了好一会,总是报错BM ...
- vue项目中调用高德地图vue-amap 插件 的AMap.PlaceSearch简用
vue项目调用高德地图vue-amap 插件 的AMap.PlaceSearch简用 结合 elementui 的 el-input 直接下拉选取地点 不展示地图 1.下载 npm install v ...
- 【linux】【jenkins】自动化运维三 整合gitlab、docker发布vue项目
由于工作需要,这里我先创建一个vue的工程. 1.首先安装好gitlab相关插件:GitLab.GitLab Hook.NodeJS 插件安装参考:https://www.cnblogs.com/jx ...
最新文章
- 菜鸟学Java(十九)——WEB项目测试好帮手,Maven+Jetty
- mysql 日期类型比价_MySQL 日期时间类型怎么选?
- 行政区域村级划分数据库_最新行政区划代码省市区三级 乡镇街道四级 村五级 数据库(2020年11月版 )...
- 搞懂nginx的proxy模块-01
- scrollbarStyle属性
- (220)FPGA内部组成LUT介绍
- 赛锐信息:SAP系统业务审计介绍
- 设计模式(三)模版方法(行为型)
- vi 打开文件,行末尾有^M
- 为什么要有虚拟内存?
- 微信开发-业务域名、JS接口安全域名、网页授权域名
- ubuntu下修改mysql密码
- 分享几款好用的软件,建议低调收藏
- 在Matlab中将一幅图片的中心设置为x-y轴坐标原点
- Keil5_C51安装
- 华为云云容器引擎CCE踩坑记
- Android绘图之Canvas变换(6)
- office excel 装Visual Studio后报错解决方案
- 我的世界服务器怎么制作头颅,MythicMobs/论坛教程/如何制作自定义头颅的怪物
- 软件测试周刊(第72期):所谓学问,学学问问,就学会了嘛。最怕你不愿去学,不肯去问。
热门文章
- linux6同步时间,centos 6.x 同步网络时间
- php正则提取a,正则表达式 - php提取html中指定div下a标签的text和href问题
- html播放七牛云视频,直传七牛云视频播放商业版【价值199元】
- php变量原格式输出,PHP格式化输出打印变量
- 文件管理服务器数据库,Oracle数据库服务器参数文件管理教程
- oracle clearing,ORACLE DBA常用命令集锦(2)
- php写入文本乱码,如何解决PHP用fwrite写入文件中文乱码的问题
- android 贝塞尔曲线_OpenGL 实践之贝塞尔曲线绘制
- IOS 开发 UIProgress 和 UISlidre 进度条和滑动条组件
- MySQL 内连接查询