webRTC技术篇

最新推荐文章于 2025-04-11 10:50:17 发布
最新推荐文章于 2025-04-11 10:50:17 发布
阅读量809 收藏 3
点赞数 1
分类专栏： html javaScript 文章标签： javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42543548/article/details/109292045
版权

webRTC运行机制

轨和流
  • Track
  • MediaStream
重要的类
  • MediaStream
  • RTCPeerConnection（媒体流传输）
  • RTCDataChannel（文本，文件等非视频文件流传输，通过 RTCPeerConnection 获取）

PeerConnection调用过程

调用时序图

WebRTC源码目录结构（一）

WebRTC源码目录结构（二）

WebRTC Modules 目录（一）

WebRTC Modules 目录（二）

webRTC使用

获取设备

WebRTC 获取设备方法

MediaStream类的方法

音视频采集Api

navigator.mediaDevices.getUserMedia

音视频采集API

getUserMedia适配

适配不同浏览器的方法

桌面数据采集

navigator.mediaDevices.getDisplayMedia(constraints)

WebRTC 桌面数据采集

约束

视频约束
  • width 宽
  • height 高
  • aspectRatio 宽高比例
  • frameRate 帧率
  • facingMode
    • user : 前置摄像头
    • environment : 后置摄像头
    • left : 前置左摄像头
    • right : 前置右摄像头
  • resizeMode 裁剪
音频约束
  • volume 音量
  • sampleRate 采集率（16000， 8000）
  • sampleSize 采集大小 （每个采集率右多大表示 16位 8位）
  • echoCancellation 是否消除回音
  • autoGainControl 是否增加基础音量
  • noiseSuppression 是否降噪
  • latency 延迟大小（控制在500ms之内）
  • channelCount 单双通道
  • deviceID 可以切换设备
  • groupID 物理设备

特效

对采集的音视频数据进行特效处理

MediaStream

  • MediaStream.addTrack() 添加媒体轨
  • MediaStream.removeTrack() 移除媒体轨
  • MediaStream.getVideoTracks() 拿到视频媒体轨
  • MediaStream.getAudioTracks() 拿到音频媒体轨
  • MediaStream.stop() 结束媒体流
事件
  • MediaStream.onaddtrack 添加轨 触发的事件
  • MediaStream.onremovetrack 移除轨 出发的事件
  • MediaStream.onended 结束 触发的事件

MediaRecoder

基本格式

var mideaRecorder = new MediaReacoder(stream [, option]);

参数说明
  • stream 媒体流， 可以从 getUserMedia、 <video>、 <audio> 、 <canvas> 获取
  • options 限制选项
    • mediatype 媒体流格式
      • video/webm
      • audio/webm
      • video/webm;codecs=vp8
      • video/webm;codecs=h264
      • audio/webm;codecs=opus
    • audioBitsPerSecond 音频码率
    • videoBitsPerSecond 视频码率
    • bitsPerSecond 整体码率
API
  • MediaRecorder.start(timeslice) 开始录制媒体， timeslice可选， 如果设置了会按照时间切片存储数据， 否则存储在一个buffer里
  • MediaRecorder.stop() 停止录制，会触发最终 Blob 数据的 dataavailable 事件
  • MediaRecorder.pause() 暂停录制
  • MediaRecorder.resume() 恢复录制
  • MediaRecorder.isTypeSupported( arg ) 是否支持参数里的格式
事件
  • MediaRecorder.ondataavailable 每次记录一定时间（与时间切片有关）的数据
  • MediaRecorder.onerror 当发生错误时，录制会停止

信令服务器

信令服务器的作用

信令服务器的作用

WebRTC传输基本知识

  • NAT (Network Address Translator) 各个设备组成的net
  • STUN (Simple Traversal of UDP Through NAT) 给要P2P连接的设备介绍的服务
  • TURN (Traversal Using Relays around NAT) 两台设备不能P2P连接，就是用服务器连接
  • ICE (Interactive Connectivity Establishment) 找到两台设备传输流的最佳连接

STUN

RFC STUN 规范
  • RFC3489/STUN Simple Traversal of UDP Through NAT
  • RFC5389/STUN Session Traversal Utilities for NAT (包含3489规范)
