jssip+webRtc+freeswitch 实现web端语音通话

该文章只说明前端代码逻辑，如有错误，感谢指出。
jssip官方网站
jssip中文文档api

html部分代码
主要通过ontrack事件监听媒体流，实现语音实时通话

<template><el-card id="sip"><header><h1>SIP呼叫</h1></header><el-divider></el-divider><main><div class="btns"><el-inputtype="text"placeholder="输入号码"v-model="phoneNum"size="small"style="width: 15%; margin-right: 10px"></el-input><el-button type="success" size="small" @click="call()">SIP拨号</el-button><el-button type="danger" size="small" @click="hangup()">挂断</el-button></div><!-- //挂断、接通、执行的录音 --><audio id="audio" autoplay="autoplay" src="" controls></audio></main></el-card>
</template>

/
/
js代码部分

<script>
export default {data() {return {ua: null,socket: null,eventHandlers: null,phoneNum: null,config: {},isRegister: false, // 是否已注册registerState: false,};},mounted() {},methods: {// 挂断hangup() {if (this.ua) {this.ua.stop();}},// 拨号call() {this.$nextTick(async () => {await this.getSipInfo();console.log("获取接口");if (!this.registerState) {this.callPhone(); // 注册console.log("注册事件");}await this.testCall();console.log("判断是否注册");});},testCall(sip_phone_number_) {console.log("sip3");// Register callbacks to desired call events// 判断是否注册if (this.isRegister) {}let options = {eventHandlers: this.eventHandlers,mediaConstraints: {audio: true,video: false,mandatory: { maxWidth: 640, maxHeight: 360 },},};// 后端请求返回的参数格式// let obj = {//   sip: "47.98.172.37:5960",//   wsip: "wss://h5.zzz888.cn:7443",//   username: "26ac631ac14213882738650",//   password: "28ca40e86b27c4a8f1b606587eec80f6",//   uri: `sip:26ac631ac14215171505290@47.98.172.37:5960`,// };// console.log("this.config", this.config);let obj = {sip: this.config.sip,wsip: this.config.wssip,username: this.config.ws_user,password: this.config.ws_pass,uri: `sip:${this.config.ws_user}@${this.config.sip}`,};this.ua.call("sip:fs" + this.phoneNum + "@" + obj["sip"], options);},//sip 配置getUa() {},// 调用接口，获取sip信息async getSipInfo(phone) {console.log("sip11111111");// this.phoneNum = "13882738650";// 获取主叫号码let activePhone = localStorage.getItem("ms_username");let parentId = localStorage.getItem("parentId");let params = {activePhone: activePhone,passivePhone: this.phoneNum,parentId,};let res = await callAppBind(params);if (res.data.statusCode == "00000") {Message.success("sip拨打成功");} else if (res.data.statusCode != "00000") {Message.error(res.data.message);} else {Message.error(res.data.data);}this.config = res.data.data;},// 注册sipcallPhone() {console.log("sip2");// debugger;// 拨打号码// this.getSipInfo()JsSIP.C.SESSION_EXPIRES = 120;JsSIP.C.MIN_SESSION_EXPIRES = 120;let obj = {sip: this.config.sip,wsip: this.config.wssip,username: this.config.ws_user,password: this.config.ws_pass,uri: `sip:${this.config.ws_user}@${this.config.sip}`,};this.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");},};// 配置信息if (this.ua) {this.ua.stop();}this.socket = new JsSIP.WebSocketInterface(obj.wsip);// const socket = new this.JsSIP.WebSocketInterface(obj.wsip);const configuration = {sockets: [this.socket],uri: obj.uri,password: obj.password,register: false, //指示JsSIP用户代理是否应在启动时自动注册//utbound_proxy_set: obj.wsip,contact_uri:"sip:" +obj["username"] +"@" +obj["sip"] +";transport=" +(obj["wsip"].substr(0, 3) == "wss" ? "wss" : "ws"),};console.log("configuration", configuration);// 创建UAlet options = {eventHandlers: this.eventHandlers,mediaConstraints: { audio: true, video: false },};this.ua = new JsSIP.UA(configuration);console.log("call号码", "sip:bob" + "18398754423" + "@" + obj["sip"]);// this.ua.call("sip:fs" + "17381586338" + "@" + obj["sip"], options);// 状态回调this.ua.on("connected", function (e) {console.log("--------已连接---------");});this.ua.on("disconnected", function (e) {console.log("-------未连接--------");});this.ua.on("registered", function (e) {console.log("--------已注册-------");// this.isRegister = true;// this.ua.unregister((options = null));this.registerState = true;});this.ua.on("unregistered", function (e) {console.log("------未注册--------");this.registerState = false;});this.ua.on("registrationFailed", (e) => {// this.$message.error("SIP注册失败,请联系管理员");});//客户接到了电话才会走这里this.ua.on("newRTCSession", (e) => {let audio = document.getElementById("audio");let session = e.session;let peerconnection = session.connection;if (e.originator === "local") {// addstream方法已被淘汰,所以现在不适用了，但还是可以正常使用// peerconnection.addEventListener("addstream", (event) => {//   // try {//     audio.srcObject = event.stream;//     console.log("打电话", event.stream);//   // } catch (e) {//     // console.log(e);//   // }// });peerconnection.ontrack = (event) => {audio.srcObject = event.streams[0];// console.log("打电话", event.stream);};} else {let callers = session.remote_identity.uri.user;//emitter.setCallinStatus.call(true, callers);}// 接听失败session.on("failed", (mdata) => {//emitter.setCallinStatus.call(false);// console.log("来电的时候 拒接或者 还没接听对方自己就挂断了");});// 接听成功session.on("accepted", (response, cause) => {console.log("接听成功");//  可以在这里执行媒体流的操作});// 接听成功后 挂断session.on("ended", () => {console.log("接听结束");});// 通话被挂起session.on("hold", (data) => {let org = data.originator;if (org === "local") {// console.log("通话被本地挂起:", org);} else {// console.log("通话被远程挂起:", org);}});// 通话被继续session.on("unhold", (data) => {let org = data.originator;if (org === "local") {console.log("通话被本地继续:", org);} else {console.log("通话被远程继续:", org);}});e.session.on("confirmed", (e) => {console.log("--------------------------电话接通，开始通话");});e.session.on("ended", (e) => {console.log("---------------------------电话已挂断，开始问卷");});//绑定回调后先给坐席‘滴’一声// e.session.answer();});// 登陆this.ua.start();// 登出// ua.stop();},},
};
</script>

jssip+webRtc+freeswitch 实现web端语音通话相关推荐

freeswitch + webRtc +jssip 实现web端语音通话
版权声明:本文为CSDN博主「foruok」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明. 原文链接:https://blog.csdn.net/foruok/ ...
jssip + webRtc + Freeswitch 实现web端接打电话功能
jssip + webRtc + Freeswitch 实现web端接打电话功能(接听,挂断,静音,取消静音) 做这些功能的前提,先要把freeswitch和webRtc搭建好 ** 注意: 服务器域 ...
用云服务器实现janus之web端与web通话！
一.前言: 大家周末好,今天给大家分享janus环境搭建以及如何实现web端与web端的实时通话!在写正式文章之前,首先要说明一下,本次环境的搭建,我没有在ubuntu本地去搭建,而是腾讯云服务器上搭 ...
使用 recordRTC 实现web 端音视频录制
相信大家在线上笔试过程中,都曾有经历过必须打开摄像头的过程. 其背后究竟是什么东西发挥了作用呢? 这期请跟随艾米栗的思路.了解一下. 一.webRTC 的历史可阅读: webrtc 官网:https ...
web端对接语音通话（腾讯云）
实时音视频实时语音通话(Web) - 场景实践 - 文档中心 - 腾讯云按照要求注册腾讯云账号,跑通demo 1.集成TRTCCalling组件 // npm方式安装 npm install tr ...
WebRTC 一对一语音通话中音频端到端分段延迟分析
WebRTC 一对一语音通话中的音频端到端延迟指从一个音频信号被发送端采集,到同一个信号被接收端播放出来这整个过程的时间.音频端到端延迟由多个阶段组成.音频端到端处理的冲采样.混音.回声和降噪等操作会 ...
Android手机间语音通话使用webrtc消除回音
公司的产品智能门铃当与人通话过程中会产生回音,因此想用webrtc的回音消除模块来消除,所以让我写一个android间语音通话的demo来验证webrtc回音消除模块的效果,下面就是我实现这个demo ...
一、基于wifi控制的智能家居系统之项目简介和设计方案（硬件基于arduino+esp8266,软件Android+Web端+scoket服务器，实现语音控制）
由于是物联网工程的学生,会一点硬件,会一点Android开发,会一点Web开发,于是乎决定毕设的时候做一个简单一点的毕设,但是能够把所有的知识都应用,串联起来,将所学的知识实践. 一.项目功能介绍项 ...
文字转语音离线html,web端文字转语音的几种方案
最近在开发一个微信排队取号的的系统,其中对于服务员端(管理端) 需要有呼叫功能,即点按钮就播出"xxx号顾客请就座"的声音. 经过在网上一番搜索研究,web端实现指定文字的语音播 ...

jssip+webRtc+freeswitch 实现web端语音通话

jssip+webRtc+freeswitch 实现web端语音通话相关推荐

最新文章

热门文章