经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 程序设计 » C# » 查看文章
C# WebApi+Webrtc局域网音视频通话实例
来源：jb51　　时间：2021/7/26 14:07:29　　对本文有异议

C# WebApi+Webrtc 局域网音视频通话示例，供大家参考，具体内容如下

本示例通过IIS部署webapi，利用websocket进行webrtc消息交换，通过Chrome浏览器访问，可实现局域网内webrtc 音视频通话。

通过Chrome浏览器打开localhost/live.html本地网址，打开两个本地网，点击任意页面连接按钮即联通。

本示例未实现NAT穿透处理，互联网无法联通，如需NAT穿透请自行查阅相关资料。

关于webrtc、webapi相关技术说明请自行查阅相关资料，本文不做赘述说明。

运行效果如下图：

webapi端Handler1.ashx代码如下：

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Net.WebSockets;
  5. using System.Text;
  6. using System.Threading;
  7. using System.Threading.Tasks;
  8. using System.Web;
  9. using System.Web.WebSockets;
  10.  
  11. namespace webrtclan
  12. {
  13.     /// <summary>
  14.     /// 离线消息
  15.     /// </summary>
  16.     public class MessageInfo
  17.     {
  18.         public MessageInfo(DateTime _MsgTime, ArraySegment<byte> _MsgContent)
  19.         {
  20.             MsgTime = _MsgTime;
  21.             MsgContent = _MsgContent;
  22.         }
  23.         public DateTime MsgTime { get; set; }
  24.         public ArraySegment<byte> MsgContent { get; set; }
  25.         
  26.     }
  27.  
  28.  
  29.     /// <summary>
  30.     /// Handler1 的摘要说明
  31.     /// </summary>
  32.     public class Handler1 : IHttpHandler
  33.     {
  34.         private static Dictionary<string, WebSocket> CONNECT_POOL = new Dictionary<string, WebSocket>();//用户连接池
  35.         private static Dictionary<string, List<MessageInfo>> MESSAGE_POOL = new Dictionary<string, List<MessageInfo>>();//离线消息池
  36.        
  37.  
  38.         public void ProcessRequest(HttpContext context)
  39.         {
  40.             
  41.             if (context.IsWebSocketRequest)
  42.             {
  43.                 context.Response.ContentType = "application/json";
  44.                 context.Response.Charset = "utf-8";
  45.                 context.AcceptWebSocketRequest(ProcessMsg);
  46.             }
  47.         }
  48.        
  49.  
  50.         private async Task ProcessMsg(AspNetWebSocketContext context)
  51.         {
  52.             WebSocket socket = context.WebSocket;
  53.             string user = context.QueryString["user"].ToString();
  54.             
  55.             try
  56.             {
  57.                 #region 用户添加连接池
  58.                 //第一次open时，添加到连接池中
  59.                 if (!CONNECT_POOL.ContainsKey(user))
  60.                 {
  61.                     CONNECT_POOL.Add(user, socket);//不存在，添加
  62.                 }
  63.                 else
  64.                 {
  65.                     if (socket != CONNECT_POOL[user])//当前对象不一致，更新
  66.                     {
  67.                         CONNECT_POOL[user] = socket;
  68.                     }
  69.                 }
  70.                 #endregion
  71.  
  72.                 //#region 连线成功
  73.                 //for (int cp = 0; cp < CONNECT_POOL.Count; cp++)
  74.                 //{
  75.                 //    if (CONNECT_POOL.ElementAt(cp).Key != user)
  76.                 //    {
  77.                 //        string joinedmsg = "{\"FROM\":\"" + user + "\",\"event\":\"joined\"}";
  78.                 //        ArraySegment<byte> joinedmsgbuffer = new ArraySegment<byte>(Encoding.UTF8.GetBytes(joinedmsg));
  79.                 //        WebSocket destSocket = CONNECT_POOL.ElementAt(cp).Value;//目的客户端
  80.                 //        await destSocket.SendAsync(joinedmsgbuffer, WebSocketMessageType.Text, true, CancellationToken.None);
  81.                 //    }
  82.                 //}
  83.                 //#endregion
  84.  
  85.                 #region 离线消息处理
  86.                 if (MESSAGE_POOL.ContainsKey(user))
  87.                 {
  88.                     List<MessageInfo> msgs = MESSAGE_POOL[user];
  89.                     foreach (MessageInfo item in msgs)
  90.                     {
  91.                         await socket.SendAsync(item.MsgContent, WebSocketMessageType.Text, true, CancellationToken.None);
  92.                     }
  93.                     MESSAGE_POOL.Remove(user);//移除离线消息
  94.                 }
  95.                 #endregion
  96.                 
  97.                 while (true)
  98.                 {
  99.                     if (socket.State == WebSocketState.Open)
  100.                     {
  101.                         ArraySegment<byte> wholemessage= new ArraySegment<byte>(new byte[10240]);
  102.  
  103.                         
  104.                         int i = 0;
  105.  
  106.                        
  107.                         WebSocketReceiveResult dresult;
  108.                         do
  109.                         { 
  110.                             //因为websocket每一次发送的数据会被tcp分包
  111.                             //所以必须判断接收到的消息是否完整
  112.                             //不完整就要继续接收并拼接数据包
  113.                             ArraySegment<byte> buffer = new ArraySegment<byte>(new byte[2048]);
  114.                             dresult = await socket.ReceiveAsync(buffer, CancellationToken.None);
  115.                             string message1 = Encoding.UTF8.GetString(buffer.Array);                            
  116.                             buffer.Array.CopyTo(wholemessage.Array,i);
  117.                             i += 2048;
  118.                         } while (false == dresult.EndOfMessage);                       
  119.  
  120.                         //string message = Encoding.UTF8.GetString(wholemessage.Array);
  121.                         //message = message.Replace("\0", "").Trim();
  122.                         //JavaScriptSerializer serializer = new JavaScriptSerializer();
  123.                         //Dictionary<string, object> json = (Dictionary<string, object>)serializer.DeserializeObject(message);
  124.                         //string target = (string)json.ElementAt(1).Value;
  125.  
  126.                         #region 消息处理（字符截取、消息转发）
  127.                         try
  128.                         {
  129.                             #region 关闭Socket处理，删除连接池
  130.                             if (socket.State != WebSocketState.Open)//连接关闭
  131.                             {
  132.                                 if (CONNECT_POOL.ContainsKey(user)) CONNECT_POOL.Remove(user);//删除连接池
  133.                                 break;
  134.                             }
  135.                             #endregion
  136.                             
  137.                             for (int cp = 0; cp < CONNECT_POOL.Count; cp++)
  138.                             {
  139.                                  //if (CONNECT_POOL.ElementAt(cp).Key!=target)
  140.                                  //   {
  141.                                         WebSocket destSocket = CONNECT_POOL.ElementAt(cp).Value;//目的客户端
  142.                                         await destSocket.SendAsync(wholemessage, WebSocketMessageType.Text, true, CancellationToken.None);
  143.                                  //  }
  144.                              }
  145.                            
  146.  
  147.                             //if (CONNECT_POOL.ContainsKey(descUser))//判断客户端是否在线
  148.                             //{
  149.                             //    WebSocket destSocket = CONNECT_POOL[descUser];//目的客户端
  150.                             //    if (destSocket != null && destSocket.State == WebSocketState.Open)
  151.                             //        await destSocket.SendAsync(buffer, WebSocketMessageType.Text, true, CancellationToken.None);
  152.                             //}
  153.                             //else
  154.                             //{
  155.                             //    _ = Task.Run(() =>
  156.                             //      {
  157.                             //          if (!MESSAGE_POOL.ContainsKey(descUser))//将用户添加至离线消息池中
  158.                             //            MESSAGE_POOL.Add(descUser, new List<MessageInfo>());
  159.                             //          MESSAGE_POOL[descUser].Add(new MessageInfo(DateTime.Now, buffer));//添加离线消息
  160.                             //    });
  161.                             //}
  162.                         }
  163.                         catch (Exception exs)
  164.                         {
  165.                             //消息转发异常处理，本次消息忽略 继续监听接下来的消息
  166.                         }
  167.                         #endregion
  168.                     }
  169.                     else
  170.                     {
  171.                         if (CONNECT_POOL.ContainsKey(user)) CONNECT_POOL.Remove(user);//删除连接池                        
  172.                         break;
  173.                     }
  174.                 }//while end
  175.             }
  176.             catch (Exception ex)
  177.             {
  178.                 //整体异常处理
  179.                 if (CONNECT_POOL.ContainsKey(user)) CONNECT_POOL.Remove(user);
  180.                 
  181.             }
  182.         }
  183.  
  184.     
  185.  
  186.         public bool IsReusable
  187.         {
  188.             get
  189.             {
  190.                 return false;
  191.             }
  192.         }
  193.  
  194.  
  195.     }
  196. }

