当前位置： 首页 > article >正文

WebRTC通话原理与入门难度实战指南

article 2025/6/8 17:51:01
  • 波煮的实习公司主要是音视频业务，所以最近在补习WebRTC的相关内容，会不定期给大家分享学习心得和笔记。

    文章目录

    • WebRTC通话原理
      • 进行媒体协商：彼此要了解对方支持的媒体格式
      • 网络协商：彼此要了解对方的网络情况，这样才有可能找到一条相互通讯的链路
        • STUN
        • TURN
        • 媒体协商+网络协商数据的交换通道
      • 信令服务器
      • WebRTC APIs
    • 打开摄像头
    • web端的websocket
    • 打开摄像头和麦克风代码案例

WebRTC通话原理

  • WebRTC（Web 实时通信）是一种使 Web 应用程序和站点能够捕获和选择性地流式传输音频或视频媒体，以及在浏览器之间交换任意数据的而无需中间件的技术。WebRTC 的一系列标准使得在不需要用户安装插件或任何其他第三方软件的情况下，可以实现点对点数据共享和电话会议。

进行媒体协商：彼此要了解对方支持的媒体格式

  • 注：有一个专门的协议，称为Session Description Protocol(SDP)，可用于描述上述这类信息，在WebRTC中，参与视频通讯的双方必须先交换SDP信息，这样双方才能知根知底，而交换SDP的过程，也称为“媒体协商”

网络协商：彼此要了解对方的网络情况，这样才有可能找到一条相互通讯的链路

  • candidate
  • 获取外网IP地址映射
  • 通过信令服务器(signal server)交换网络信息。
    • 实际情况是：我们的电脑和电脑之间或大或小都是在某个局域网中，需要NAT(Network Address Translation，网络地址转换)
    • 在解决WebRTC使用过程中的上述问题的时候，我们需要用到STUN和TURN

STUN

  • (Session Traversal Utilities for NAT，NAT会话穿越应用程序)是一种网络协议，它允许位于NAT（或多重NAT）后的客户端找出自己的公网地址，查出自己位于哪种类型的NAT之后以及NAT为某一个本地端口所绑定的Internel端端口。这些信息被用来在两个同时处于NAT路由器之后的主机之间创建UDP通信，该信息由RFC 5389定义。
  • STUN做的事情就是：告诉我你的公网IP地址+端口是什么，搭建STUN服务器很简单，媒体流传输室按照P2P的方式。

TURN

  • TURN的全称为(Traversal Using Relays around NAT)，是STUN/RFC5389的一个拓展，主要添加了Relay功能，如果终端在NAT之后，那么在特定的情景下，有可能使得终端无法和其对等端(peer)进行直接的通信，这是就需要公网的服务器作为一个中继，对来往的数据进行转发，这个转发的协议就被定义为TURN。

媒体协商+网络协商数据的交换通道

  • 需要一个信令服务器(Signal server)转发彼此的媒体信息和网络信息。
    在这里插入图片描述

信令服务器

  • 信令服务器不只是交互，媒体信息sdp和网络信息candidate，比如：
    • 房间管理
    • 人员进出房间

WebRTC APIs

  • MediaStream：MediaStream用来表示一个媒体数据流（通过getUserMedia接口获取），允许你访问输入设备，如麦克风和Web摄像机，该API允许从其中任意一个获取媒体流。
    - RTCPeerConnection：RTCPeerConnection对象允许用户在两个浏览器之间直接通讯，你可以通过网络将捕获的音频和视频流实时发送到另一个WebRTC端点，使用这些API，你可以在本地机器和远程对等点之间创建连接。它提供了连接到远程对等点、维护和监视连接以及在不再需要连接时关闭连接的方法。

