简介
项目中有一个需要拨打电话的功能,要求实时的进行音频接听,并且可以在电话接听或者挂断等情况下做出相应的操作。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
操作之后再次访问,执行正常。
这就是全部的文章内容了,问题只有一个,因为我搞了好久,哈哈,其余没啥了,做个记录。