live.html客户端代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>webrtc</title>
  8.     <style>
  9.         #yours {
  10.             width: 200px;
  11.             position: absolute;
  12.             top: 50px;
  13.             left: 100px;
  14.         }
  15.         #theirs {
  16.             width: 600px;
  17.             position: absolute;
  18.             top: 50px;
  19.             left: 400px;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <button onclick="createOffer()">建立连接</button>
  25.     <video id="yours" autoplay controls="controls" ></video>
  26.     <video id="theirs" autoplay controls="controls"></video>
  27.  
  28. </body>
  29.  
  30. <script src="webrtc.js"></script>
  31.  
  32. </html>

webrtc.js脚本代码如下：

  1. var websocket;
  2.  
  3. function randomNum(minNum, maxNum) {
  4.     switch (arguments.length) {
  5.         case 1:
  6.             return parseInt(Math.random() * minNum + 1, 10);
  7.             break;
  8.         case 2:
  9.             return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
  10.             break;
  11.         default:
  12.             return 0;
  13.             break;
  14.     }
  15. }
  16. const userid = 'user' + randomNum(0, 100000);
  17.  
  18. function hasUserMedia() {
  19.     navigator.getUserMedia = navigator.getUserMedia || navigator.msGetUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
  20.     return !!navigator.getUserMedia;
  21. }
  22. function hasRTCPeerConnection() {
  23.     window.RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection || window.msRTCPeerConnection;
  24.     return !!window.RTCPeerConnection;
  25. }
  26.  
  27. var yourVideo = document.getElementById("yours");
  28. var theirVideo = document.getElementById("theirs");
  29. var Connection;
  30.  
  31.  
  32. function startPeerConnection() {
  33.     //return;
  34.     var config = {
  35.         'iceServers': [
  36.             //{ 'urls': 'stun:stun.xten.com:3478' },
  37.             //{ 'urls': 'stun:stun.voxgratia.org:3478' },
  38.  
  39.             //{ 'url': 'stun:stun.l.google.com:19302' }
  40.         ]
  41.     };
  42.     config = {
  43.         iceServers: [
  44.             //{ urls: 'stun:stun.l.google.com:19302' },
  45.             //{ urls: 'stun:global.stun.twilio.com:3478?transport=udp' }
  46.         ]
  47.         //sdpSemantics: 'unified-plan'
  48.     };
  49.     // {
  50.     //     "iceServers": [{
  51.     //         "url": "stun:stun.1.google.com:19302"
  52.     //     }]
  53.     // };
  54.     Connection = new RTCPeerConnection(config);
  55.     Connection.onicecandidate = function (e) {
  56.         console.log('onicecandidate');
  57.         if (e.candidate) {
  58.             websocket.send(JSON.stringify({
  59.                 "userid": userid,
  60.                 "event": "_ice_candidate",
  61.                 "data": {
  62.                     "candidate": e.candidate
  63.                 }
  64.             }));
  65.         }
  66.     };
  67.     Connection.onaddstream = function (e) {
  68.         console.log('onaddstream');
  69.         //theirVideo.src = window.URL.createObjectURL(e.stream);
  70.         theirVideo.srcObject = e.stream;
  71.     };
  72.     Connection.onclose = function (e) {
  73.         console.log('RTCPeerConnection close'+e);
  74.     };
  75. }
  76.  
  77. createSocket();
  78. startPeerConnection();
  79.  
  80. if (hasUserMedia()) {
  81.     navigator.getUserMedia({ video: true, audio: true },
  82.         stream => {
  83.             yourVideo.srcObject = stream;
  84.             window.stream = stream;
  85.             yourVideo.muted = true;
  86.             Connection.addStream(stream)
  87.         },
  88.         err => {
  89.             console.log(err);
  90.         })
  91. }
  92.  
  93.  
  94. function createOffer() {
  95.     //发送offer和answer的函数，发送本地session描述
  96.     Connection.createOffer().then(offer => {
  97.         Connection.setLocalDescription(offer);
  98.         websocket.send(JSON.stringify({            
  99.             "userid": userid,
  100.             "event": "offer",
  101.             "data": {
  102.                 "sdp": offer
  103.             }
  104.         }));
  105.     });
  106. }
  107.  
  108.  
  109. function createSocket() {
  110.     //websocket = null;
  111.     websocket = new WebSocket('ws://localhost:80/Handler1.ashx?user='+userid);//('wss://www.ecoblog.online/wss');
  112.     eventBind();
  113. };
  114.  
  115. function eventBind() {
  116.     //连接成功
  117.     websocket.onopen = function (e) {
  118.         console.log('open:' + e);
  119.     };
  120.     //server端请求关闭
  121.     websocket.onclose = function (e) {
  122.         console.log('close:' + e);
  123.     };
  124.     //error
  125.     websocket.onerror = function (e) {
  126.         console.log('error:' + e.data);
  127.     };
  128.     //收到消息
  129.     websocket.onmessage = (event) => {
  130.         if (event.data == "new user") {
  131.             location.reload();
  132.         } else {
  133.             var js = event.data.replace(/[\u0000-\u0019]+/g, ""); 
  134.             var json = JSON.parse(js);
  135.             
  136.             if (json.userid != userid) {
  137.                 //如果是一个ICE的候选，则将其加入到PeerConnection中，否则设定对方的session描述为传递过来的描述
  138.                 if (json.event === "_ice_candidate" && json.data.candidate) {
  139.                     Connection.addIceCandidate(new RTCIceCandidate(json.data.candidate));
  140.                 }
  141.                 else if (json.event === 'offer') {
  142.                     Connection.setRemoteDescription(json.data.sdp);
  143.                     Connection.createAnswer().then(answer => {
  144.                         Connection.setLocalDescription(answer);
  145.                         //console.log(window.stream)
  146.                         websocket.send(JSON.stringify({                            
  147.                             "userid": userid,
  148.                             "event": "answer",
  149.                             "data": {
  150.                                 "sdp": answer
  151.                             }
  152.                         }));
  153.                     })
  154.                 }
  155.                 else if (json.event === 'answer') {
  156.                     Connection.setRemoteDescription(json.data.sdp);
  157.                     //console.log(window.stream)
  158.  
  159.                 }
  160.             }
  161.         }
  162.     };
  163. }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持w3xue。

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

