WebRTC简介及实战应用 — 从0到1实现实时音视频聊天等功能

这篇具有很好参考价值的文章主要介绍了WebRTC简介及实战应用 — 从0到1实现实时音视频聊天等功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、WebRTC简介

WebRTC 是由一家名为 Gobal IP Solutions,简称 GIPS 的瑞典公司开发的。Google 在 2011 年收购了 GIPS,并将其源代码开源。然后又与 IETF 和 W3C 的相关标准机构合作,以确保行业达成共识。其中:

  • Web Real-Time Communications (WEBRTC) W3C 组织:定义浏览器 API。
  • Real-Time Communication in Web-browsers (RTCWEB) IETF 标准组织:定义其所需的协议,数据,安全性等手段。

WebRTC(Web Real-Time Communication)是一项开源的技术,旨在实现实时音视频以及数据通信,而无需安装任何插件或扩展。WebRTC 允许用户之间通过 P2P(Peer-to-Peer)模式进行实时通信,减轻服务器的负担并提高通信效率。

所以,我们可以在不需要任何第三方插件的情况下,实现一个浏览器到浏览器的点对点(P2P)连接,从而进行音视频实时通信。当然,WebRTC 提供了一些 API 供我们使用,在实时音视频通信的过程中,我们主要用到以下三个:

  • getUserMedia:获取音频和视频流(MediaStream)
  • RTCPeerConnection:点对点通信
  • RTCDataChannel:数据通信

不过,虽然浏览器给我们解决了大部分音视频处理问题,但是从浏览器请求音频和视频时,我们还是需要特别注意流的大小和质量。因为即便硬件能够捕获高清质量流,CPU 和带宽也不一定可以跟上,这也是我们在建立多个对等连接时,不得不考虑的问题。

1、WebRTC基本概念

WebRTC简介及实战应用 — 从0到1实现实时音视频聊天等功能,HTML5,JavaScript,WebRTC,webrtc,实时音视频,前端,音视频,javascript,html5,html

1. 基本组件

WebRTC P2P 由以下几个主要组件组成:

  1. Camera 和 AudioRecord:通过 Camera(Camera1 或 Camera2)和 AudioRecord 类访问音视频设备。处理 Android 设备的权限请求,以便访问摄像头和麦克风。
  2. PeerConnectionFactory:创建 RTCPeerConnection 和 RTCDataChannel 实例的核心类。
  3. RTCPeerConnection:实现 P2P 通信,处理音视频编解码、网络通信等。负责处理信令过程、交换媒体信息以及协调 NAT 穿透。
  4. RTCDataChannel:用于在 P2P 通信中传输非音视频数据,如文字、图片、文件等。实现低延迟、可靠的数据通信通道。
  5. VideoTrack 和 AudioTrack:代表视频轨道和音频轨道。操作音视频流,例如添加到 RTCPeerConnection 中,实现音视频的传输。
  6. VideoRenderer:用于显示远端视频流。为本地和远端视频流分别创建 VideoRenderer 实例,如 SurfaceViewRenderer 或 TextureViewRenderer。将视频流渲染到 Android 界面上。
  7. EglBase:在渲染视频时,可能需要使用 EglBase 类。EglBase 提供了 OpenGL ES 上下文,用于渲染视频到 Android 视图(如 SurfaceViewRenderer 或 TextureViewRenderer)中。
  8. 音频编解码器:WebRTC 支持多种音频编解码器,如 Opus、G.711、iSAC 等。根据 SDP 信息自动选择合适的编解码器。
  9. 视频编解码器:WebRTC 支持多种视频编解码器,如 VP8、VP9、H.264 等。根据 SDP 信息自动选择合适的编解码器。
  10. 编解码器设置与优化:在特定场景下,可能需要对编解码器的参数进行调整,以获得更好的音视频质量或降低带宽占用。例如,调整视频编码器的分辨率、帧率、码率等参数。
  11. 硬件编解码器支持:在 Android 平台上,可以使用 MediaCodec 进行硬件编解码。并且使用硬件编解码器可以显著降低 CPU 占用,大大提高编解码性能。
  12. ICE(Interactive Connectivity Establishment):处理网络协议,用于在复杂的网络环境中建立 P2P 连接。协助 WebRTC 客户端在 NAT 和防火墙等环境中找到可用的通信路径。
  13. STUN(Session Traversal Utilities for NAT):STUN 服务器帮助 WebRTC 客户端获取公网 IP 地址和端口,以便在 NAT 环境中建立 P2P 连接。STUN 服务器通过向 WebRTC 客户端返回其公网地址,使客户端能够在信令过程中交换这些信息。
  14. TURN(Traversal Using Relays around NAT):当 STUN 服务器无法建立直接的 P2P 连接时,TURN 服务器充当中继,将客户端的数据中转至另一个客户端。虽然这会增加通信延迟,但能确保通信成功。TURN 服务器通常与 STUN 服务器一起部署,作为 WebRTC NAT 穿透的备选方案。

