您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

WebRTC vs WebSocket?WebRTC + WebSocket?

时间:2023-01-04 11:17:31  来源:今日头条  作者:前端进阶

WebRTC vs WebSocket

1.什么是WebRTC?

WebRTC 是一组 JAVAScript API,可以在两个浏览器之间建立点对点连接, 实现音频和视频等数据的传输,也可以用它创建有语音/视频通话功能的应用程序。

WebRTC 的特别之处是:一旦建立了连接,就可以直接在浏览器之间实时传输数据,不需要借助服务器,因此降低了延迟,所以用户都喜欢用 webRTC 直接传输音视频。

 

在WebRTC诞生之前,开发实时音视频应用的成本非常高,需要考虑的技术问题很多,如音视频的编解码数据传输延时、丢包、网络抖动、回音处理和消除等,如果要兼容浏览器端的实时音视频通信,还需要额外安装插件。

可喜的是,现在几乎所有主流浏览器都支持 WebRTC。 此外,还有针对不同平台(例如 IOSAndroid)的 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,如下图所示:

WebSocket浏览器支持情况

3.WebRTC的优点和缺点

3.1 WebRTC优势

WebRTC的优势主要集中在以下几个方面:

WebRTC的3个主要优势

  • 强大的安全保障: 通过 WebRTC 传输的数据在安全实时传输协议 (SRTP) 的帮助下进行加密和验证。
  • 开源免费: 该项目得到了强大而活跃的社区的支持,同时Apple、google 和 Microsoft 等组织也积极参与。
  • 独立于平台和设备: WebRTC 应用程序可以在任何支持 WebRTC 的浏览器上运行,无论操作系统或设备类型如何。

3.2 WebRTC 缺点

WebRTC的的劣势也很明显,主要集中在以下几个方面:

WebRTC 的3个主要缺点

  • 尽管 WebRTC 是一种点对点技术,您仍然需要管理 Web 服务器并为其付费。 为了使两个对等点相互对话,您需要使用信令服务器来建立、管理和终止 WebRTC 通信会话。 在一对多的 WebRTC 广播场景中,您可能需要一个 WebRTC 媒体服务器来充当媒体中间件。
  • WebRTC 非常占用 CPU,尤其是在处理视频内容和大量用户时。 这使得使用和扩展 WebRTC 应用程序成本高昂且困难重重。
  • WebRTC 很难上手。 您需要探索和掌握大量概念:各种 WebRTC 接口、编解码器和媒体处理、网络地址转换 (NAT) 和防火墙、UDP(WebRTC 使用的主要底层通信协议)等等。

WebRTC的peerjs库可以用于快速实现Peer-to-peer通信!

4.WebSocket的优缺点

4.1 WebSocket 优势

在 WebSocket 出现之前,AJAX 长轮询和 Comet 等 HTTP 技术是构建实时应用程序的标准。 与 HTTP 相比,WebSocket 无需为每个请求建立新连接,从而大大减少了每条消息的大小(无 HTTP Header)。 与 HTTP 相比,这有助于节省带宽、改善延迟并减少服务器端的 WebSockets 负担。

作为一种事件驱动技术,WebSocket 允许在无需客户端主动请求的情况下传输数据。 在客户端需要对事件(无法预测的事件,例如欺诈警报)做出快速反应的情况下有优势。

4.2 WebSocket 缺点

  • WebSocket 是有状态的: 这可能很难处理,尤其是在规模上,因为它需要服务器层跟踪每个单独的 WebSocket 连接并维护状态信息。
  • 当连接终止时,WebSockets 不会自动恢复:这就是存在许多 WebSocket 库的部分原因。
  • 代理服务器的公司网络:会阻止 WebSocket 连接。

5.WebRTC vs WebSockets:主要区别是什么?

WebSocket 提供客户端、服务端通信协议,而 WebRTC 为浏览器和移动应用程序提供点对点协议和通信功能。

WebSocket 在 TCP 上工作,而 WebRTC 主要在 UDP 上。

当数据完整性至关重要时,WebSocket 是更好的选择,因为您可以从 TCP 的底层可靠性中获益。 而,如果速度更重要并且丢失一些数据包是可以接受的,WebRTC是更好的选择。

WebRTC 主要设计用于流式传输音频和视频内容。 也可以使用 WebSockets 流式传输媒体,但 WebSocket 技术更适合使用 JSON 等格式传输文本/字符串数据。

5.1 什么时候使用 WebRTC?

WebRTC 是以下用例的不错选择:

  • 音频和视频通信
  • 文件共享
  • 屏幕共享
  • 直播活动
  • 物联网设备(例如,无人机或婴儿监视器流式传输实时音频和视频数据)

5.2 什么时候使用 WebSocket?

