Web实时语音/视频聊天/文件传输

本文介绍了WebRTC技术,这是一种实现浏览器间音视频聊天和文件传输的实时通讯技术。WebRTC基于点对点连接,允许在无需插件的情况下创建音视频通话和数据通道。通过RTCPeerConnection API,开发者可以轻松建立两端之间的连接。文章还探讨了NAT穿透问题,以及STUN/TURN服务器的角色。此外,RTCDataChannel用于实现文件传输。通过WebRTC,开发者可以在各种平台上创建高效、低成本的音视频通信应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

前端应用能否实现音视频聊天?

答案是:能! 借助WebRTC不仅能做到音视频聊天,还能实现点对点文件传输。

WebRTC是什么? WebRTC(Web Real-Time Communication)是一项实时通讯技术,它允许网络应用或者站点,在不借助中间媒介的情况下,建立浏览器之间点对点(Peer-to-Peer)的连接,实现视频流音频流或者其他任意数据的传输。 WebRTC包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下,创建点对点(Peer-to-Peer)的数据分享和视频会议成为可能。 WebRTC的前世今生 1990年,Gobal IP Solutions成立于瑞典斯德哥尔摩(以下简称GIPS),这是一家VoIP 软件开发商,提供了可以说是世界上最好的语音引擎。 Skype、腾讯 QQ、WebEx、Vidyo 等都使用了它的音频处理引擎,包含了受专利保护的回声消除算法,适应网络抖动和丢包的低延迟算法,以及先进的音频编解码器。

Google 在 Gtalk 中也使用了 GIPS 的授权。 2010年5月,Google以6820万美元收购了GIPS,并将其源代码开源。加上在 2010 年收购的 On2 获取到的 VPx 系列视频编解码器,WebRTC 开源项目应运而生,即 GIPS 音视频引擎 + 替换掉 H.264 的 VPx。 随后,Google 又将在 Gtalk 中用于 P2P 打洞的开源项目 libjingle 融合进了 WebRTC。 2012年1月,谷经把WebRTC集成到了Chrome浏览器中。 所以目前 WebRTC 提供了在 Web、iOS、Android、Mac、Windows、Linux 在内的所有平台的 API,保证了 API 在全平台的一致性。 使用 WebRTC 的好处主要有以下几个方面

  • 免费使用 GIPS 先进的音视频引擎,在此之前都需要付费授权(当然,WebRTC由于开源,所以相较于GIPS阉割了一部分内容,导致性能没有GIPS那么优异)。

  • 由于音视频传输是基于点对点传输的,所以实现简单的 1 对 1 通话场景,只需要较少的服务器资源,借助免费的 STUN/TURN 服务器可以大大节约成本开销。

  • 开发 Web 版本的应用非常方便,使用简单的 JS 接口,无需安装任何插件,即可实现音视频互通。

当前浏览器支持情况

  • 桌面PC端

  • Microsoft Edge

  • Google Chrome 23

  • Mozilla Firefox 22

  • Opera 18

  • Safari 11

  • Android端

  • Google Chrome 28(从版本29开始默认开启)

  • Mozilla Firefox 24

  • Opera Mobile 12

  • Google Chrome OS

  • Firefox OS

  • iOS 11

  • Blackberry 10内置浏览器

附一张浏览器版本支持图如下:

WebRTC技术组成 底层技术

  • 图像引擎 (VideoEngine)

  • VP8编解码

  • jitter buffer: 动态抖动缓冲

  • Image enhancements: 图像增益

  • 声音引擎 (VoiceEngine)

  • iSAC/iLBC/Opus等编解码

  • NetEQ语音信号处理

  • 回声消除和降噪

  • 会话管理 (Session Management)

  • iSAC 音效压缩

  • VP8 Google自家WebM项目的影片编解码器

  • APIs (Native C++ API, Web API)

 WebRTC的底层实现非常复杂,附一张架构图如下:

【优快云后台扣1,免费分享】资料包括《Andoird音视频开发必备手册+音视频学习视频+学习文档资料包+大厂面试真题+2022最新学习路线图》等 

 

几个重要API WebRTC虽然底层实现极其复杂,但是面向开发者的API还是非常简洁的,主要分为三方面:

  • Network Stream API

  • MediaStream 媒体数据流

  • MediaStreamTrack 媒体源

  • RTCPeerConnection

  • RTCPeerConnection 允许用户在两个浏览器之间直接通讯。

  • RTCIceCandidate ICE协议的候选者

  • RTCIceServer

  • Peer-to-peer Data API

  • RTCDataChannel:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值