WebRTC学习

这篇具有很好参考价值的文章主要介绍了WebRTC学习。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

WebRTC 学习

介绍

WebRTC(Web Real-Time Communications)是一项实时通讯技术,它允许网络应用或者站点,在不借助中间媒介的情况下,建立浏览器之间点对点(Peer-to-Peer)的连接,实现视频流和(或)音频流或者其他任意数据的传输。WebRTC 包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下,创建点对点(Peer-to-Peer)的数据分享和电话会议成为可能。

基于 WebRTC API 构建的协议

ICE:交互式连接创建,是一个允许你的浏览器和对端浏览器建立连接的协议框架。两个节点需要交换 ICE 候选来协商他们自己具体如何连接。每一个 ICE 候选描述一个发送者使用的通信方法,每个节点按照他们被发现的顺序发送候选并且保持发送直到退出,即使媒体数据流已经开始传递也要如此。这个框架的算法是寻找最低等待时间的路径去连接两端,ICE 通过使用以下几种技术完成上述工作。

  • STUN:NAT 的会话穿越功能,是允许位于 NAT 后的客户端找出自己的公网地址,判断出路由器阻止直连的限制方法的协议。
  • NAT:网络地址转换协议,用来给私网设备映射一个公网的 IP 地址,但是一些路由器严格的限定了谁能连接内网设备。这种情况下需要专项 TURN 协议。
  • TURN:一些路由器使用一种“对称型 NAT”的 NAT 模型。这意味着路由器只接受和对端先前建立的连接(就是下一次请求建立新的连接映射)。NAT 的中继穿越方式通过 TURN 服务器中继(暂时理解为转发)的方式绕过“对称型 NAT”。
  • SDP:会话描述协议。是一个多媒体连接内容的协议。

WebRTC 连接

上面介绍了协议,下面介绍如何相互交互使用上述协议,以便在对等体之间创建连接和传输数据或者多媒体。

提议/应答和信号通道

WebRTC 中间无法创建没有服务器的某种连接,换句话说,WebRTC 虽然是点对点通信(peer to peer),但是点之间在创建 WebRTC 通道建立连接的过程中需要通过某种方式交换信息(交换 SDP)。
将作为连接发起者的同伴 A 将创建一个提议。然后他们将使用所选择的信号通道将此提议发送给对等体 B. 对等体 B 将从信号通道接收提议并创建应答。然后,它们将沿着信号通道发送回对等体 A。

会话描述(SDP)

