WebRTC vs WebSocket？WebRTC + WebSocket？ _WebRTC

文章插图
WebRTC vs WebSocket
1.什么是WebRTC？WebRTC 是一组 JAVAScript API ，可以在两个浏览器之间建立点对点连接，实现音频和视频等数据的传输，也可以用它创建有语音/视频通话功能的应用程序。
WebRTC 的特别之处是：一旦建立了连接，就可以直接在浏览器之间实时传输数据，不需要借助服务器，因此降低了延迟，所以用户都喜欢用 webRTC 直接传输音视频。

文章插图

在WebRTC诞生之前，开发实时音视频应用的成本非常高，需要考虑的技术问题很多，如音视频的编解码，数据传输延时、丢包、网络抖动、回音处理和消除等，如果要兼容浏览器端的实时音视频通信，还需要额外安装插件。
可喜的是，现在几乎所有主流浏览器都支持 WebRTC 。此外，还有针对不同平台（例如 IOS 或 Android）的 WebRTC SDK 。下面是WebRTC的浏览器支持情况：

文章插图
WebRTC的浏览器支持情况
WebRTC 由以下关键组成部分：

RTCPeerConnection：允许连接到远程对等点，保持和监视连接，在连接完成后关闭。可通过如下方法快速创建RTCPeerConnection：

new RTCPeerConnection()new RTCPeerConnection(configuration)

RTCDataChannel：提供双向网络通信通道，允许对等方传输任意数据。通过RTCPeerConnection示例对象的createDataChannel方法快速创建RTCDataChannel对象。

const pc = new RTCPeerConnection();const dc = pc.createDataChannel("my channel");dc.onmessage = function (event) {console.log("received: " + event.data);};dc.onopen = function () {console.log("datachannel open");};dc.onclose = function () {console.log("datachannel close");};

MediaStream：旨在让您从本地输入设备（如相机和麦克风）访问媒体流。它用作管理数据流上的操作的一种方式，例如记录、发送、调整大小和显示流的内容。通过如下构造函数快速创建MediaStream实例。

const newStream = new MediaStream();const newStream = new MediaStream(stream);const newStream = new MediaStream(tracks[]);

2.什么是WebSocket？WebSocket 是一种实时技术，可通过持久的单套接字socket连接在 Web 客户端和 Web 服务器之间实现全双工、双向通信。
WebSocket 连接以 HTTP 请求/响应握手开始。如果此初始握手成功，则客户端和服务器已同意使用为 HTTP 请求建立的现有 TCP 连接作为 WebSocket 连接。只要需要，这个连接就会一直保持活跃状态，允许服务器和客户端全双工的发送数据。

文章插图
什么是WebSocket？
WebSocket 包括两个核心组成模块：

WebSocket 协议： WebSocket 协议于 2011 年 12 月通过 RFC 6455 标准化，支持通过 Web 在 WebSocket 客户端和 WebSocket 服务器之间进行实时通信。它支持二进制数据和文本字符串的传输。
WebSocket API：允许您管理 WebSocket 连接、发送和接收消息以及侦听 WebSocket 服务器触发的事件。

几乎所有现代网络浏览器都支持 WebSocket API ，如下图所示：