大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发,您的支持是我不断创作的动力。

借助 WebRTC,开发者可以为应用添加基于开放标准运行的实时通信功能,支持在对等设备之间发送视频、语音和通用数据,使开发者能够构建强大的语音和视频通信解决方案。
Method of allowing two users to communicate directly, browser to browser using the RTCPeerConnection API.
WebRTC 适用于所有主流浏览器以及所有主要平台的原生客户端。WebRTC 采用的技术是开放网络标准,以常规 JavaScript API 的形式在所有主流浏览器中提供。对于原生客户端可以使用具备相同功能的库。WebRTC 项目属于开源项目,受 Apple、Google、Microsoft 和 Mozilla 等公司支持。

WebRTC 适用于许多不同的应用场景,从使用摄像头或麦克风的基本 Web 应用,到更高级的视频通话应用和屏幕共享,不一而足。WebRTC 应用通常会执行常见的应用流程,比如:访问媒体设备、打开对等连接、发现对等设备并开始流式传输。
2.什么是 FilePizzafilepizza 用于在浏览器中进行点对点文件传输。
Peer-to-peer file transfers in your browser使用 WebRTC,FilePizza 消除了其他基于 Web 的文件共享服务所需的初始上传步骤。 当发件人初始化传输时,会收到一个可以分发给收件人的 “tempalink”。 访问此链接后,收件人的浏览器会直接连接到发件人的浏览器,并可能开始下载所选文件。 由于数据永远不会存储在中间服务器中,因此传输快速、私密且安全。

FilePizza 的托管实例可在 file.pizza 上找到。
目前 FilePizza 在 Github 上通过 MIT 协议开源,有超过 4.2k 的 star,是一个值得关注的前端开源项目。
3.Docker 环境部署 FilePizza部署 FilePizza 的推荐方法是作为 Docker 容器。
WebRTC 仅通过 HTTPS 运行,因此必须从 CA(例如 Let's Encrypt)获取签名的 HTTPS 密钥 / 证书,或者生成自己的自签名并信任。 然后,运行 FilePizza(使用 HTTPS 终止):
$ docker run \ -p 8080:8080 -e PORT=8080 \ -e HTTPS_KEY=/config/server.key \ -e HTTPS_CERT=/config/server.crt \ -v mylocalpath:/config \ -it kern/filepizza:master开发者还可以通过环境变量 ICE_SERVERS 传递数组的 JSON 编码来指定自己的 ICE STUN/TURN 服务器,以便在 NAT 后面实现更好的连接。 或者,如果想使用 Twilio 的 STUN/TURN 服务,可以分别使用 TWILIO_SID 和 TWILIO_TOKEN 环境变量指定 SID 和令牌。
可以使用 WEBTORRENT_TRACKERS 环境变量(以逗号分隔)指定您自己的 Webtorrent 跟踪器。如果想使用 Google Analytics,可以使用 GA_ACCESS_TOKEN="UA-00000000-1" 环境变量指定 UA 代码。
4.本地开发 FilePizza$ git clone https://github.com/kern/filepizza.git$ npm install$ npm run-script build$ npm startFilePizza 是一个同构的 React 应用程序,使用 Flux 应用程序架构, ES6 特性被大量使用并使用 Babel 进行编译。 视图在服务器上渲染,存储数据被序列化并发送给客户端,然后客户端从服务器中断的地方继续。
Flux 是一种强调应用程序内单向数据流的架构模式,Facebook 通过该架构解决了大规模前端应用程序中状态管理的复杂性。
客户端和服务器 JavaScript 文件都可以在 lib/ 中找到。 lib/server.js 和 lib/client.js 分别是服务器和客户端入口点。 lib/components/、lib/stores/ 和 lib/actions/ 包含相应的 Flux 模块,使用 alt 实现。 lib/routes.js 使用 react-router 作为同构路由文件。
客户端 JavaScript 和 CSS 使用 webpack 编译,可在 /app.js 中获取。
参考资料https://file.pizza/
https://github.com/kern/filepizza
https://webrtc.org/?hl=zh-cn
https://morioh.com/a/87eb230c730c/filepizza-peer-to-peer-file-transfers-in-your-browser
https://www.tonmind.com/blog/webrtc-web-real-time-communication_b21