STUN 协议

  • 包括 20 字节的STUN header（下面时 3489 规范的组成）

    • 其中 2 个字节 （16 bit）类型

    • 2 个字节 （16 bit）消息长度， 不包括消息头

    • 16 个字节 （128bit） 事务ID, 请求与响应事务ID相同

    • 5389 规范 协议头组成

      • Magic Cookie 4 字节， 32 位， 固定值 0x2112A442

      STUN header 格式

  • Body 中可以有 0 个或者多个 Attribute

    • 每个属性进行 TLV 编码： Type，Length， Value

      TLV 格式

    • RFC3489 定义的属性

      RFC3489 属性

TURN

  • 目的是解决对称 NAT 无法穿越的问题
  • 建立在 STUN 之上， 消息格式使用 STUN 格式消息
  • TURN Client 要求服务器端分配一个公共的 IP 和 Port 用于接受数据
  • TURN 使用的传输协议
    • TURN Client to TURN server (UDP、 TCP、 TLS over TCP)
    • TURN server to peer (UDP)

TURN 实例

webRTC端对端实现互动

Peer 2 Peer 基本流程

RTCReerConnection类

格式

pc = new RTCPeerConnection([configuration]);

configuration 参数
  • iceServers stun/turn 服务(可多个)
    • credential: 凭证， 只有 TURN 服务使用
    • credentialType: 凭证类型可以 password 或 oauth
    • urls: 用于连接服务中的 url 数组
    • username: 用户名， 只有 TURN 服务使用
  • iceTransportPolicy 指定 ICE 传输策略
    • relay: 只使用中继候选者
    • all： 可以使用任何类型的候选者
  • bundlePolicy
    • Balanced: 音频与视频轨使用各自的传输通道
    • max-compat: 每个轨使用自己的传输通道
    • max-bundle: 都绑定到一个传输通道
  • rtcpMuxPolicy 在收集 ICE 候选者时使用
    • negotiate: 收集 RTCP 与 RTP 复用的 ICE 候选者， 如果 RTCP 能复用就与 RTP 复用， 如果不能复用，就讲它们音独使用
    • require： 只收集 RTCP 与 RTP 复用的 ICE 候选者， 如果 RTCP 不能复用， 则失败
  • peerIdentity 表示字符串
  • certificates 授权可以使用连接的一组证书
  • iceCandidatePoolSize 16 位的整数值， 用于指定预取的 ICE 候选者的个数。如果该值发生变化，它会触发重新收集候选者
方法分类
  • 媒体协商
    • createOffer
      • 基本格式： aPeomise = myPeerCOnnection.createOffer([options]);
      • Options 参数
        • iceRestart: 该选项会重启ICE， 重新进行 Candidate 收集
        • voiceActivityDetection: 是否开启静音检测， 默认开启
    • createAnswer
      • 基本格式: aPeomise = myPeerCOnnection.createAnswer([options]);
    • setLocalDescription
      • 基本格式： aPeomise = myPeerCOnnection.setLocalDescription(sessionDesscription);
    • setRemoteDescription
      • 基本格式： aPeomise = myPeerCOnnection.setRemoteDescription(sessionDesscription);

媒体协商过程

  • Stream/Track
    • addTrack
      • 基本格式: rtpSender = myPeerCOnnection.addTrack(track, stream…);
      • 参数：
        • track 添加到 RTCPeerConnection 中的媒体轨
        • stream 指定 track 所在的 stream
    • removeTrack
      • 基本格式: rtpSender = myPeerCOnnection.removeTrack(rtpSender);
  • 重要事件
    • onnegotiationneeded 协商事件 (需要协商时触发的事件)
    • onicecandidate 收到候选者事件
  • 传输相关方法
  • 统计相关方法

SDP

定义

SDP (Session Description Protocol) 它只是一种信息格式的描述标准，本身不属于传输协议，但是可以被其他传输协议用来交换必要的信息

规范
  • 会话层（全局）
    • 会话的名称与目的
    • 会话的存活时间
    • 会话中包括多个媒体层
  • 媒体层（局部）
    • 媒体格式
    • 传输协议
    • 传输IP和端口
    • 媒体负载类型