打开摄像头

  1. 初始化button、video组件
  2. 绑定“打开摄像头”响应事件onOpenCamera
  3. 如果要打开摄像头则点击“打开摄像头”按钮，以触发onOpenCanmer事件的调用
  4. 当触发onOpenCanmera调用时：
  5. 设置约束条件，即是getUserMedia函数的入参
    2. getUserMedia有两种情况：一种是正常打开摄像头，使用handleSuccess处理；一种是打开摄像头失败，使用handleError处理
  6. 当正常打开摄像头时，则将getUserMedia返回的stream对象赋值给video空间的srcObject即可将视频显示出来

web端的websocket

  • 为了建立一个WebSocket连接，客户端浏览器首先要向服务器发起一个HTTP请求，这个请求和通常的HTTP请求不同，包含了一些附加头信息，其中附加头信息Upgrade:WebSocket表明这是一个申请协议升级的HTTP请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的WebSocket连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在知道客户端或者服务器端的某一方主动的关闭连接。

打开摄像头和麦克风代码案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>摄像头与麦克风测试</title></head><body><video id="localVideo" src="" autoplay controls></video><button id="showVideo">打开摄像头</button><button id="showAudio">打开麦克风</button><audio id="localAudio" controls autoplay></audio><script>function onOpenCamera() {navigator.mediaDevices.getUserMedia({video: {width: 640,height: 480,},audio: false,}).then(onhandleSuccess).catch(onhandleError);}// 打开麦克风逻辑function onOpenMic() {navigator.mediaDevices.getUserMedia({video: false,audio: true,}).then(onhandleAudioSuccess).catch(onhandleAudioError);}// 摄像头成功处理（未修改）function onhandleSuccess(stream) {console.log("打开摄像头成功");const video = document.querySelector("#localVideo");video.srcObject = stream;}// 麦克风成功处理function onhandleAudioSuccess(stream) {console.log("打开麦克风成功");const audio = document.querySelector("#localAudio"); // 现在能正确获取元素audio.srcObject = stream;}// 异常处理function onhandleError(error) {console.error("打开摄像头失败", error);}function onhandleAudioError(error) {console.error("打开麦克风失败", error);}// 按钮事件绑定const showVideo = document.querySelector("#showVideo");showVideo.addEventListener("click", onOpenCamera); // 使用修正后的函数名const showAudio = document.querySelector("#showAudio"); // 改为正确的idshowAudio.addEventListener("click", onOpenMic);</script></body>
</html>

相关文章：

WebRTC通话原理与入门难度实战指南

波煮的实习公司主要是音视频业务&#xff0c;所以最近在补习WebRTC的相关内容&#xff0c;会不定期给大家分享学习心得和笔记。 文章目录 WebRTC通话原理进行媒体协商&#xff1a;彼此要了解对方支持的媒体格式网络协商&#xff1a;彼此要了解对方的网络情况&#xff0c;这样才…...

编程日记 2025/6/8 17:51:01

N元语言模型 —— 一文讲懂！！！

目录 引言 一. 基本知识 二.参数估计 三.数据平滑 一.加1法 二.减值法/折扣法 ​编辑 1.Good-Turing 估计 ​编辑 2.Back-off (后备/后退)方法 3.绝对减值法 ​编辑4.线性减值法 5.比较 三.删除插值法(Deleted interpolation) 四.模型自适应 引言 本章节讲的…...

编程日记 2025/6/8 17:49:58

.NET 9中的异常处理性能提升分析：为什么过去慢，未来快

一、为什么要关注.NET异常处理的性能 随着现代云原生、高并发、分布式场景的大量普及&#xff0c;异常处理&#xff08;Exception Handling&#xff09;早已不再只是一个冷僻的代码路径。在高复杂度的微服务、网络服务、异步编程环境下&#xff0c;服务依赖的外部资源往往不可…...

编程日记 2025/6/8 17:48:53

Mac 安装git心路历程（心累版）

省流版&#xff1a;直接安装Xcode命令行工具即可&#xff0c;不用安Xcode。 git下载官网 第一部分 上网初步了解后&#xff0c;打算直接安装Binary installer&#xff0c;下载完安装时&#xff0c;苹果还阻止安装&#xff0c;只好在“设置–安全性与隐私”最下面的提示进行安…...