WebRTC 连接上的端点配置称为会话描述,该描述包括要发送的媒体类型、格式、正在使用的传输协议,端点(peer)的 IP 地址和端口以及描述媒体传输断电所需的其他信息的信息。使用会话描述协议(SDP)来交换和存储该信息。
当一个用户对另一个用户启动 WebRTC 调用的时候,将创建一个叫做**提议(offer)的特定描述。该描述包含有关呼叫者建议的呼叫配置的所有信息。接受者然后用应答(answer)进行响应,这是他们对呼叫结束的描述。以这种方式,两个设备彼此共享以便减缓媒体数据所需的信息。该交换是使用上面提到的交互式连接(ICE)**处理的。这是一种协议。
然后,每个对等端保持两个描述:

  • 描述本身的本地描述
  • 描述呼叫远端的远程描述
    在首次建立呼叫时,还可以在呼叫格式或其他配置需要更改的任何时候执行提议/应答过程。无论是新呼叫还是重新配置现有的呼叫,这些都是交换提议和回答所必需的步骤。
  1. 呼叫者捕捉本地媒体(比如navigator.mediaDevices.getDisplayMedianavigator.mediaDevices.getUserMedia
  2. 呼叫者创建一个RTCPeerConnection并调用RTCPeerConnectiuon.addTrack(),注:该方法将一个新媒体音轨添加到一组音轨中,这些音轨将被传输至另一个对灯点,该方法返回将用于传输媒体数据的RTCRtpSender对象。
  3. 呼叫者调用RTCPeecConnection.createOffer()方法来创建一个提议(offer)。
  4. 呼叫者调用RTCPeerConnection.setLocaleDescription()方法将提议设置为本地描述(连接的本地描述)。
  5. 设置本地描述后,呼叫者请求STUN服务创建 ICE 候选(ice candidates)。
  6. 呼叫者通过信令服务器将提议(offer)传递至本次呼叫的预期接受者(被呼叫者,也就是接收者)。
  7. 接收者收到提议并且调用RTCPeerConnection.setRemoteDescription()方法将其记录为远程描述(也就是连接另一端的描述)。
  8. 接收者做一些可能需要的步骤结束本次呼叫:捕捉本地媒体,然后通过RTCPeerConnection.addTrack()方法添加到连接中。
  9. 接收者通过RTCPeerConnection.createAnswer()创建一个应答。
  10. 接收者调用RTCPeerConnection.setLocalDescription()方法将应答设置为本地描述,此时接收者已经获知连接双方的配置了。
  11. 接收者通过信令服务器将应答传递到呼叫者。
  12. 呼叫者收到应答。
  13. 呼叫者调用RTCPeerConnection.setRemoteDescription()方法将应答设为远程描述。如此,呼叫者也就获知连接双方的配置了。

注:呼叫者在发出呼叫后以及接收者接收呼叫生成 pc 后应该注册监听 onicecandidate 事件监听新的 ice 候选,一旦监听到有新的 ice 候选就应该发送给对方。如果是双方的媒体流通信就应该监听 pc.ontrack 事件监听对方推过来的媒体流,并做处理。

什么是 ICE 候选地址

除了交换关于媒体的信息 (上面提到的 Offer / Answer 和 SDP ) 中,对等体必须交换关于网络连接的信息。这被称为 ICE 候选者,并详细说明了对等体能够直接或通过 TURN 服务器进行通信的可用方法。通常,每个对点将优先提出最佳的 ICE 候选,逐次尝试到不佳的候选中。理想情况下,候选地址是 UDP(因为速度更快,媒体流能够相对容易地从中断恢复 ),但 ICE 标准也允许 TCP 候选。

注:WebRTC 连接信令交换过程介绍请查看 MDN 官方文档

数据通道dataChannel

数据通道dataChannel(RTCDataChannel)是WebRTC的一个功能,我们可以使用该功能在两个对等体之间打开一个数据通道,然后使用该数据通道发送任意数据(甚至可以发送文件)。

实际使用举例

下面就以实现一对一视频通话的demo场景来学习WebRTC技术,我们先整理在两个Web页面之间通过WebRTC技术实现视频通话的流程:文章来源地址https://www.toymoban.com/news/detail-431319.html

  1. 两个对等体之间需要建立通信(比如连接至同一个WebSocket服务器,因为我们需要服务器来交换信令等等)。
  2. 连接信令服务器并且创建RTCPeerConnection。
  3. 注册事件,比如:ice候选更新后需要发送给对方,收到对方的流需要处理,创建或者监听dataChannel等等。
  4. 发送方先拿到视频流(这里以navigator.mediaDevices.getDisplayMedia这个获取视频流的API来举例)。并通过pc.addTrack方法将视频流添加到RTCPeerConnection中。
  5. 生成offer并设置为本地SDP(pc.setLocalDescription)并且将offer通过信令服务器发送给对方。
  6. 注册事件,比如:ice候选更新后需要发送给对方,收到对方的流需要处理,创建或者监听dataChannel等等。
  7. 作为接收方首先连接信令服务器,然后监听消息,一旦收到了对方的offe就应该创建RTCPeerConnection。
  8. 注册事件,比如:ice候选更新后需要发送给对方,收到对方的流需要处理,创建或者监听dataChannel等等。
  9. 将收到的offer设为pc的远程sdp(通过pc.setRemoteDescription)。
  10. 获取视频流并通过pc.addTRack方法将视频流添加到RTCPeerConnection中。
  11. 通过pc.createAnswer方法生成answer并将answer设置为本地sdp(pc.setLocalDescription),然后将answer通过信令服务器发送给caller(发起者)。
  12. 最后,作为视频通话的发起方,需要监听被call方的发过来的sdp(answer),监听到后将answer设置为localDescription,这样连接就建立成功了。

到了这里,关于WebRTC学习的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • Publishing real-time financial data feeds using Kafka

    Good morning and welcome to this session on publishing real time financial data feeds using CCA. If you\\\'re a data feed provider, you may already have customers who are asking you to deliver your feed directly on AWS. And by the time we end this session, you should have a pretty good understanding of how to do that. My name is Rana. I am a Principal Solutions

    2024年02月03日
    浏览(50)
  • DETRs Beat YOLOs on Real-time Object Detection

    DETRs在实时目标检测中击败YOLO 问题:DETR的高计算成本,实时检测效果有待提高 解决:提出了一个实时的目标检测器 具体来说,设计了一个高效的混合编码器,通过解耦尺度内的交互和跨尺度融合来有效处理多尺度特征,并提出IoU感知查询选择,通过提供更高质量的初始对象

    2024年02月09日
    浏览(42)
  • 【GAMES202】Real-Time Global Illumination(in 3D)—实时全局光照(3D空间)

    上篇我们介绍了PRT,并以Diffuse的BRDF作为例子分析了预计算的部分,包括Lighting和Light transport,如上图所示。 包括我们还提到了SH,可以用SH的有限阶近似拟合球面函数,然后计算。 这里和上篇的推导方式不太一样,我们上篇是把Lighting项用SH分解然后交换积分和求和符号,最

    2024年02月10日
    浏览(43)
  • 【论文笔记】3D Gaussian Splatting for Real-Time Radiance Field Rendering

    原文链接:https://arxiv.org/abs/2308.04079 网孔和点是最常见的3D场景表达,因其是显式的且适合基于GPU/CUDA的快速栅格化。神经辐射场(NeRF)则建立连续的场景表达便于优化,但渲染时的随机采样耗时且引入噪声。本文的方法结合了上述两种方法的优点:使用3D高斯表达和基于ti

    2024年02月04日
    浏览(43)
  • 3D Gaussian Splatting for Real-Time Radiance Field Rendering 阅读笔记

    感谢B站意の茗的讲解。 论文地址:https://arxiv.org/abs/2308.04079 项目主页:https://repo-sam.inria.fr/fungraph/3d-gaussian-splatting/ 从已有点云模型出发(sfm),以每个点为中心建立可学习的3D高斯表达,Splatting方法进行渲染,实现高分辨率实时渲染。(推动NERF加速方向) 能用训练好的点云

    2024年01月16日
    浏览(51)
  • 论文笔记《3D Gaussian Splatting for Real-Time Radiance Field Rendering》

    项目地址 原论文 最近辐射场方法彻底改变了多图/视频场景捕获的新视角合成。然而取得高视觉质量仍需神经网络花费大量时间训练和渲染,同时最近较快的方法都无可避免地以质量为代价。对于无边界的完整场景(而不是孤立的对象)和 1080p 分辨率渲染,目前没有任何方法

    2024年02月09日
    浏览(43)
  • 【读论文】3D Gaussian Splatting for Real-Time Radiance Field Rendering

    What kind of thing is this article going to do (from the abstract and conclusion, try to summarize it in one sentence) To simultaneously satisfy the requirements of efficiency and quality, this article begins by establishing a foundation with sparse points using 3D Gaussian distributions to preserve desirable space. It then progresses to optimizing anisotrop

    2024年04月09日
    浏览(46)
  • 带你读论文丨S&P2019 HOLMES Real-time APT Detection

    本文分享自华为云社区《[论文阅读] (09)SP2019 HOLMES Real-time APT Detection(溯源图)》,作者: eastmount 。 本文提出了一种实现了检测高级持久性威胁(Advanced Persistent Threat,APT)新的方法,即HOLMES系统。HOLMES的灵感来自现实世界中APT活动的一些共同目标。简而言之,HOLMES旨在产生

    2024年02月11日
    浏览(67)
  • [SIGGRAPH-23] 3D Gaussian Splatting for Real-Time Radiance Field Rendering

    pdf | proj | code 本文提出一种新的3D数据表达形式3D Gaussians。每个Gaussian由以下参数组成:中心点位置、协方差矩阵、可见性、颜色。通过世界坐标系到相机坐标系,再到图像坐标系的仿射关系,可将3D Gaussian映射到相机坐标系,通过对z轴积分,可得到对应Splatting 2D分布。 针对

    2024年02月04日
    浏览(50)
  • 3D Gaussian Splatting for Real-Time Radiance Field Rendering(论文中代码复现)

    3D Gaussian Splatting for Real-Time Radiance Field Rendering https://repo-sam.inria.fr/fungraph/3d-gaussian-splatting/ 主要研究方法是使用3D高斯光点绘制(3D Gaussian Splatting)方法进行实时光辐射场渲染。该方法结合了3D高斯场表示和实时可微分渲染器,通过优化3D高斯场的属性和密度控制,实现了高质

    2024年02月03日
    浏览(49)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包