2. 信令流程

WebRTC 不包含信令协议,因此需要开发者根据需求自定义信令过程。

信令主要用于协调双方建立 P2P 连接、交换音视频编码信息、网络地址等。

在 WebRTC 中,信令主要负责以下几个方面:

  1. 协商通信参数:通信双方需要协商一些通信参数,例如音视频编码格式、分辨率等。这些参数被封装在 SDP(会话描述协议)中,并通过信令服务器进行交换。
  2. 发现和交换网络地址:由于 NAT(网络地址转换)的存在,通信双方需要发现并交换其公共网络地址。这一过程通过 ICE(Interactive Connectivity Establishment)协议来实现。

3. SDP(会话描述协议)

SDP 是一种文本格式的协议,用于描述多媒体会话的属性,例如音视频编码格式、分辨率、帧率等。在 WebRTC 中,SDP 主要用于在通信双方之间协商通信参数。

4. NAT 穿透和 STUN/TURN 服务器

在实际网络环境中,大多数用户都位于 NAT(网络地址转换)环境之下。NAT 会导致用户之间无法直接建立 P2P 连接。为了解决这个问题,WebRTC 使用了 ICE 协议,结合 STUN(Session Traversal Utilities for NAT)和 TURN(Traversal Using Relays around NAT)服务器进行 NAT 穿透。

  • STUN:STUN 服务器帮助用户获取公网 IP 地址和端口,供其他用户建立连接。
  • TURN:当 STUN 服务器无法实现 NAT 穿透时,TURN 服务器作为中继,将用户的数据中转至另一个用户。虽然这会增加通信延迟,但能确保通信成功。

ICE 的工作原理如下:

  1. 首先,通信双方收集本地网络地址(包括私有地址和公共地址)以及通过 STUN 和 TURN 服务器获取的候选地址。
  2. 接下来,双方通过信令服务器交换这些候选地址。
  3. 通信双方使用这些候选地址进行连接测试,确定最佳的可用地址。
  4. 一旦找到可用的地址,通信双方就可以开始实时音视频通话。

5.信令服务器

信令服务器负责协调客户端之间的通信,主要包括交换 SDP 信息和 ICE 候选(NAT 穿越信息)。信令服务器可以使用 WebSocket、Socket.IO 等技术来实现。

在选择信令服务器时,开发者需要考虑以下几个方面:

  1. 可靠性:信令服务器需要具有高可靠性,以确保通话过程中的信令消息能够准确无误地传输。
  2. 延迟:信令服务器的延迟应尽可能低,以减少通话建立过程中的等待时间。
  3. 扩展性:随着用户数量的增长,信令服务器需要具有良好的扩展性,以满足更高的并发需求。
  4. 安全性:信令服务器应提供安全机制,例如 SSL/TLS 加密,以防止信令消息被窃听或篡改。

2、WebRTC应用场景

1. 实时音视频通信:

  • 点对点视频聊天:如 Google Meet、Zoom 等实时视频通话应用。
  • 多人视频会议:企业级多人视频会议系统,如飞书、钉钉、腾讯会议、 Cisco Webex、Microsoft Teams 等。
  • 在线教育:远程教育、在线培训和在线课堂等,如腾讯课堂、网易云课堂等。
  • 电子健康:远程医疗咨询、在线心理咨询等。
  • 客户支持:在线客服系统,提供实时音视频客户支持。

