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

1.什么是 WebRTC

借助 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.什么是 FilePizza

filepizza 用于在浏览器中进行点对点文件传输。

 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 start

FilePizza 是一个同构的 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