编程日记 2025/6/8 17:47:49

计算机网络第2章（下）：物理层传输介质与核心设备全面解析

目录 一、传输介质1.1 传输介质的分类1.2 导向型传输介质1.2.1 双绞线&#xff08;Twisted Pair&#xff09;1.2.2 同轴电缆&#xff08;Coaxial Cable&#xff09;1.2.3 光纤&#xff08;Optical Fiber&#xff09;1.2.4 以太网对有线传输介质的命名规则 1.3 非导向型传输介质…...

编程日记 2025/6/8 17:46:47

Qt Creator 11.0创建ROS2 Humble工程

Qt Creator 11.0创建ROS2 Humble项目工程 安装ROSProjectManager插件创建ROS2项目在src下添加packagegit clone ROS2功能包编译运行安装ROSProjectManager插件 安装ROSProjectManager的主要流程参考官方的流程，地址（ros_qtc_plugin）。 此处采用二进制安装： sudo apt inst…...

编程日记 2025/6/8 17:45:45

C# 类和继承(扩展方法)

扩展方法 在迄今为止的内容中&#xff0c;你看到的每个方法都和声明它的类关联。扩展方法特性扩展了这个边 界&#xff0c;允许编写的方法和声明它的类之外的类关联。 想知道如何使用这个特性&#xff0c;请看下面的代码。它包含类MyData&#xff0c;该类存储3个double类型 的…...

编程日记 2025/6/8 17:44:43

机器学习复习3--模型的选择

选择合适的机器学习模型是机器学习项目成功的关键一步。这通常不是一个一蹴而就的过程&#xff0c;而是需要综合考虑多个因素&#xff0c;并进行实验和评估。 1. 理解问题本质 这是模型选择的首要步骤。需要清晰地定义试图解决的问题类型&#xff1a; 监督学习 : 数据集包含…...

编程日记 2025/6/8 17:42:20

MySQL复杂SQL（多表联查/子查询）详细讲解

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 MySQL复杂SQL&#xff08;多表联查/子查询&a…...

编程日记 2025/6/8 17:41:16

STM32使用土壤湿度传感器

1.1 介绍&#xff1a; 土壤湿度传感器是一种传感装置&#xff0c;主要用于检测土壤湿度的大小&#xff0c;并广泛应用于汽车自动刮水系统、智能灯光系统和智能天窗系统等。传感器采用优质FR-04双料&#xff0c;大面积5.0 * 4.0厘米&#xff0c;镀镍处理面。 它具有抗氧化&…...

编程日记 2025/6/8 17:40:14

在C++中，头文件（.h或.hpp）的标准写法

目录 1.头文件保护&#xff08;Include Guards&#xff09;2.包含必要的标准库头文件3.前向声明&#xff08;Forward Declarations&#xff09;4.命名空间5.注释示例1&#xff1a;基础头文件示例2&#xff1a;包含模板和内联函数的头文件示例3&#xff1a;C11风格的枚举类头文件…...

编程日记 2025/6/8 17:37:42

Axios学习笔记

Axios简介 axios前端异步请求库类似JQuery ajax技术&#xff0c; ajax用来在页面发起异步请求到后端服务&#xff0c;并将后端服务响应数据渲染到页面上&#xff0c; jquery推荐ajax技术&#xff0c;但vue里面并不推荐在使用jquery框架&#xff0c;vue推荐使用axios异步请求库。…...

编程日记 2025/6/8 17:36:36

Langchain学习笔记(十一)：Chain构建与组合技巧

注&#xff1a;本文是Langchain框架的学习笔记&#xff1b;不是教程&#xff01;不是教程&#xff01;内容可能有所疏漏&#xff0c;欢迎交流指正。后续将持续更新学习笔记&#xff0c;分享我的学习心得和实践经验。 前言 在LangChain的发展过程中&#xff0c;API设计经历了重…...

编程日记 2025/6/8 17:35:06

【判断既约分数】2022-4-3