2. 实时数据传输和文件共享:

  • P2P 文件共享:直接在浏览器之间传输文件,如 ShareDrop、WebDrop 等。
  • 在线协作工具:实时文档编辑、在线白板等,如 飞书文档、Google Docs、Microsoft Office 365 等。
  • 多人游戏:基于浏览器的实时多人游戏,如 pixelstreaming。
  • 实时数据同步:实时数据同步,如物联网设备状态同步。

3. 实时媒体流处理:

  • 实时视频监控:使用 WebRTC 进行低延迟的实时视频监控。
  • 实时直播:音频和视频直播,如 Facebook Live、Twitch 等。
  • 实时录屏和远程桌面:支持远程桌面访问、协助和实时录屏等功能。
  • 实时音视频处理:实时滤镜、美颜、背景替换等。

4. 物联网(IoT)和边缘计算:

  • 实时设备控制:在浏览器中直接控制物联网设备。
  • 边缘计算:将音视频处理和数据处理任务分布到边缘设备上,减轻服务器负担。
  • 远程团队协作:使用 WebRTC 实现远程工程师对设备的实时控制和诊断。

5. 社交网络:

  • 社交应用:如 QQ、微信、Facebook、WhatsApp 等应用中的实时音视频聊天功能。
  • 直播平台:如 TikTok、抖音、快手 等短视频平台的实时互动直播功能。

由于 WebRTC 可以在不依赖插件或外部应用的情况下实现实时通信,因此在各种需要实时音视频通信和数据传输的场景中都可以发挥重要作用。

3、getUserMedia

getUserMedia 主要就是用来获取设备的媒体流(即 MediaStream)。它可以接受一个约束对象 constraints 作为参数,用来指定需要获取到什么样的媒体流。

navigator.mediaDevices.getUserMedia 是新版的 API,旧版的是 navigator.getUserMedia。为了避免兼容性问题,我们可以稍微处理一下(其实说到底,现在 WebRTC 的支持率还不算高,有需要的可以选择一些适配器,如 adapter.js)。

    // 判断是否有 navigator.mediaDevices,没有赋成空对象
    if (navigator.mediaDevices === undefined) {
        navigator.mediaDevices = {};
    }
    
    // 继续判断是否有 navigator.mediaDevices.getUserMedia,没有就采用 navigator.getUserMedia
    if (navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia = function(prams) {
            let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
            // 兼容获取
            if (!getUserMedia) {
                return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
            }
            return new Promise(function(resolve, reject) {
                getUserMedia.call(navigator, prams, resolve, reject);
            });
        };
    }
    navigator.mediaDevices.getUserMedia(constraints)
        .then(stream => {
            let video = document.querySelector('#Rtc');
            if ('srcObject' in video) { // 判断是否支持 srcObject 属性
                video.srcObject = stream;
            } else {
                video.src = window.URL.createObjectURL(stream);
            }
            video.onloadedmetadata = function(e) {
                video.play();
            };
        })
        .catch((err) => { // 捕获错误
            console.error(err.name + ': ' + err.message);
        });
    navigator.mediaDevices.getUserMedia({ audio: false, video: true });
    // 只需要视频流,不要音频


    // 获取指定宽高,这里需要注意:在改变视频流的宽高时,
    // 如果宽高比和采集到的不一样,会直接截掉某部分
    { 
      audio: false, 
      video: { width: 1280, height: 720 } 
    }

    // 设定理想值、最大值、最小值
    {
      audio: true,
      video: {
        width: { min: 1024, ideal: 1280, max: 1920 },
        height: { min: 776, ideal: 720, max: 1080 }
      }
    }

    // 对于移动设备来说,还可以指定获取前摄像头,或者后置摄像头
    { audio: true, video: { facingMode: "user" } } // 前置
    { audio: true, video: { facingMode: { exact: "environment" } } } // 后置
    // 也可以指定设备 id,
    // 通过 navigator.mediaDevices.enumerateDevices() 可以获取到支持的设备
    { video: { deviceId: myCameraDeviceId } }

    // 设置视频源为屏幕,但是目前只有火狐支持了这个属性
    { audio: true, video: {mediaSource: 'screen'} } 