WebRTC 中的 SDP 组成

coTurn服务器配置

  • listening-port=3478 # 指定侦听端口
  • external-ip = xx.xx.xx.xx # 指定云主机的公网 IP 地址
  • user=aaaaa:bbbbb # 访问 stun/turn 服务器的用户名密码
  • realm = stun.xxx.cn # 域名

RTP Media

Receiver
  • getReceivers 获得一组 RTCRtpReceiver 对象， 用于接收数据
Sender
  • getSenders 获得一组RTCRtpSender 对象， 用于发送数据， 每个对下个对应一个媒体轨
WebRTC → WebRTC与直播相关原理
irainsa的博客
04-06 785
即时通信(IM)和实时通信(声网Agora.io)都是一套网络通信系统，其本质都是对信息进行转发，其最大的特点就是对信息传递的时间规定时通信(IM：Instant Messaging)：是一个实时通信系统，终端服务，允许两人或多人使用网络实时传输的文字消息、文件、语音与视频交流；本质是客户端与客户端进行消息的实时传递，技术基础就是基于Socket连接的实时数据读写按使用用途分为：企业即时通信和网站即时通信根据装载对象又可以分为手机即时通信和PC即时通信。
WebRTC｜用QOS技术做音视频质量性能优化
即构开发者博客
03-24 7208
随着GPT-4的发布，AI的风越吹越旺。GPT-4可以回答问题，可以写作，甚至可以基于一张草图生成html代码搭建一个网站。即构社区的一位开发者@倪同学就基于目前在研究的WebRTC QOS技术点对GPT-3.5跟GPT-4进行一场实验，ChatGPT会取代程序员还是成为最强辅助？
基于HTML5的webrtc技术浅析
04-11
WebRTC是基于浏览器的Web技术，而移动智 能终端的最大共同点是都具备浏览器，因此WebRTC 几乎可以同时覆盖所有的移动智能终端，用户无需安 装软件就可以进行视频通信。而WebRTC又是基于 HTML5标准的开源技术，因此在移动智能终端采用 WebRTC技术实现视频通信更为容易，且开发成本 低，绝大多数智能终端均可以使用并实现互通。
WebRTC技术
WitsMakeMen的专栏
12-12 2394
这是一段简单的代码,关于HTML5的WebRTC技术,主要描述了如何使用RTCPeerConnection的步骤. 代码地址: https://github.com/samdutton/simpl/blob/master/rtcpeerconnection/js/main.js Demo地址: http://www.simpl.info/rtcpeerconnection/
WebRTC 入门与实践（非常详细）从零基础入门到精通，看完这一篇就够了
最新发布
Libra1313的博客
04-11 1489
体验完 Demo 后，有必要再了解一下技术的发展历史、应用场景等，这些能让我们知道它为什么优秀，哪方面优秀，有哪些缺点等。WhatWebRTC（Web Real-Time Communication），一个可以让用户用自己流量实现音视频实时通信的框架（APIs），支持浏览器（Firefox、Chrome、safari）以及 iOS、Android 原生系统。
WebRTC基础介绍
ranweizheng的专栏
02-19 5332
WebRTC 全称为：Web Real-Time Communication。 它是为了解决 Web 端无法捕获音视频的能力，并且提供了 peer-to-peer（就是浏览器间）的视频交互。 WebRTC汇集了先进的实时通信技术，包括：先进的音视频编解码器（Opus和VP8/9），强制加密协议（SRTP和DTLS）和网络地址转换器（ICE＆STUN）。 根据最初的定义，WebRTC被指定为P...
WebRTC技术详解
华章IT官方博客
05-03 8302
随着4G的普及和5G技术的应用，实时音视频技术正在蓬勃发展。实时通信技术已经渗透到各行各业，支撑着人们的日常生活。在互联网领域，花椒、映客等直播平台吸引了大量的用户；在教育领域，通过实时直...
Web即时通信技术——WebRTC
qq_42241500的博客
01-23 4079
WebRTC（Web Real-Time Communication）是一个开放的项目，旨在在网页端提供实时的音频、视频和数据通信，不需要插件或其他附加软件。它是由Google主导，并在Mozilla、W3C和IETF等组织的支持下开发。WebRTC的目标是使浏览器成为实时通信的强大平台，支持点对点（peer-to-peer）通信。官方网址：https://webrtc.org/WebRTC中文网 https://webrtc.org.cnWebRTC官网 https://webrtc.org/
webrtc实现h5播放rtsp流
04-25
WebRTC（Web Real-Time Communication）是一项开放的技术标准，旨在实现浏览器之间的实时通信，无需插件或额外的软件。它在HTML5中得到了广泛的应用，尤其是对于视频会议、在线教育、实时协作等场景。本篇文章将深入...
使用WebRTC搭建前端视频聊天室——入门篇1
08-03
WebRTC（Web Real-Time Communication）是一项技术，旨在让浏览器具备实时通信的能力，无需依赖外部插件或服务器中转。这项技术由谷歌发起并开源，现在已被Chrome、Opera、Firefox等主流浏览器广泛支持。WebRTC的...
WebRTC技术探索：浏览器视频通信Demo汇集
"这篇文档是关于WebRTC的学习笔记和Demo收集，主要关注WebRTC在浏览器环境中的应用开发，包括JavaScript和HTML。文档作者探讨了WebRTC的发展历程，基础概念，并提到了相关的学习资源和API接口。" WebRTC，全称为Web...
CS_WebRTC_Conference_Server_Peer.v4.1.1
04-29
CS_WebRTC_Conference_Server_Peer.v4.1.1 用于端对端通信
Intel CS for WebRTC Desktop Sharing Extension-crx插件
03-25
语言:中文 (简体) 扩展以允许在用于WebRTC应用程序的Intel CS中进行桌面共享。 屏幕共享chrome扩展版本1.9更新域
webrtc 标准,官方文档
05-24
web rtc最新标准，真实可用，绝对可以。 欢迎下载web real time connecton.
WebRTC：实现实时通信的现代技术
你若盛开，清风自来
06-01 957
本文将介绍WebRTC的概念、优势和应用场景，以及如何在实际项目中使用WebRTC实现实时通信。WebRTC是一种现代技术，它允许网页浏览器之间进行实时通信。了解WebRTC的概念、优势和应用场景对于开发者来说具有重要意义。掌握WebRTC的使用可以帮助我们更高效地实现实时通信功能，提高用户体验和互动性。
WebRTC技术研究一入门
相见不如怀念
06-17 1188
一.WebRTC愿景 想象一下一个世界，您的电话，电视和计算机都可以在同一个平台上进行通信。想象一下，将视频聊天和对等数据共享添加到Web应用程序很容易。这就是WebRTC的愿景。 想尝试一下吗？WebRTC现在可在台式机和移动设备上的Google Chrome，Safari，Firefox和Opera中使用。一个很好的起点是位于appr.tc的简单视频聊天应用程序： 在浏览器中打开appr.tc。 单击加入按钮加入聊天室，然后让该应用使用您的网络摄像头。 在新标签页中打开页面底部显示的URL，或
WebRTC的技术原理和使用浅析
qinxun2008081的博客
06-29 2170
WebRTC的技术原理和使用浅析
关于WebRTC技术详解专栏
cosysun的专栏
05-27 968
一、前言 近几年WebRTC大热，不仅拉低了音视频的开发的门槛，而且还大有一统天下的趋势。本人有幸这几年一直在从事WebRTC的相关开发工作，对其略知一二，心理一直想着将自己所知所学的知识做一个系统化的总结，不过耐于技术实力有限，诚惶诚恐。最近这个想法越来越强烈，斗胆开个专栏，一来对自己的前路做个回顾总结，二来也希望对后来者有个抛砖引玉的作用就足矣。希望各位看官，勿要拍砖。 二、专栏大纲 对于大纲的设计，我想从最基础的概念入手，带领大家一步一步走进WebRTC的世界，所以大体分成以下几块 整个.
WebRTC相关技术预研总结
weixin_30307921的博客
08-28 160
1. Singling server - Peer 2. STUN/TURN server - coTurn 3. client lib - PeerJs 转载于:https://www.cnblogs.com/code-4-fun/p/4765497.html
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值