基于surging 如何利用peerjs进行语音视频通话

  一 、 概述

          PeerJS 是一个基于浏览器WebRTC功能实现的js功能包,简化了WebrRTC的开发过程，对底层的细节做了封装，直接调用API即可,再配合surging 协议组件化从而做到稳定，高效可扩展的微服务，再利用RtmpToWebrtc 引擎组件可以做到不仅可以利用httpflv 观看rtmp推流直播，还可以接纳基于 Webrtc的peerjs 进行观看，那么今天要讲的是如何结合开发语音视频通话功能。放到手机和电脑上都可以实现语音视频通话。
    一键运行打包成品下载：https://pan.baidu.com/s/1MVsjKtVYpUonauAz9ZXtPg?pwd=1q2g
    测试用户：fanly
    测试密码：123456
      为了让大家节约时间，能尽快运行产品看到结果，上面有 一键运行打包成品可以进行下载测试运行。
  二、如何测试运行

以下是目录结构,
IDE:consul 注册中心
kayak.client: 网关
kayak.server:微服务
apache-skywalking-apm：skywalking链路跟踪

 
 以上是目录结构， 不必要进入管理界面设置网络组件，启动后自带端口96的ws协议主机，只要打开video文件夹，里面有两个语音通话的html测试文件，在同一一个局域网只要输入对方的name就可以进行语音通话

 打开界面如图

 
三、基于surging如何开发

以上是没有开发环境的进行下载进行下载测试，那么正在使用surging 的如何开发此功能呢？
1. 创建服务接口，继承于IServiceKey

1. [ServiceBundle("Device/{Service}")]
2. public  interface IChatService : IServiceKey
3. {
4. }

复制代码

2. 创建中间服务，继承于WSBehavior, IChatService

1.   internal class ChatService : WSBehavior, IChatService
2.   {
3.       private static readonly ConcurrentDictionary<string, string> _users = new ConcurrentDictionary<string, string>();
4.       private static readonly ConcurrentDictionary<string, string> _clients = new ConcurrentDictionary<string, string>();
6.       protected override void OnOpen()
7.       {
8.          var _name = Context.QueryString["name"];
9.           if (!string.IsNullOrEmpty(_name))
10.           {
11.               _clients[ID] = _name;
12.               _users[_name] = ID;
13.           }
14.       }
16.       protected override void OnError( WebSocketCore.ErrorEventArgs e)
17.       {
18.         var msg = e.Message;
19.       }
21.       protected override void OnMessage(MessageEventArgs e)
22.       {
23.           if (_clients.ContainsKey(ID))
24.           {
26.               var message = JsonConvert.DeserializeObject<Dictionary<string, object>>(e.Data);
27.               //消息类型
28.              message.TryGetValue("type",out object @type);
29.               message.TryGetValue("toUser", out object toUser);
30.               message.TryGetValue("fromUser", out object fromUser);
31.               message.TryGetValue("msg", out object msg);
32.               message.TryGetValue("sdp", out object sdp);
33.               message.TryGetValue("iceCandidate", out object iceCandidate);
34.               
36.               Dictionary<String, Object> result = new Dictionary<String, Object>();
37.               result.Add("type", @type);
39.               //呼叫的用户不在线
40.               if (!_users.ContainsKey(toUser?.ToString()))
41.               {
42.                   result["type"]= "call_back";
43.                   result.Add("fromUser", "系统消息");
44.                   result.Add("msg", "Sorry，呼叫的用户不在线！");
46.                   this.Client().SendTo(JsonConvert.SerializeObject(result), ID);
47.                   return;
48.               }
50.               //对方挂断
51.               if ("hangup".Equals(@type))
52.               {
53.                   result.Add("fromUser", fromUser);
54.                   result.Add("msg", "对方挂断！");
55.               }
57.               //视频通话请求
58.               if ("call_start".Equals(@type))
59.               {
60.                   result.Add("fromUser", fromUser);
61.                   result.Add("msg", "1");
62.               }
64.               //视频通话请求回应
65.               if ("call_back".Equals(type))
66.               {
67.                   result.Add("fromUser", toUser);
68.                   result.Add("msg", msg);
69.               }
71.               //offer
72.               if ("offer".Equals(type))
73.               {
74.                   result.Add("fromUser", toUser);
75.                   result.Add("sdp", sdp);
76.               }
78.               //answer
79.               if ("answer".Equals(type))
80.               {
81.                   result.Add("fromUser", toUser);
82.                   result.Add("sdp", sdp);
83.               }
85.               //ice
86.               if ("_ice".Equals(type))
87.               {
88.                   result.Add("fromUser", toUser);
89.                   result.Add("iceCandidate", iceCandidate);
90.               }
92.               this.Client().SendTo(JsonConvert.SerializeObject(result), _users.GetValueOrDefault(toUser?.ToString()));
93.           }
94.       }
96.       protected override void OnClose(CloseEventArgs e)
97.       {
98.          if( _clients.TryRemove(ID, out string name))
99.           _users.TryRemove (name, out string value);
100.       }
102.   }

复制代码

3.设置surgingSettings的WSPort端口设置，默认96
以上就是利用websocket协议中转消息，下面是页面如何编号，代码如下：

1. <!DOCTYPE>
4. <html xmlns:th="http://www.thymeleaf.org">
5. <head>
6.     <meta charset="UTF-8">
7.     <title>WebRTC + WebSocket</title>
8.     <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
9.    
10. </head>
11. <body>
12.    
13.         <video id="remoteVideo" playsinline autoplay></video>
14.         <video id="localVideo" playsinline autoplay muted></video>
16.         
17.             <input id="toUser" placeholder="输入在线好友账号"/><br/>
18.             <button id="call">视频通话</button>
19.             <button id="hangup">挂断</button>
20.         
21.    
22. </body>
26. </html>

复制代码

以上是页面的代码，如必要添加其它账号测试只要更改username ，或者ws地点也可以更改标志红色的区域。
 
三、总结

本人正在开发平台，如有疑问可以接洽作者，QQ群：744677125

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