构建WebRTC技术需要的后端服务

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

  • 📢欢迎点赞 :👍 收藏 ⭐留言 📝 如有错误敬请指正,赐人玫瑰,手留余香!
  • 📢本文作者:由webmote 原创
  • 📢作者格言:新的征程,我们面对的不是技术而是人心,人心不可测,海水不可量,唯有技术,才是深沉黑夜中的一座闪烁的灯塔 !

构建WebRTC技术需要的后端服务,音视频技术,webrtc

序言

当下直播界最炙手可热的技术,WebRTC应该时其中之一,而想在此技术领域登堂入室,确实有很多的知识和积累需要熟悉和学习,作为一个技术新手,怎么从懵懂到会用再到理解内涵而会心一笑,确实是挺难的一件事情。

也许我们永远也无法企及大师的项背,但有一点可以坚信,只要我们努力去学习,会使用这个最简单而直接的要求肯定能达到。

1. WebRTC技术

WebRTC(Web实时通信)是一种开放标准和技术,用于在Web浏览器之间实现实时通信,包括音频、视频和数据传输。它是由Google推出的,并得到了其他大型技术公司的支持和采用,目前众多的浏览器都已经支持WebRTC了,因此其应用也越来越多。

WebRTC的主要特点包括:

  1. 实时通信:WebRTC允许实时的音频、视频和数据传输,使用户可以通过浏览器直接进行语音和视频通话,而无需其他插件或软件。

  2. 网页集成:WebRTC可以直接集成到Web浏览器中,通过JavaScript API进行操作,无需下载或安装额外的应用程序。

  3. 点对点通信:WebRTC支持点对点(peer-to-peer)通信,这意味着数据可以直接在两个浏览器之间传输,而无需通过中间服务器。这种直接的通信方式可以提高速度和减少延迟。

  4. 安全性:WebRTC使用安全的传输协议(如SRTP)来保护音频和视频通信的隐私和安全性。它还支持加密和身份验证,确保通信的机密性和完整性。

  5. 开放标准:WebRTC是一个开放的标准,由W3C和IETF进行标准化和规范化。这意味着它是一个公开的技术,并且可以被广泛采用和支持。

WebRTC技术的特点使其在在线会议、远程协作、客户支持和实时通信应用中得到广泛应用。它提供了一种简单、便捷和安全的方式来进行实时通信,为用户提供了更好的体验和互动性。

2. 信令服务

虽然WebRTC支持点对点通信,但它仍然需要服务器,以便客户端可以交换元数据,通过称为信令的过程协调通信,并处理网络地址转换器(NAT)和防火墙。

这里我们主要介绍如何构建信令服务,以及如何处理与 STUN 和 TURN 服务器进行实际连接的行为。当然它还解释了WebRTC应用程序如何处理多方呼叫并与VoIP和PSTN(也称为电话)等服务进行交互。

如果您不熟悉WebRTC的基础知识,请在阅读本文之前参阅WebRTC入门。

那么,什么是信令呢?

信令是协调通信的过程。

为了使WebRTC应用程序能够配置呼叫,其客户端需要交换以下信息:

  • 用于打开或关闭通信的会话控制消息
  • 错误消息
  • 多媒体元数据,例如编解码器、编解码器设置、带宽和媒体类型
  • 用于建立安全连接的关键数据
  • 网络数据,例如外界看到的主机的 IP 地址和端口

此信令过程需要和客户端来回传递消息,该机制不是由WebRTC API实现的,您需要亲自构建它。

2.1 为什么WebRTC没有定义信令?

为了避免冗余并最大限度地与现有技术兼容,WebRTC标准没有指定信令方法和协议。

JavaScript 会话建立协议 (JSEP) 概述了此方法:

WebRTC呼叫背后的思想是完全指定和控制媒体,尽可能将信令留给应用程序。理由是不同的应用程序可能更喜欢使用不同的协议,例如现有的 SIP 或 Jingle 呼叫信令协议,或者针对特定应用程序自定义的内容。

JSEP 的体系结构还避免了浏览器必须保存状态,即充当信号状态机的功能。例如,如果每次重新加载页面时都会丢失信令数据,这将是一个问题。相反,信令状态可以保存在服务器上,这样看起来架构就更完美了,下图是JSEP体系架构。

构建WebRTC技术需要的后端服务,音视频技术,webrtc

