『前端日记』—— 基于WebRTC的浏览器跨端传输

1.写在前面

前阵子小伙伴微信给我发了一链接，说让我在电脑上打开看看。

“我电脑没装微信” “内容很丰富” “等下，我账号貌似登不上网页版微信” “你去浏览器上输，我给你念” “。。。”

不知道你们有没有过这种苦恼，于是老夫在干饭之余写了一个web应用，在不安装其它软件的情况下，使用浏览器实现跨端数据的传输。 👉 ox.bruceau.com

2.使用方法

首先在PC浏览器打开ox.bruceau.com

这是是老夫设计的主页，也是唯一的一个页面 = =。他主要有两个功能：

• 点击左侧的电脑复制到手机会弹出一个二维码，用手机扫描二维码就会出现连接提示，当连接成功后会在二维码上出现跳动的提示，这个时候可以在电脑上复制一段文字或图片，再跑到页面中按Control+V就会将电脑剪切板中的内容发送到手机。

• 点击又侧的手机复制到电脑会弹出一个二维码，扫码建立连接过程同上。连接成功后可以在手机的输入框内粘贴或输入任意文字，也可以选择图片发送到电脑，发送成功后会自动将发送的内容塞入电脑剪切板中，然后我们可以在电脑手动上进行粘贴使用这些内容。我还增加了图片识别功能，可以将手机中的图片发送到电脑，然后在电脑上按住左键拖拽选择需要识别的文字。 这俩功能其实从建立连接到数据传输都是一模一样的方式。至于为什么要分成两个功能呢？没错就是为了骗点击量。

第一次进入页面后还可以看到我精心准备的新手引导，或者你还可以看图文指南：

• 电脑复制到手机

• 手机复制到电脑

3.WebRTC在前端

WebRTC连接是文章应用的核心，它是由谷歌公司在2011年发布开源的用来建立P2P实时音视频传输的一套标准，包含了硬件、音视频驱动、各类数据传输协议、STUN/TURN 服务器以及SDP等等。

如今在现代Web浏览器中已经可以轻松通过RTCPeerConnection，MediaDevice等API建立WebRTC连接来进行音视频流或其它数据buffer的单点传输。如本文建立P2P传输的主要手段都是由RTCPeerConnection接口提供，下面我会简单介绍一下WebRTC建立连接进行数据传输的思路和原理。

4.WebRTC与WebSocket

提起Web间的数据通信就会想到WebSocket，稳定又安全。但基于TCP的WebSocket，为了保证传输的可靠性，加了一堆包头不说，发完消息还要对个暗号，对不上就要重发。当然最主要的问题是以老夫目前一个月1500块伙食费的财力，租的服务器带宽小就很慢，可能传几张大图片可能就欠费了。

相比之下用WebRTC建立起一的P2P单点通信，不仅传输速率快，而且p2p建立连接之后是不走服务器流量的，可谓是相当划算。当然，缺点就是在国内的网络环境下能实现NAT穿透成功的概率大概只有百分之50左右，一旦穿透失败webrtc会切换为中继模式，用指定的服务器做流量中转，保证数据传输。

5.Dsp与信令服务器

【图片来自网络】

首先我们了解一下webRtc建立p2p的过程，如上图所示：

1. A设备创建Offer(sdp)，并发送给B设备。

2. B设备收到Offer，设置为远程remote，同时创建Answer(sdp)，并发送给A设备。