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

简介

        项目中有一个需要拨打电话的功能，要求实时的进行音频接听，并且可以在电话接听大概挂断等情况下做出相应的操纵。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
        基础示例： 
        设置配置项：

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

复制代码

        注册：        

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

复制代码

        绑定事件：

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

复制代码

        拨号：这块代码一样平常放在注册成功回调中

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

复制代码

        这里的call变量我没有把定义的代码展示出来，大概会以为是内置对象，但是这里是在外部定义的一个普通变量，定义在外部为了方式作用域问题。        
        到这一步就可以进行正常的拨打电话了，但是我们仍旧可以在中间插一脚，设置各种监听事件        

1. //绑定电话接通事件
2. call.on("accepted", (e: any) => {
3.     console.log("通话接通")
4. })
5. //绑定电话挂断事件
6. call.on("ended", (e: any) => {
7.     console.log("通话挂断")
8. })
9. // 绑定通话失败事件
10. call.on("failed", (e: any) => {
11.     console.log("通话失败");
12. });
13. // 绑定通话取消事件
14. call.on("canceled", (e: any) => {
15.     console.log("通话被取消");
16. });

复制代码

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

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

复制代码

        上面的这块代码一样平常放在电话接通回调中。
        媒体播放之后可以释放，防止占用空间：

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

复制代码

        上面的这一块代码一样平常放在挂断电话回调中。
末了

        大概的流程就是这样，但是在开发的过程中碰到问题并不慌张，慌张的是没有碰到问题。最后总结一下这次使用的问题
        问题(亏斯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：我们敲的不是代码，是抱负，是白花花的马内！


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。