4、RTCPeerConnection

RTCPeerConnection 接口代表一个由本地计算机到远端的 WebRTC 连接。该接口提供了创建,保持,监控,关闭连接的方法的实现。

RTCPeerConnection 作为创建点对点连接的 API,是我们实现音视频实时通信的关键。在点对点通信的过程中,需要交换一系列信息,通常这一过程叫做 — 信令(signaling)。

在信令阶段需要完成的任务:

 * 为每个连接端创建一个 RTCPeerConnection,并添加本地媒体流。
 * 获取并交换本地和远程描述:SDP 格式的本地媒体元数据。
 * 获取并交换网络信息:潜在的连接端点称为 ICE 候选者。

我们虽然把 WebRTC 称之为点对点的连接,但并不代表在实现过程中不需要服务器的参与。相反,在点对点的信道建立起来之前,二者之间是没有办法通信的。这也就意味着,在信令阶段,我们需要一个通信服务来帮助我们建立起这个连接。WebRTC 本身没有指定某一个信令服务,所以,我们可以但不限于使用 XMPP、XHR、Socket 等来做信令交换所需的服务。

1. NAT 穿越技术

为每个连接端创建一个 RTCPeerConnection,并添加本地媒体流。事实上,如果是一般直播模式,则只需要播放端添加本地流进行输出,其他参与者只需要接受流进行观看即可。

// 因为各浏览器差异,RTCPeerConnection 一样需要加上前缀
let PeerConnection = window.RTCPeerConnection ||
                     window.mozRTCPeerConnection ||
                     window.webkitRTCPeerConnection;
let peer = new PeerConnection(iceServers);


// 参数 — iceServers
// 参数配置了两个 url,分别是 STUN 和 TURN,这便是 WebRTC 实现点对点通信的关键,也是一般 P2P 连接都需要解决的问题:NAT穿越。
{
  iceServers: [
    { 
        url: "stun:stun.l.google.com:19302" // 谷歌的公共服务
    }, 
    {
      url: "turn:***",
      username: ***, // 用户名
      credential: *** // 密码
    }
  ]
}

一般情况下会采用 ICE 协议框架进行 NAT 穿越,ICE 的全称为 Interactive Connectivity Establishment,即交互式连接建立。它使用 STUN 协议以及 TURN 协议来进行穿越。

关于 NAT 穿越的更多信息可以参考 ICE协议下NAT穿越的实现(STUN&TURN)、文章来源地址https://www.toymoban.com/news/detail-841443.html