缘由既约分数&#xff0c;除了辗转相除法-编程语言-CSDN问答 void 判断既约分数() {int a 1, b 2020, aa b, y 2, gs 0;while (aa){while (a < b){while (y < a && y < aa)if (a%y 0 && aa%y 0)a, y 2;elsey;if (a < b)gs; else;a, y 2;…...

编程日记 2025/6/8 17:34:05

Windows平台RTSP/RTMP播放器C#接入详解

大牛直播SDK在Windows平台下的RTSP、RTMP播放器模块&#xff0c;基于自研高性能内核&#xff0c;具备极高的稳定性与行业领先的超低延迟表现。相比传统基于FFmpeg或VLC的播放器实现&#xff0c;SmartPlayer不仅支持RTSP TCP/UDP自动切换、401鉴权、断网重连等网络复杂场景自适应…...

编程日记 2025/6/8 17:33:03

深圳SMT贴片工艺优化关键步骤

内容概要 深圳SMT贴片工艺优化作为现代电子制造的核心环节&#xff0c;聚焦于提升生产精度与稳定性。其技术框架围绕三大核心维度展开&#xff1a;温度动态调控、设备协同适配与工艺缺陷预判。通过精密温度曲线控制系统&#xff0c;实现回流焊环节的热能梯度精准匹配&#xff…...

编程日记 2025/6/8 17:32:02

从 JDK 8 到 JDK 17：Swagger 升级迁移指南

点击上方“程序猿技术大咖”&#xff0c;关注并选择“设为星标” 回复“加群”获取入群讨论资格&#xff01; 随着 Java 生态向 JDK 17 及 Jakarta EE 的演进&#xff0c;许多项目面临从 JDK 8 升级的挑战&#xff0c;其中 Swagger&#xff08;API 文档工具&#xff09;的兼容性…...

编程日记 2025/6/8 17:30:59

配置git命令缩写

以下是 Git 命令缩写的配置方法及常用方案&#xff0c;适用于 Linux/macOS/Windows 系统&#xff1a; &#x1f527; 一、配置方法 1. 命令行设置&#xff08;推荐&#xff09; # 基础命令缩写 git config --global alias.st status git config --global alias.co che…...

编程日记 2025/6/8 17:29:53

Redis 缓存问题及其解决方案

1. 缓存雪崩 概念&#xff1a;缓存雪崩是指在缓存层出现大范围缓存失效或缓存服务器宕机的情况下&#xff0c;大量请求直接打到数据库&#xff0c;导致数据库压力骤增&#xff0c;甚至可能引发数据库宕机。 影响&#xff1a;缓存雪崩会导致系统性能急剧下降&#xff0c;甚至导…...

编程日记 2025/6/8 17:28:33

使用 Coze 工作流一键生成抖音书单视频：全流程拆解与技术实现

使用 Coze 工作流一键生成抖音书单视频&#xff1a;全流程拆解与技术实现&#xff08;提供工作流&#xff09; 摘要&#xff1a;本文基于一段关于使用 Coze 平台构建抖音爆火书单视频的详细讲解&#xff0c;总结出一套完整的 AI 视频自动化制作流程。内容涵盖从思路拆解、节点配…...

编程日记 2025/6/8 17:27:27

【发布实录】云原生+AI，助力企业全球化业务创新

5 月 22 日&#xff0c;在最新一期阿里云「飞天发布时刻」&#xff0c;阿里云云原生应用平台产品负责人李国强重磅揭晓面向 AI 场景的云原生产品体系升级&#xff0c;通过弹性智能的一体化架构、开箱即用的云原生 AI 能力&#xff0c;为中国企业出海提供新一代技术引擎。 发布会…...

编程日记 2025/6/8 17:26:24

vue中的派发事件与广播事件，及广播事件应用于哪些场景和一个表单验证例子

在 Vue 2.X 中&#xff0c;$dispatch 和 $broadcast 方法已经被废弃。官方认为基于组件树结构的事件流方式难以理解&#xff0c;并且在组件结构扩展时容易变得脆弱。因此&#xff0c;Vue 2.X 推荐使用其他方式来实现组件间的通信&#xff0c;例如通过 $emit 和 $on 方法&#x…...

