WebRTC 文件传输 / 共享桌面

背景介绍: WebRTC 文件传输在 P2P、成本节省、安全性等方面具有显著优势,特别适合实时性要求高且数据保密性要求强的场景,在公司局域网中传输是一个很好的方式,但其在处理大文件、多用户连接以及在复杂网络环境下的可靠性方面存在不足。

优缺点

WebRTC优点缺点
P2P,不走中继服务器,减少了延迟浏览器可处理的文件数量和大小有限,对于大文件传输需要分块处理。
带宽相对较便宜同时连接两个以上的用户不切实际
默认对所有通信进行加密自建存储,存储节点的硬件可能会出现故障,运维成本较高
WebRTC支持多种浏览器和设备高质量的文件传输,可能会消耗大量的带宽
不需要固定的IP地址性能受网络质量影响较大
无需复杂的服务器配置

展示结果

文字 image.png

文件 image.png

开发目的及功能点

  1. 基于 WebRTC 局域网内 P2P 实现文件快传
  2. 用户登录及发生信令交换
image.png
  1. 发文件 --(分片+存储) --> 接收下载
image.png
  1. 新用户 预览历史记录下载文件 --> 发起请求 --> 接收通知 --> 接收下载
image.png
  1. 共享桌面 --> 浏览器启动桌面捕获 --> 转帧 --> 传输 --> 解码渲染

文件传输 - 关键代码部分

信令交换(socket.io代替过程)

服务端代码

image.png

前端代码

image.png

图例

image.png

文件接发 + 存储indexDB(省略)

服务端代码

image.png

前端代码

image.png

image.png

桌面分析 - 关键代码部分

展示结果

image.png

信令交换 (同上)

前端代码 image.png

结语

虽然完成了这两个Demo,但是在同一局域网内P2P文件只有 16kb,速率上不去,共享桌面也是只有300KB上传,把能配置的都配置了,当然JYM,如果有其他的配置方式也可以请教一下,这个项目最后还是给毙了,当作自己的一个练手demo吧。