C#热门文章

  • NPOI的Excel的读取和写入
  • 事务在c#中的使用
  • 基于欧姆龙PLC#FinsTcp协议上位机通讯(二)-C#通讯模块开发
  • C# 当前 .NET SDK 不支持将 .NET Core 2.1 设置为目标。请将 .NET Core 2.0 或更低版本设置为目标，或使用支持 .NET Core 2.1 的 .NET SDK 版本。
  • C#读写Excel的几种方法
  • C#NPOI操作Excel，实现Excel数据导入导出（支持多个sheet）
  • c#中token的使用方法实例
  • OrderBy和OrderByDescending排序
  • C#中的modbus&nbsp;Tcp协议的数据抓取和使用解析
  • C#Aspose操作Word &amp; Excel简版（后会研究补充更多功能）

    • C#推荐文章

  • .NET 9 优化，抢先体验 C# 13 新特性
  • 使用C#爬取快手作者主页，并下载视频/图集(附源码及软件下载链接)
  • 聊一聊 C# 中让人惶恐的 Bitmap
  • C#/.NET/.NET Core技术前沿周刊 | 第 2 期（2024年8.19-8.25）
  • Elsa V3学习之Flowchart详解（上）
  • C#模拟键盘输入、键状态和监听键盘消息
  • 可以调用Null的实例方法吗？
  • SemanticKernel/C#：实现接口，接入本地嵌入模型
  • C#.Net筑基-解密委托与事件
  • C#/.NET/.NET Core优秀项目和框架2024年7月简报

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号