JSEP 要求新的的交换在提问者offer 和 回答者answer之间, 即上面提到的媒体元数据。OfferAnswer以会话描述协议 (SDP) 格式传达,如下所示:

v=0
o=- 7614219274584779017 2 IN IP4 127.0.0.1
s=-
t=0 0
a=group:BUNDLE audio video
a=msid-semantic: WMS
m=audio 1 RTP/SAVPF 111 103 104 0 8 107 106 105 13 126
c=IN IP4 0.0.0.0
a=rtcp:1 IN IP4 0.0.0.0
a=ice-ufrag:W2TGCZw2NZHuwlnf
a=ice-pwd:xdQEccP40E+P0L5qTyzDgfmW
a=extmap:1 urn:ietf:params:rtp-hdrext:ssrc-audio-level
a=mid:audio
a=rtcp-mux
a=crypto:1 AES_CM_128_HMAC_SHA1_80 inline:9c1AHz27dZ9xPI91YNfSlI67/EMkjHHIHORiClQe
a=rtpmap:111 opus/48000/2

想知道所有这些SDP胡言乱语实际上意味着什么吗?可以查看互联网工程任务组 (IETF) 示例。

请记住,WebRTC的设计使得在通过编辑SDP文本中的值设置为本地或远程描述之前可以调整offeranswer。例如,appr.tc 中的函数可用于设置默认编解码器和比特率。

SDP用JavaScript操作起来有些痛苦,并且有关于WebRTC的未来版本是否应该使用JSON的讨论,但是坚持使用SDP也有一些优点。

2.2 Alice呼叫Eve

当Alice想要呼叫Eve时,使用WebRTC的过程大致如下:

  1. Alice打开她的Web浏览器,并通过getUserMedia方法获取她的音频和视频流。这将启动她的摄像头和麦克风。

  2. Alice创建一个RTCPeerConnection对象,这是WebRTC中用于建立对等连接的主要对象。

  3. Alice将她的本地流(音频和视频)添加到RTCPeerConnection对象中。

  4. Alice创建一个数据通道(Data Channel),这是用于在对等连接之间传输任意数据的通道。数据通道可以用于发送文本消息、文件等。

  5. Alice为数据通道设置消息接收的回调函数,以便在收到来自Eve的消息时进行处理。

  6. Alice创建一个offer(邀请),其中包含她的媒体信息和网络配置。这个offer描述了Alice希望与Eve建立连接的条件。

  7. Alice将她的本地描述(offer)设置为RTCPeerConnection的本地描述。

  8. Alice通过信令服务器将她的本地描述发送给Eve。信令服务器充当中介,帮助Alice和Eve交换网络配置和媒体信息。

  9. Eve收到Alice的本地描述,并创建一个RTCPeerConnection对象。

  10. Eve将她的本地流(音频和视频)添加到RTCPeerConnection对象中。

  11. Eve将Alice的本地描述设置为她的RTCPeerConnection的远程描述。

  12. Eve创建一个answer(回答),其中包含她的媒体信息和网络配置。这个answer是对Alice的offer的回应。

  13. Eve将她的本地描述(answer)设置为RTCPeerConnection的本地描述。

  14. Eve通过信令服务器将她的本地描述发送给Alice。

  15. Alice收到Eve的本地描述,并将其设置为她的RTCPeerConnection的远程描述。

  16. Alice和Eve的RTCPeerConnection对象之间开始进行ICE(Interactive Connectivity Establishment)协商,以确定最佳的网络连接路径。

  17. 一旦ICE协商完成,Alice和Eve之间的对等连接建立成功,他们可以通过数据通道交换消息、音频和视频。

总的来说,WebRTC通过使用RTCPeerConnection对象和信令服务器来协调双方之间的通信,使Alice能够呼叫Eve并建立实时的音视频通信。

JSEP 支持 ICE Candidate Trickling,它允许呼叫者在初始报价后以增量方式向被呼叫者提供候选人,并允许被呼叫者开始对呼叫执行操作并建立连接,而无需等待所有候选人到达。

2.3 使用信令

看下代码,如下:

// handles JSON.stringify/parse
const signaling = new SignalingChannel();
const constraints = {audio: true, video: true};
const configuration = {iceServers: [{urls: 'stun:stun.example.org'}]};
const pc = new RTCPeerConnection(configuration);

