当前位置：首页 > news >正文

JSSIP的使用及问题(webRTC，WebSockets)

news 来源：原创 2025/6/26 3:36:56

简介

项目中有一个需要拨打电话的功能，要求实时的进行音频接听，并且可以在电话接听或者挂断等情况下做出相应的操作。jssip作为一个强大的实现实时通信的javascript库，这不门当户对了嘛。

jssip（官网： JsSIP - the Javascript SIP library）基于浏览器中的WebRTC和WebSockets技术进行实现SIP信令的传输和媒体流的交互。jssip通过websocket与SIP（一种用于建立、修改和终止多媒体会话的通信协议）服务器建立连接，使用sip协议进行会话控制和信令传输。资料说jssip可以进行音视频实时的通信，但是这里我只用了音频通信，因为项目中不用。

jssip能做的：

1、实时音频通话。

2、实时视频通话。

3、拨号监听、接听监听、挂断监听、拨号错误监听

操作

在通信之前需要自己有一个sip服务器，如何申请可以参考网上资料，我为什么不说，因为我也不清楚。

引入jssip：

1、通过npm install jssip

2、下载jssip库的js文件，保存到本地，然后引入，引入的对象名一般为JsSIP

基础示例：

设置配置项：

const socket = new JsSIP.WebSocketInterface(`${注册地址，一般为wss://开头}`);
const configuration = {sockets: [socket],uri: `${注册的用户名}@${域名}`, // password: '密码', //
};

const userAgent = new JsSIP.UA(configuration);
userAgent.start();

绑定事件：

userAgent.on('registered', () => {//注册成功会进入到这个回调中，在这里可以进行后续操作
})
// 监听来电/拨号事件
userAgent.on('newRTCSession', (e) => {rtcSession = e.session//rtcSession 变量定义在外部，这一步为了后续播放电话声音，需要用到这个变量，所以将他先保存在外部
});

**拨号：**这块代码一般放在注册成功回调中

const options = {//这是配置项，具体参数可以参考官网或其他资料'mediaConstraints': {//设置是否允许音频或者视频'audio': true, 'video': false,},rtcOfferConstraints: {offerToReceiveAudio: true,//只接受音频流offerToReceiveVideo: false,//只接受视频流}};
call = userAgent.call(`sip:${电话号码}@${域名}`, options);

这里的call变量我没有把定义的代码展示出来，可能会以为是内置对象，但是这里是在外部定义的一个普通变量，定义在外部为了方式作用域问题。

到这一步就可以进行正常的拨打电话了，但是我们仍然可以在中间插一脚，设置各种监听事件

//绑定电话接通事件
call.on("accepted", (e: any) => {console.log("通话接通")
})
//绑定电话挂断事件
call.on("ended", (e: any) => {console.log("通话挂断")
})
// 绑定通话失败事件
call.on("failed", (e: any) => {console.log("通话失败");
});
// 绑定通话取消事件
call.on("canceled", (e: any) => {console.log("通话被取消");
});

监听事件基本绑定完了，这里还有一点是：拨号之后可能网页的声音手机方可以听见，但是手机传过来的声音网页(电脑)听不见，这里需要设置电脑的媒体播放源。

const pc = rtcSession.connection;
const remoteStream = new MediaStream();
// 将远程音频轨道添加到远程流中
pc.getReceivers().forEach((receiver) => {if (receiver.track.kind === 'audio') {remoteStream.addTrack(receiver.track);}
});
audioElement = new Audio();//audioElement变量定义在外部，在其他方法中还要用到
audioElement.srcObject = remoteStream;
audioElement.play();

上面的这块代码一般放在电话接通回调中。

媒体播放之后可以释放，防止占用空间：

//如果媒体存在，暂停并且释放
if (audioElement) {audioElement.pause();audioElement.srcObject = null;audioElement.remove();
}

上面的这一块代码一般放在挂断电话回调中。

结尾

大概的流程就是这样，但是在开发的过程中遇到问题并不慌张，慌张的是没有遇到问题。最后总结一下这次使用的问题

问题(亏斯tion)：

1、项目在本地运行之后，如果使用local的网址打开，类似：http://localhost:3089/，正常运行，但是如果是这样的http://192.168.110.177:3089/，项目跑起来了，但是只能注册成功，没有后续了。

分析：除本地运行外，jssip无法在http协议下（不安全）使用，因为此时获取不到浏览器的麦克风权限，所以无法调用。https下不存在，所以如果要在http下运行正常，配置白名单：

解决：chrome://flags/#unsafely-treat-insecure-origin-as-secure

操作之后再次访问，执行正常。

这就是全部的文章内容了，问题只有一个，因为我搞了好久，哈哈，其余没啥了，做个记录。

简介

操作

结尾

程序员PS：我们敲的不是代码，是理想，是白花花的马内！

相关文章：