WebRTC实现1V1通话与文件传输【保姆级源码教程】

1 WebRTC是什么

顾名思义，WebRTC即浏览器中的实时通信，如实时音视频传输、P2P数据传输、网络流媒体传输等。

WebRTC是一套技术栈组合，通过观察其架构图可以发现，其涉及到的技术栈包括以下方面：

1. 实时通讯协议：WebRTC使用了一系列的实时通讯协议，包括RTP（实时传输协议）、SRTP（安全实时传输协议）等，用于在网络上传输音频、视频和数据流。
2. 媒体捕获：WebRTC可以通过getUserMedia API来获取媒体设备（比如摄像头、麦克风）的视频和音频流。
3. 音视频编解码：WebRTC需要对获取的音频和视频数据进行编解码，以便在网络上传输和显示。WebRTC通常使用VP8、VP9或H.264等视频编解码格式，Opus或AAC等音频编解码格式。
4. 网络传输：WebRTC使用UDP、TCP等协议在客户端之间传输实时音视频流。它还使用ICE（Interactive Connectivity Establishment）框架来协助客户端在NAT（网络地址转换）背后建立对等连接。
5. 信令：WebRTC不包含信令协议，因此需要使用类似于WebSocket、HTTP、XMPP等协议进行建立连接、传输会话描述等信令操作。
6. 安全：WebRTC通过使用DTLS（Datagram Transport Layer Security）和SRTP来对传输的音视频流进行加密，保障通信的安全性。
7. 智能网络适应：WebRTC还包含了对网络状况的实时监测，以确保在各种网络条件下实现稳定的实时通讯。

2 WebRTC常用API介绍

WebRTC提供了大量的API，你可以通过访问WebRTC API - Web APIs | MDN (mozilla.org)来查看，API的使用在GitHub也有全面的示例WebRTC 示例。这里我只介绍了P2P的音视频对话所涉及的JavaScript API及方法。

1. getUserMedia API： - 方法：navigator.mediaDevices.getUserMedia()- 介绍：getUserMedia API用于从用户的摄像头和麦克风获取媒体流。通过调用该API的方法，可以请求用户授权，并获取音频和视频的本地媒体流用于后续处理和传输。
2. RTCPeerConnection API： - 方法：new RTCPeerConnection(), createOffer(), createAnswer(), setLocalDescription(), setRemoteDescription(), addIceCandidate(),onicecandidate(),ontrack(),addTrack()- 介绍：RTCPeerConnection API用于在浏览器之间创建点对点连接，处理音视频流的传输和通信。通过这些方法，可以创建连接、交换媒体信息、处理ICE候选等，实现音视频通话功能。

只需要两个API和九个方法即可完成P2P音视频通话，是不是很简单，当然这需要你提前掌握通话建立的流程。

3 一对一通话流程

贴一张官方流程图，好吧，看不懂，有些单词翻译过来也不明白在流程图中代表什么意思，比如STUN、TRUN、SDP、NAT、ICE candidate。SDP和NAT不是WebRTC中定义的概念，可能你需要花些时间去找资源了解，其他概念可以从这里Introduction to WebRTC protocols - Web APIs | MDN (mozilla.org)来学习。

1. SDP（Session Description Protocol）：SDP是一种用于描述媒体流参数的协议。在WebRTC中，设备之间通过交换SDP来协商媒体流的设置。SDP描述了媒体流的编解码器、分辨率、传输协议等信息。
2. ICE（Interactive Connectivity Establishment）：ICE是一种用于处理网络连通性和NAT穿越的技术。它允许设备在不同的网络环境中建立直接连接。ICE使用候选项（Candidates）来表示设备的网络地址，通过交换候选项，设备可以找到合适的路径建立连接。
3. STUN（Session Traversal Utilities for NAT）服务器：STUN服务器用于帮助设备发现自己的公共IP地址和端口，以克服NAT限制。设备可以通过向STUN服务器发送请求，获取自己的公共地址，并将其用作候选项。
4. TURN（Traversal Using Relays around NAT）服务器：TURN服务器是作为备选方案的中继服务器。如果设备无法直接建立点对点连接（例如，由于防火墙或限制），它可以通过TURN服务器中继数据流。