// Send any ice candidates to the other peer.
pc.onicecandidate = ({candidate}) => signaling.send({candidate});

// Let the "negotiationneeded" event trigger offer generation.
pc.onnegotiationneeded = async () => {
  try {
    await pc.setLocalDescription(await pc.createOffer());
    // send the offer to the other peer
    signaling.send({desc: pc.localDescription});
  } catch (err) {
    console.error(err);
  }
};

// After remote track media arrives, show it in remote video element.
pc.ontrack = (event) => {
  // Don't set srcObject again if it is already set.
  if (remoteView.srcObject) return;
  remoteView.srcObject = event.streams[0];
};

// Call start() to initiate.
async function start() {
  try {
    // Get local stream, show it in self-view, and add it to be sent.
    const stream =
      await navigator.mediaDevices.getUserMedia(constraints);
    stream.getTracks().forEach((track) =>
      pc.addTrack(track, stream));
    selfView.srcObject = stream;
  } catch (err) {
    console.error(err);
  }
}

signaling.onmessage = async ({desc, candidate}) => {
  try {
    if (desc) {
      // If you get an offer, you need to reply with an answer.
      if (desc.type === 'offer') {
        await pc.setRemoteDescription(desc);
        const stream =
          await navigator.mediaDevices.getUserMedia(constraints);
        stream.getTracks().forEach((track) =>
          pc.addTrack(track, stream));
        await pc.setLocalDescription(await pc.createAnswer());
        signaling.send({desc: pc.localDescription});
      } else if (desc.type === 'answer') {
        await pc.setRemoteDescription(desc);
      } else {
        console.log('Unsupported SDP type.');
      }
    } else if (candidate) {
      await pc.addIceCandidate(candidate);
    }
  } catch (err) {
    console.error(err);
  }
};

更多详细的代码,可以参看一个例子程序。

2.4 发现对方

这是一种奇特的提问方式,我如何找到可以交谈的人?

对于电话呼叫,您有电话号码和目录。对于在线视频聊天和消息传递,您需要身份和状态管理系统,以及用户启动会话的方法。WebRTC应用程序需要一种方法,让客户端相互发出信号,表明他们想要开始或加入通话。

对等发现机制不是由WebRTC定义的,该过程可以像通过电子邮件发送或消息传递 URL 一样简单。对于视频聊天应用(如对讲和浏览器会议),您可以通过共享自定义链接来邀请他人加入通话。

2.5 如何构建信令服务

重申一下,信令协议和机制不是由WebRTC标准定义的

无论您选择什么,都需要一个中间服务器在客户端之间交换信令消息和应用程序数据。可悲的是,网络应用程序不能简单地对互联网大喊:“将我连接到我的朋友!”

值得庆幸的是,信令消息很小,主要在通话开始时交换。在视频聊天会话的测试中,信令服务总共处理了大约 30-45 条消息,所有消息的总大小约为 10KB。

除了在带宽方面相对不要求外,WebRTC信令服务不会消耗太多的处理或内存,因为它们只需要中继消息并保留少量会话状态数据,例如连接了哪些客户端。

2.6 将消息从服务器推送到客户端

用于信令的消息服务必须是双向的:客户端到服务器和服务器到客户端。

双向通信违背了HTTP客户端/服务器请求/响应模型,但是多年来已经开发了各种技术黑客行为,例如长轮询,以便将数据从Web服务器上运行的服务推送到浏览器中运行的Web应用程序。

最近,EventSource API 已被广泛实现。这将启用服务器发送的事件 - 通过 HTTP 从 Web 服务器发送到浏览器客户端的数据。 专为单向消息传递而设计,但它可以与 XHR 结合使用,以构建用于交换信令消息的服务。信令服务通过向被叫方推送消息来传递来自呼叫方的消息,该消息由 XHR 请求传递。

WebSocket 是一种更自然的解决方案,专为全双工客户端-服务器通信而设计 - 可以同时在两个方向上流动的消息。使用纯 WebSocket 或服务器发送的事件, 构建的信令服务的一个优点是,这些 API 的后端可以在各种 Web 框架上实现,这些框架是大多数 Web 托管包(如 PHP、Python 和 Ruby)通用的。