编程日记 2025/6/8 17:25:22

DeepSeek 赋能智能养老：情感陪伴机器人的温暖革新

目录 一、引言二、智能养老情感陪伴机器人的市场现状与需求2.1 市场现状2.2 老年人情感陪伴需求分析 三、DeepSeek 技术详解3.1 DeepSeek 的技术特点3.2 与其他类似技术的对比优势 四、DeepSeek 在智能养老情感陪伴机器人中的具体应用4.1 自然语言处理与对话交互4.2 情感识别与…...

编程日记 2025/6/8 17:24:19

LabVIEW主轴故障诊断案例

LabVIEW 开发主轴机械状态识别与故障诊断系统&#xff0c;适配工业场景主轴振动监测需求。通过整合品牌硬件与软件算法&#xff0c;实现从信号采集到故障定位的全流程自动化&#xff0c;为设备维护提供数据支撑&#xff0c;提升数控机床运行可靠性。 ​ 面向精密制造企业数控机…...

编程日记 2025/6/8 17:23:15

gRPC 的四种通信模式完整示例

gRPC 的四种基本通信模式&#xff0c;包括完整的 .proto 文件定义和 Go 语言实现代码&#xff1a; 1. 简单 RPC (Unary RPC) - 请求/响应模式 客户端发送单个请求&#xff0c;服务端返回单个响应 calculator.proto protobuf syntax "proto3";package calculato…...

编程日记 2025/6/8 17:22:13

C#中Struct与IntPtr转换：实用扩展方法

C#中Struct与IntPtr转换&#xff1a;实用扩展方法 在 C# 编程的世界里&#xff0c;我们常常会遇到需要与非托管代码交互&#xff0c;或者进行一些底层内存操作的场景。这时&#xff0c;IntPtr类型就显得尤为重要&#xff0c;它可以表示一个指针或句柄&#xff0c;用来指向非托…...

编程日记 2025/6/8 17:21:03

Web安全：XSS、CSRF等常见漏洞及防御措施

Web安全&#xff1a;XSS、CSRF等常见漏洞及防御措施 一、XSS&#xff08;跨站脚本攻击&#xff09; 定义与原理 XSS攻击指攻击者将恶意脚本&#xff08;如JavaScript、HTML标签&#xff09;注入到Web页面中&#xff0c;当用户访问该页面时&#xff0c;脚本在浏览器端执行&…...

编程日记 2025/6/8 17:19:50

Java基础之数组（附带Comparator）

文章目录 基础概念可变参数组数组与ListComparator类1,基本概念2,使用Comparator的静态方法&#xff08;Java 8&#xff09;3,常用Comparator方法4,例子 排序与查找数组复制其他 基础概念 int[] anArray new int[10];只有创建对象时才会使用new关键字&#xff0c;所以数组是个…...

编程日记 2025/6/8 17:18:11

计算机组成与体系结构：补码数制二（Complementary Number Systems）

目录 4位二进制的减法 补码系统 &#x1f9e0;减基补码 名字解释&#xff1a; 减基补码有什么用&#xff1f; 计算方法 ❓为什么这样就能计算减基补码 &#x1f4a1; 原理揭示&#xff1a;按位减法&#xff0c;模拟总减法&#xff01; 那对于二进制呢&#xff1f;&…...

编程日记 2025/6/8 17:17:03

C#使用MindFusion.Diagramming框架绘制流程图(2):流程图示例

上一节我们初步介绍MindFusion.Diagramming框架 C#使用MindFusion.Diagramming框架绘制流程图(1):基础类型-CSDN博客 这里演示示例程序: 新建Windows窗体应用程序FlowDiagramDemo,将默认的Form1重命名为FormFlowDiagram. 右键FlowDiagramDemo管理NuGet程序包 输入MindFusio…...

编程日记 2025/6/8 17:15:56