到了这里,关于WebRTC简介及实战应用 — 从0到1实现实时音视频聊天等功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • gstreamer中使用webrtc实现音视频对讲

    gstreamer官方源代码中有一个基于webrtc插件实现音视频通话的开源项目,下面介绍在Ubuntu系统中如何搭建环境并使用。 这里省略gstreamer安装,直接安装使用webrtcbin插件使用的相关库,参考官网。系统版本建议高于ubuntu18.04。 首先安装如下相关依赖库。 gstreamer项目编译官方建议

    2024年04月11日
    浏览(43)
  • WebRTC音视频通话-实现GPUImage视频美颜滤镜效果iOS

    WebRTC音视频通话-实现GPUImage视频美颜滤镜效果 在WebRTC音视频通话的GPUImage美颜效果图如下 可以看下 之前搭建ossrs服务,可以查看:https://blog.csdn.net/gloryFlow/article/details/132257196 之前实现iOS端调用ossrs音视频通话,可以查看:https://blog.csdn.net/gloryFlow/article/details/132262724 之前WebR

    2024年02月12日
    浏览(51)
  • WebRTC音视频通话-实现iOS端调用ossrs视频通话服务

    WebRTC音视频通话-实现iOS端调用ossrs视频通话服务 之前搭建ossrs服务,可以查看:https://blog.csdn.net/gloryFlow/article/details/132257196 这里iOS端使用GoogleWebRTC联调ossrs实现视频通话功能。 iOS端端效果图 ossrs效果图 WebRTC (Web Real-Time Communications) 是一项实时通讯技术,它允许网络应用或者站

    2024年02月13日
    浏览(54)
  • 【复】基于 WebRTC 的音视频在线监考模块的设计与实现(下)

    在上一篇博文 【复】基于 WebRTC 的音视频在线监考模块的设计与实现(上) 中,主要介绍了关于 WebRTC 的基本理论,那么这篇文章我们将进入实战阶段,通过 WebRTC 框架,去实现 P2P 通话,以及延伸到一对多的音视频通话,从而实现在线监考功能;   在开发 Web 时,WebRTC 标准

    2024年02月01日
    浏览(60)
  • 基于webrtc的音视频通话,实现相机流识别人脸的功能

    这几天研究了一下webRTC的基础能力,在此基础之上能实现的视频通话,互动等更多实用功能。项目中使用的是阿里的rtc,我研究的是声网的是否符合功能,后续会总结和记录一下应用到的几个功能实现方法。 今天要记录的功能是项目流识别人脸的功能,其实类似功能很常见了

    2024年04月28日
    浏览(50)
  • SRS OBS利用RTMP协议实现音视频推拉流;WebRTC 屏幕直播分享工具

    参考:https://ossrs.net/lts/zh-cn/docs/v5/doc/getting-started 1)docker直接运行SRS服务: 运行起来后可以http://localhost:8080/ 看到服务基本信息: 2) OBS 推流 在设置里设置直播地址: 然后回到首页点击开始直播 3)点击http://localhost:8080/ 可以网页查看流视频 SRS低延迟启动(暂时测试下来延迟

    2024年04月13日
    浏览(55)
  • WebRTC音视频通话(二)简单音视频通话

    本篇不详细介绍websocket,只针对websocket整合rtc。 webrtc是P2P通信,也就是实际交流的 只有两个人 ,而要建立通信,这两个人需要 交换一些信息来保证通信安全 。而且, webrtc必须通过ssh加密 ,也就是使用https协议、wss协议。 借用一幅图 1.1 创建端点的解析 以下解析不包括we

    2023年04月09日
    浏览(58)
  • iOS 端实现1对1音视频实时通话

    首先,我们来看一下 iOS 端是如何获取访问音视频设备权限的。相比 Android 端而言,iOS端获取相关权限要容易很多。其步骤如下: 打开项目,点击左侧目录中的项目。 在左侧目录找到 info.plist ,并将其打开。 点击 右侧 看到 “+” 号的地方。 添加 Camera 和 Microphone 访问权限。

    2024年02月15日
    浏览(50)
  • WebRTC音视频通话-WebRTC视频自定义RTCVideoCapturer相机

    WebRTC音视频通话-WebRTC视频自定义RTCVideoCapturer相机 在之前已经实现了WebRTC调用ossrs服务,实现直播视频通话功能。但是在使用过程中,RTCCameraVideoCapturer类提供的方法不能修改及调节相机的灯光等设置,那就需要自定义RTCVideoCapturer自行采集画面了。 iOS端WebRTC调用ossrs相关,实现

    2024年02月12日
    浏览(59)
  • 深入探究音视频开源库WebRTC中NetEQ音频抗网络延时与抗丢包的实现机制

    目录 1、引言 2、WebRTC简介 3、什么是NetEQ? 4、NetEQ技术详解 4.1、NetEQ概述 4.2、抖动消除技术 4.3、丢包补偿技术 4.4、NetEQ概要设计 4.5、NetEQ的命令机制 4.6、NetEQ的播放机制 4.7、MCU的控制机制 4.8、DSP的算法处理 4.9、DSP算法的模拟测试 5、NetEQ源文件说明 6、参考文档 C++软件异常

    2024年04月25日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包