们可以将 Web Sockets 用例大致分为两个不同的类别:

  • 实时更新:其中通信是单向的,服务器正在将低延迟(频繁的)更新流式传输到客户端。
  • 双向通信,客户端和服务器都发送和接收消息。包括聊天、虚拟活动等。 WebSockets 还可用于支持多用户同步协作功能,例如多人同时编辑同一文档。

5.3 什么时候用WebRTC和WebSocket组合?

WebSockets 和 WebRTC 是互补的技术。 如前所述,WebRTC 允许点对点通信,但它仍然需要服务器,以便这些点可以通过称为信令的过程协调通信。 通常,信令涉及传输信息,例如媒体元数据(例如,编解码器和媒体类型)、网络数据(例如,主机的 IP 地址和端口)以及用于打开和关闭通信的会话控制消息。

需要牢记的关键一点:WebRTC 不提供标准的信令实现,允许开发人员为此目的使用不同的协议。 WebSocket 协议通常用作 WebRTC 应用程序的信号机制,允许对等点实时交换网络和媒体元数据。

6.总结

本文重点论述了WebRTC 、WebSocket协议,两者的异同、使用场景、以及何时可以组合使用。关于WebRTC、WebSocket,笔者已经编写过至少3篇文章进行了重点论述,如果有需求可以直接点击文末的资料即可。

参考资料

WebRTC已成为HTML5标准?是时候开始学习了?

HTTP、WebSocket、gRPC 或 WebRTC:哪种协议最适合您的应用程序?

WebRTC成为HTML5标准?SDP、STUN、TURN你想知道的都在这里!

https://ably.com/topic/webrtc-vs-websocket