上述流程图，其实就做了两件事：

1. 媒体协商：PeerA与PeerB通过交换双方的SDP（会话描述协议），确定媒体类型、媒体格式等。
2. 网络协商：通过交换ICE候选项，确定对方的网络位置。

两个协商都成功以后，就能实现双方的音视频通话了，也就是媒体传输。

协商过程中，因为PeerA与PeerB并不知道彼此位置的存在，PeerA与PeerB不能直接通信，这就是需要中间人来传话，中间人就是信令服务器。

如果你看了关于ICE的介绍，就会发现，这是一种应用在公网的技术，帮助Peer实现自己身份（地址）的确认。事实上，在许多场景中，我们都是基于局域网进行生产开发，也就是每一端都清楚彼此的身份（固定IP），就能知道对方的身份（固定IP），所以ICE的过程是不必要的，可以直接将自己的candidate告诉对方。

关于局域网下P2P通信以及协商流程见下图：

有了如此详尽的流程图，那就实现代码走流程吧。

4 代码以及效果

4.1 实现信令服务器

信令采用的是WebSocket协议实现，服务器采用的是SpringBoot项目创建。

4.2 实现Peer客户端

HTML页面，JavaScript调用WebRTCAPI。

4.3效果

1. 创建媒体，建立连接
2. PeerA加入通话房间
3. PeerB加入通话房间
4. 协商并通话

5 文件传输

WebRTC（Web Real-Time Communications）主要用于浏览器之间的实时音视频通信，但它也支持数据（包括文件）的传输。WebRTC文件传输的实现主要依赖于其P2P（点对点）连接和数据传输的API，特别是RTCDataChannel。

以下是使用WebRTC实现文件传输的基本步骤：

1. 创建RTCPeerConnection：RTCPeerConnection是WebRTC中用于建立和管理P2P连接的API。在你的应用中，你需要为发送方和接收方都创建一个RTCPeerConnection对象。
2. 创建RTCDataChannel：RTCDataChannel是WebRTC中用于在P2P连接上传输任意数据的API，包括文本、文件等。你可以通过RTCPeerConnection对象的createDataChannel方法来创建一个RTCDataChannel对象。
3. 配置数据通道：在创建RTCDataChannel后，你可以配置它的一些参数，如是否可靠（reliable）或是否有序（ordered）。对于文件传输，你可能希望它是一个可靠的数据通道。
4. 发送文件：在发送方，你需要将文件读取为二进制数据（如ArrayBuffer或Blob），然后通过RTCDataChannel的send方法将数据发送出去。你可能需要将大文件分割成多个小块，然后逐个发送，以防止内存溢出或网络问题。
5. 接收文件：在接收方，你需要监听RTCDataChannel的onmessage事件。当接收到数据时，你可以将这些数据保存起来，直到接收到完整的文件。对于分割的文件块，你需要在接收到所有块后，将它们重新组合成一个完整的文件。
6. 错误处理和反馈：在整个文件传输过程中，你可能需要处理各种错误，如网络中断、文件读取错误等。同时，你也可能需要向用户提供一些反馈，如文件传输进度、是否成功等。

需要注意的是，WebRTC文件传输可能需要一些额外的步骤来确保安全性和效率。例如，你可能需要验证接收方的身份，以防止未授权的文件传输。你也可能需要优化你的代码，以处理大文件或网络不稳定的情况。

此外，虽然WebRTC可以实现P2P文件传输，但它并不是专门为文件传输设计的。因此，在处理大文件或大量文件时，你可能需要考虑使用其他更适合的解决方案，如基于HTTP的文件传输或专门的文件传输协议（如FTP）。

上述步骤1、2在通话过程中已经建立，后续只需要创建数据通道，实现收发方法即可。

如果需要源码以及源码手把手教学记得私信我_