论坛 › .net › 基于surging 如何利用peerjs进行语音视频通话

梁泳 发表于 2024-8-30 10:16:45

基于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

publicinterface IChatService : IServiceKey
{
}2. 创建中间服务，继承于WSBehavior, IChatService
internal class ChatService : WSBehavior, IChatService
{
      private static readonly ConcurrentDictionary<string, string> _users = new ConcurrentDictionary<string, string>();
      private static readonly ConcurrentDictionary<string, string> _clients = new ConcurrentDictionary<string, string>();

      protected override void OnOpen()
      {
         var _name = Context.QueryString["name"];
          if (!string.IsNullOrEmpty(_name))
          {
            _clients = _name;
            _users = ID;
          }
      }

      protected override void OnError( WebSocketCore.ErrorEventArgs e)
      {
      var msg = e.Message;
      }

      protected override void OnMessage(MessageEventArgs e)
      {
          if (_clients.ContainsKey(ID))
          {

            var message = JsonConvert.DeserializeObject<Dictionary<string, object>>(e.Data);
            //消息类型
             message.TryGetValue("type",out object @type);
            message.TryGetValue("toUser", out object toUser);
            message.TryGetValue("fromUser", out object fromUser);
            message.TryGetValue("msg", out object msg);
            message.TryGetValue("sdp", out object sdp);
            message.TryGetValue("iceCandidate", out object iceCandidate);
            

            Dictionary<String, Object> result = new Dictionary<String, Object>();
            result.Add("type", @type);

            //呼叫的用户不在线
            if (!_users.ContainsKey(toUser?.ToString()))
            {
                  result["type"]= "call_back";
                  result.Add("fromUser", "系统消息");
                  result.Add("msg", "Sorry，呼叫的用户不在线！");

                  this.Client().SendTo(JsonConvert.SerializeObject(result), ID);
                  return;
            }

            //对方挂断
            if ("hangup".Equals(@type))
            {
                  result.Add("fromUser", fromUser);
                  result.Add("msg", "对方挂断！");
            }

            //视频通话请求
            if ("call_start".Equals(@type))
            {
                  result.Add("fromUser", fromUser);
                  result.Add("msg", "1");
            }

            //视频通话请求回应
            if ("call_back".Equals(type))
            {
                  result.Add("fromUser", toUser);
                  result.Add("msg", msg);
            }

            //offer
            if ("offer".Equals(type))
            {
                  result.Add("fromUser", toUser);
                  result.Add("sdp", sdp);
            }

            //answer
            if ("answer".Equals(type))
            {
                  result.Add("fromUser", toUser);
                  result.Add("sdp", sdp);
            }

            //ice
            if ("_ice".Equals(type))
            {
                  result.Add("fromUser", toUser);
                  result.Add("iceCandidate", iceCandidate);
            }

            this.Client().SendTo(JsonConvert.SerializeObject(result), _users.GetValueOrDefault(toUser?.ToString()));
          }
      }

      protected override void OnClose(CloseEventArgs e)
      {
         if( _clients.TryRemove(ID, out string name))
          _users.TryRemove (name, out string value);
      }

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


<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>WebRTC + WebSocket</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
   
</head>
<body>
   
      <video id="remoteVideo" playsinline autoplay></video>
      <video id="localVideo" playsinline autoplay muted></video>

      
            <input id="toUser" placeholder="输入在线好友账号"/><br/>
            <button id="call">视频通话</button>
            <button id="hangup">挂断</button>
      
   
</body>



</html>以上是页面的代码，如需要添加其它账号测试只要更改username ，或者ws地址也可以更改标记红色的区域。
 
三、总结

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

来源:https://www.cnblogs.com/fanliang11/p/18388027
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！

查看完整版本: 基于surging 如何利用peerjs进行语音视频通话