Tags:WebRTC   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
WebRTC vs WebSocket?WebRTC + WebSocket?
WebRTC vs WebSocket1.什么是WebRTC?WebRTC 是一组 JavaScript API,可以在两个浏览器之间建立点对点连接, 实现音频和视频等数据的传输,也可以用它创建有语音/视频通话功能的应...【详细内容】
2023-01-04  Search: WebRTC  点击:(526)  评论:(0)  加入收藏
WEBRtc 实现视频会议
WebRTC(Web Real-Time Communication)是为了让开发者在浏览器实现多媒体交换的技术,于2011年被加入W3C规范。当前的支持情况可以见下图。 WebRTC的核心在于建立PeerConnection...【详细内容】
2022-11-11  Search: WebRTC  点击:(664)  评论:(0)  加入收藏
百万级高并发WebRTC流媒体服务器设计与开发
访问者模式:从介绍到实践百万级高并发WebRTC流媒体服务器设计与开发download:https://www.zxit666.com/1305/01什么是访客模式?访问者模式的定义如下,是指在不改变数据结构的情...【详细内容】
2022-10-07  Search: WebRTC  点击:(363)  评论:(0)  加入收藏
音视频系列:Webrtc音视频通话
音视频通话难点:音视频编解码原理IP4中,设备在各自的内网,需要p2p打洞音频降噪和回声消除信令服务器:设备连接的socket服务器传递各个设备之间的信息:传递各个节点的sdp信息,传递i...【详细内容】
2022-06-16  Search: WebRTC  点击:(436)  评论:(0)  加入收藏
WebRTC记录音视频流
监听开始事件 EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上,当该对象触发指定的事件时,指定的回调函数就会被执行。 事件目标可以是一个文档上的...【详细内容】
2022-02-17  Search: WebRTC  点击:(246)  评论:(0)  加入收藏
Android WebRTC 对 AudioRecord 的使用
AudioRecord 是 Android 基于原始PCM音频数据录制的类,WebRCT 对其封装的代码位置位于 org/webrtc/audio/WebRtcAudioRecord.java,接下来我们学习一下 AudioRecord 是如何创建...【详细内容】
2022-01-13  Search: WebRTC  点击:(394)  评论:(0)  加入收藏
在音频通话中,如何将WebRTC音频通话升级为视频通话
我们有时候在音频通话过程中,想要改成视频通话。如果挂断当前的通话再重新发起视频通话就会显得比较麻烦。 因此很多app提供了将音频通话升级成视频通话的功能,同时也有将视频...【详细内容】
2021-12-23  Search: WebRTC  点击:(553)  评论:(0)  加入收藏
音视频流媒体开发WebRTC 基础知识 -- ICE 交互总结
【网络通信 -- WebRTC】WebRTC 基础知识 -- ICE 交互总结【1】ICE 的一般概念简介ICE 角色offer (主动发起)的一方为 controlling 角色answer (被动接受)的一方为 controlle...【详细内容】
2021-11-30  Search: WebRTC  点击:(438)  评论:(0)  加入收藏
IOS技术分享|WebRTC iOS源码下载&编译
前言最近对 WebRTC iOS 端源码进行了下载和编译,网上针对 WebRTC iOS 端的编译文章基本都是几年前的,有些地方已经不适用于最新版的 WebRTC 的编译,简单记录下载&编译的过程,以...【详细内容】
2021-11-10  Search: WebRTC  点击:(732)  评论:(0)  加入收藏
使用WebRTC和WebVR进行VR视频通话
Web平台上的WebRTC并不是其唯一的媒体API。WebVR说明书于几年前被引入来为浏览器中的虚拟现实设备提供支持。目前已经变为新的WebXR设备API说明书。今年夏天我在ClueCon,Dan...【详细内容】
2021-08-27  Search: WebRTC  点击:(396)  评论:(0)  加入收藏
▌简易百科推荐
JavaScript的异步编程常见模式
在JavaScript中,异步编程是一种处理长时间运行操作(如网络请求或I/O操作)的常见方式。它允许程序在等待这些操作完成时继续执行其他任务,从而提高应用程序的响应性和性能。JavaS...【详细内容】
2024-04-12  靳国梁    Tags:JavaScript   点击:(2)  评论:(0)  加入收藏
17 个你需要知道的 JavaScript 优化技巧
你可能一直在使用JavaScript搞开发,但很多时候你可能对它提供的最新功能并不感冒,尽管这些功能在无需编写额外代码的情况下就可以解决你的问题。作为前端开发人员,我们必须了解...【详细内容】
2024-04-03  前端新世界  微信公众号  Tags:JavaScript   点击:(6)  评论:(0)  加入收藏
你不可不知的 15 个 JavaScript 小贴士
在掌握如何编写JavaScript代码之后,那么就进阶到实践——如何真正地解决问题。我们需要更改JS代码使其更简单、更易于阅读,因为这样的程序更易于团队成员之间紧密协...【详细内容】
2024-03-21  前端新世界  微信公众号  Tags:JavaScript   点击:(27)  评论:(0)  加入收藏
又出新JS运行时了!JS运行时大盘点
Node.js是基于Google V8引擎的JavaScript运行时,以非阻塞I/O和事件驱动架构为特色,实现全栈开发。它跨平台且拥有丰富的生态系统,但也面临安全性、TypeScript支持和性能等挑战...【详细内容】
2024-03-21  前端充电宝  微信公众号  Tags:JS   点击:(26)  评论:(0)  加入收藏
构建一个通用灵活的JavaScript插件系统?看完你也会!
在软件开发中,插件系统为应用程序提供了巨大的灵活性和可扩展性。它们允许开发者在不修改核心代码的情况下扩展和定制应用程序的功能。本文将详细介绍如何构建一个灵活的Java...【详细内容】
2024-03-20  前端历险记  微信公众号  Tags:JavaScript   点击:(20)  评论:(0)  加入收藏
对JavaScript代码压缩有什么好处?
对JavaScript代码进行压缩主要带来以下好处: 减小文件大小:通过移除代码中的空白符、换行符、注释,以及缩短变量名等方式,可以显著减小JavaScript文件的大小。这有助于减少网页...【详细内容】
2024-03-13  WangLiwen    Tags:JavaScript   点击:(2)  评论:(0)  加入收藏
跨端轻量JavaScript引擎的实现与探索
一、JavaScript 1.JavaScript语言JavaScript是ECMAScript的实现,由ECMA 39(欧洲计算机制造商协会39号技术委员会)负责制定ECMAScript标准。ECMAScript发展史: 2.JavaScript...【详细内容】
2024-03-12  京东云开发者    Tags:JavaScript   点击:(2)  评论:(0)  加入收藏
面向AI工程的五大JavaScript工具
令许多人惊讶的是,一向在Web开发领域中大放异彩的JavaScript在开发使用大语言模型(LLM)的应用程序方面同样大有价值。我们在本文中将介绍面向AI工程的五大工具,并为希望将LLM...【详细内容】
2024-02-06    51CTO  Tags:JavaScript   点击:(53)  评论:(0)  加入收藏
JS小知识,使用这6个小技巧,避免过多的使用 if 语句
最近在重构我的代码时,我注意到早期的代码使用了太多的 if 语句,达到了我以前从未见过的程度。这就是为什么我认为分享这些可以帮助我们避免使用过多 if 语句的简单技巧很重要...【详细内容】
2024-01-30  前端达人  今日头条  Tags:JS   点击:(58)  评论:(0)  加入收藏
18个JavaScript技巧:编写简洁高效的代码
本文翻译自 18 JavaScript Tips : You Should Know for Clean and Efficient Code,作者:Shefali, 略有删改。在这篇文章中,我将分享18个JavaScript技巧,以及一些你应该知道的示例...【详细内容】
2024-01-30  南城大前端  微信公众号  Tags:JavaScript   点击:(71)  评论:(0)  加入收藏
站内最新
站内热门
站内头条