当然,也可以通过让WebRTC客户端通过Ajax反复轮询消息传递服务器来处理信令,但这会导致大量冗余的网络请求,这对于移动设备来说尤其成问题。即使在建立会话后,对等方也需要轮询信令消息,以防其他对等方更改或会话终止。

2.7 现成的信令服务器

如果你不想自己动手,有几个WebRTC信令服务器可用,它们使用 Socket.IO ,并与WebRTC客户端JavaScript库集成:

  • webRTC.io 是WebRTC最早的抽象库之一。
  • Signalmaster是为与SimpleWebRTC JavaScript客户端库一起使用而创建的信令服务器。

如果你根本不想写任何代码,可以从vLine,OpenTok和Asterisk等公司获得完整的商业WebRTC平台。文章来源地址https://www.toymoban.com/news/detail-556496.html

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

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

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

相关文章

  • 5G时代音视频开发前景怎么样?音视频开发需要掌握哪些技术?(1),手把手教你5G时代Webview的正确使用姿势

    你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。 我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你

    2024年04月11日
    浏览(59)
  • 前端Vue Node.js + Express + MongoDB 构建的后端服务API接口

    构建一个使用 Vue.js 作为前端, Node.js + Express + MongoDB 作为后端服务的全栈应用涉及到多个步骤。这里简要概述整个过程,并提供一些基本的代码示例来帮助你开始。 安装 MongoDB: 根据你的操作系统从 MongoDB 官网 下载并安装 MongoDB。 启动 MongoDB 服务: 安装完成后,根据 MongoDB 的

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

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

    2023年04月09日
    浏览(62)
  • WebRTC音视频原理

    WebRTC,网页即时通讯(Web Real-Time Communication),是直接在 Web 浏览器内驱动实时通信(语音、视频和任意数据)方法的API。它于2011年6月1日开源并在Google、Mozilla、Opera支持下被纳入万维网联盟的W3C推荐标准,并于 2011 年标准化,是谷歌开源的一款产品。 WebRTC 实现了浏览器快速

    2023年04月08日
    浏览(73)
  • 【WebRTC】音视频通信

    WebRTC对等体还需要查找并交换本地和远程音频和视频媒体信息,例如分辨率和编解码器功能。 交换媒体配置信息的信令通过使用被称为SDP的会话描述协议格式来交换,被称为提议和应答的元数据块 一方发起调用 getUserMedia 打开本地摄像头 媒体协商(信令交换,媒体协商主要

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

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

    2024年02月12日
    浏览(62)
  • WebRTC实战-第二章-使用WebRTC实现音视频通话

    、 什么是WebRTC|WebRTC入门到精通必看|快速学会音视频通话原理|WebRTC超全资料分享FFmpeg/rtmp/hls/rtsp/SRS WebRTC **WebRTC详细指南** http://www.vue5.com/webrtc/webrtc.html WEBRTC三种类型(Mesh、MCU 和 SFU)的多方通信架构 WebRTC API包括媒体捕获,音频和视频编码和解码,传输层和会话管理 。 假设

    2023年04月12日
    浏览(53)
  • mediasoup webrtc音视频会议搭建

    拉下源码: https://github.com/versatica/mediasoup-demo 源码里有以下目录其中,app网页的界面终端,broadcasters是广播,也就是他支持我们用ffmpeg推流上去给所有的成员广播,server是流媒体服务器。 源码包含了,https服务器用于浏览器获取界面,信令服务器用于房间管理,和流媒体服务

    2024年02月05日
    浏览(45)
  • webRTC一对一音视频对话

    环境 阿里云操作系统: ubuntu 18.4 amd         注意:安全组一定添加对应的入口端口 nodejs -v 18.19.0 npm -v 10.2.3 需要安装的库 package.json 服务器端         webRTC一定要使用https服务器,如果没有ssl证书,可以使用自制证书         1.创建HTTPS服务器                 使用soc

    2024年01月19日
    浏览(60)
  • WebRTC音视频通话-WebRTC推拉流过程中日志log输出

    WebRTC音视频通话-WebRTC推拉流过程中日志log输出 之前实现iOS端调用ossrs服务实现推拉流流程。 推流:https://blog.csdn.net/gloryFlow/article/details/132262724 拉流:https://blog.csdn.net/gloryFlow/article/details/132417602 在推拉流过程中的WebRTC的相关日志log输出可以看到一些相关描述信息。在WebRTC日志

    2024年02月10日
    浏览(61)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包