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

前端WebRTC局域网1V1视频通话

news 2025/7/31 0:09:28

基本概念

WebRTC（Web Real-Time Communications）

网络实时通讯，它允许网络应用或者站点，在不借助中间媒介的情况下，建立点对点（Peer-to-Peer）的连接，实现视频流和音频流或者其他任意数据的传输

NAT（Network Address Translation）

网络地址转换协议，用来给私网设备映射一个公网的 IP 地址

STUN（Session Traversal Utilities for NAT）

会话穿透，通过NAT找到公网地址进行P2P通信

TURN（Traversal Using Relay around NAT）

中继转发，当STUN不可用时，通过TURN转发音视频数据，显然这样是开销最大的
开源STUN&TURN服务器：coturn

ICE（Interactive Connectivity Establishment）

交互式连接建立，即网络信息
candidate：候选，优先级为：局域网、STUN、TURN

SDP（Session Description Protocol）

会话描述协议，即媒体信息，不是音视频流，在WebRTC中分为offer和answer

Signaling Server

信令服务器，用来交换ICE和SDP信息，WebRTC未做规定，自己选择实现技术，比如WebSocket

局域网视频通信

局域网不需要STUN/TURN服务器，只需信令服务器，这里使用Node.js ws库实现

效果

在这里插入图片描述

代码

客户端 index.html
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>WebRTC Demo</title><style>button {margin: 1rem;}video {width: 300px;}</style>
</head><body><div><div>信令服务器地址：<input id="inputServer" value="ws://192.168.205.165:8888" /><button onclick="start()">开始</button></div><video id="localVideo" autoplay muted></video><video id="remoteVideo" autoplay muted></video></div><script>const inputServer = document.querySelector("#inputServer");const remoteVideo = document.querySelector("#remoteVideo");const localVideo = document.querySelector("#localVideo");let peerConn;let webSocket;let localStream;// 打开本地摄像头navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then((mediaStream) => {localStream = mediaStream;localVideo.srcObject = mediaStream;}).catch((err) => {console.error(err);});// 创建WebRTC连接peerConn = new RTCPeerConnection();peerConn.addEventListener('icecandidate', (event) => {if (event.candidate) {webSocket.send(JSON.stringify({type: "ice",candidate: event.candidate}));}});peerConn.addEventListener("track", (event) => {remoteVideo.srcObject = event.streams[0];});function start() {// 连接信令服务器webSocket = new WebSocket(inputServer.value);webSocket.addEventListener('open', () => {webSocket.send(JSON.stringify({type: "join"}));});// 收到服务端消息webSocket.addEventListener('message', (event) => {const msg = JSON.parse(event.data);console.log(msg);switch (msg.type) {case "sendOffer":peerConn.addTrack(localStream.getVideoTracks()[0], localStream);peerConn.createOffer({ offerToReceiveAudio: true, offerToReceiveVideo: true }).then((offer) => {peerConn.setLocalDescription(offer).then(() => {webSocket.send(JSON.stringify(offer));})});break;case "offer":peerConn.addTrack(localStream.getVideoTracks()[0], localStream);peerConn.setRemoteDescription(msg).then(() => {peerConn.createAnswer().then((answer) => {peerConn.setLocalDescription(answer).then(() => {webSocket.send(JSON.stringify(answer));})})});break;case "answer":peerConn.setRemoteDescription(msg);break;case "ice":peerConn.addIceCandidate(msg.candidate);break;default:}});webSocket.addEventListener('close', () => {console.log("websocket close");});}</script>
</body></html>
服务端 server.mjs
import { WebSocketServer } from 'ws';const wss = new WebSocketServer({ port: 8888 });let clients = []; // 已连接的客户端wss.on('connection', function connection(ws) {ws.on('message', function message(rawData) {const data = rawData.toString();const obj = JSON.parse(data);console.log("type", obj.type);switch (obj.type) {case "join":if (clients.length < 2) {clients.push(ws);if (clients.length === 2) {clients[0].send(JSON.stringify({ type: "sendOffer" }));}} else {console.log("room is full");}break;case "offer":clients[1].send(data);break;case "answer":clients[0].send(data);break;case "ice":clients.forEach((item) => {if (item !== ws) {item.send(data);}})break;default:}});ws.on('error', (err) => console.error("error:", err));ws.on('close', (code) => {console.log("ws close", code);clients = clients.filter((item) => {if (item === ws) {item = null;return false;}return true;});});
});

使用

  1. 在文件目录运行命令：node server.mjs
  2. 修改信令服务器地址，浏览器打开 index.html
  3. 将 index.html 复制到另一台电脑上用浏览器打开
  4. 允许使用摄像头和麦克风，两边点击开始按钮即可

参考资料

WebRTC_API
前端使用WebRTC

相关文章：

前端WebRTC局域网1V1视频通话

基本概念 WebRTC&#xff08;Web Real-Time Communications&#xff09; 网络实时通讯&#xff0c;它允许网络应用或者站点&#xff0c;在不借助中间媒介的情况下&#xff0c;建立点对点&#xff08;Peer-to-Peer&#xff09;的连接&#xff0c;实现视频流和音频流或者其他任…...

编程日记 2024/3/8 20:21:51

设计模式之构建者模式

构建者模式&#xff08;Builder&#xff09; 定义 将一个复杂对象的构建与其表示分离&#xff0c;使得同样的构建过程可以创建不同的表示 使用场景 主要角色 产品 Product建造者接口 Builder具体的建造者 Concrete Builder指挥者 Director:组织构建过程 示例代码 Data p…...

编程日记 2024/3/8 20:20:50

【PCIe 链路训练】之均衡(equalization)

1、概述 这篇文章简单介绍一下PCIE phy的均衡原理和过程，USB phy，ethernet phy这些高速的串行serdes也有相同或者相似的结构。可以不用太关注其中的细节，等到debug的时候可以查询协议，但是需要了解这个故事讲的大概内容。整个equalization过程是controller和phy一起配合完成…...

编程日记 2024/3/8 20:17:48

P1059 [NOIP2006 普及组] 明明的随机数

题目描述 明明想在学校中请一些同学一起做一项问卷调查&#xff0c;为了实验的客观性&#xff0c;他先用计算机生成了 N 个 1 到 1000 之间的随机整数 (N≤100)&#xff0c;对于其中重复的数字&#xff0c;只保留一个&#xff0c;把其余相同的数去掉&#xff0c;不同的数对应着…...

编程日记 2024/3/8 20:16:47

【每日一问】Cookie、Session 和 Token 有什么区别？

Cookie、Session 和 Token 通常都是用来保存用户登录信息的技术&#xff0c;但三者有很大的区别&#xff0c;简单来说 Cookie 适用于简单的状态管理&#xff0c;Session 适用于需要保护用户敏感信息的场景&#xff0c;而 Token 适用于状态无关的身份验证和授权。 具体来说&…...

编程日记 2024/3/8 20:12:43

智能合约语言（eDSL）—— proc_macro实现合约init函数

我们通过属性宏来实现合约的init函数&#xff0c;call函数其实和init是类似的&#xff1b; GitHub - XuHugo/xwasm 构建属性宏&#xff0c;要在cargo.toml里面设置一些参数&#xff0c;这是必须的。一般来说&#xff0c;过程宏必须是一个库&#xff0c;或者作为工程的子库&…...

编程日记 2024/3/8 20:08:39

如何使用 ArcGIS Pro 制作三维地形图

伴随硬件性能的提高和软件算法的优化&#xff0c;三维地图的应用场景会越来越多&#xff0c;这里为大家介绍一下在ArcGIS Pro怎么制作三维地形图&#xff0c;希望能对你有所帮助。 数据来源 教程所使用的数据是从水经微图中下载的DEM和影像数据&#xff0c;除了DEM和影像数据…...

编程日记 2024/3/8 20:07:38

服务器配置禁止IP直接访问，只允许域名访问

联网信息系统需设置只允许通过域名访问&#xff0c;禁止使用IP地址直接访问&#xff0c;建议同时采用云防护技术隐藏系统真实IP地址且只允许云防护节点IP访问服务器&#xff0c;提升网络安全防护能力。 一、Nginx 修改配置文件nginx.conf&#xff0c;在server段里插入正则表达式…...

编程日记 2024/3/8 20:01:32

#14vue3生成表单并跳转到外部地址的方式

1、背景 后端返回的json数据中包含一个json数组&#xff0c;此数组中是目标跳转地址所需要的form表单的数据。 2、跳转前的页面 const goto () > {finish.value true;request.post(/xxx/yyy,{zzz: zzz.value}).then(res > {const url res.data.submitUrlconst params…...

编程日记 2024/3/8 20:00:30

航测管家：智能化革新航测作业流程

在信息时代的浪潮中&#xff0c;倾斜摄影作为一种高效的航测技术&#xff0c;对于城市规划、土地管理、环境监测等领域的重要性日益凸显。然而&#xff0c;航测作业中的数据管理和设备操作复杂性一直是行业面临的挑战。深圳赛尔智控推出的赛尔航测管家&#xff0c;凭借其智能化…...

编程日记 2024/3/8 19:59:29

XXE-XML实体注入漏洞

目录 1.xml基础 1.1什么是xml 1.2xml文档结构 1.3 什么是DTD 1.4 什么是实体 1.5 什么是外部实体 2.xxe漏洞 2.1xxe漏洞基本介绍 2.2xxe漏洞的危害 经典漏洞案例分析 3.xxe漏洞挖掘和利用 3.1. 识别潜在的XML入口 3.2. 检查XML处理逻辑 3.3. 构造试探Payload 常…...

编程日记 2024/3/8 19:57:28

数据结构从入门到精通——栈

栈 前言一、栈1.1栈的概念及结构1.2栈的实现1.3栈的面试题 二、栈的具体实现代码栈的初始化栈的销毁入栈出栈返回栈顶元素返回栈中的元素个数检测是否为空Stack.hStack.ctest.c 前言 栈&#xff0c;作为一种后进先出&#xff08;LIFO&#xff09;的数据结构&#xff0c;在计算…...

编程日记 2024/3/8 19:56:27

webhook详解

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 webhook简介 在当今高度连接的网络世界中,没有什么可以孤立地发挥最佳作用。完成一项任务(几乎)总是需要多个实体的参与。电子商务应用程序需要与支付系统通信,支付…...

编程日记 2024/3/8 19:52:24

用 ChatGPT 帮自己修英文简历 — UI/UX 设计师篇

用 ChatGPT 帮自己修英文简历 — UI/UX 设计师篇 之所以能写这篇文章&#xff0c;主要是我本身是 AI 工具的重度使用者&#xff0c;在工作上目前大量依赖 GitHub Copilot 与 ChatGPT 等工具&#xff0c;所以算是有一些心得可以分享。我自己觉得要能发挥这类工具最大的效用&…...

编程日记 2024/3/8 19:49:21

2402. 2-SAT 问题（tarjan，2-SAT模板题）

活动 - AcWing 给定 n 个还未赋值的布尔变量 x1∼xn。 现在有 m 个条件&#xff0c;每个条件的形式为 “xi 为 0/1 或 xj 为 0/1 至少有一项成立”&#xff0c;例如 “x1 为 1 或 x3 为 0”、“x8 为 0 或 x4 为 0” 等。 现在&#xff0c;请你对这 n 个布尔变量进行赋值&am…...

编程日记 2024/3/8 19:47:19

基于java+springboot+vue实现的宠物健康咨询系统（文末源码+Lw）23-206

摘 要 本宠物健康咨询系统分为管理员还有用户两个权限&#xff0c;管理员可以管理用户的基本信息内容&#xff0c;可以管理公告信息以及宠物健康知识信息&#xff0c;能够与用户进行相互交流等操作&#xff0c;用户可以查看宠物健康知识信息&#xff0c;可以查看公告以及查看…...

编程日记 2024/3/8 19:46:18

品牌如何玩转饥饿营销？媒介盒子分享

饥饿营销是许多品牌都会用的策略&#xff0c;从“限定发售”、“先到先得”、“季节限定”、“专属VIP”等都属于饥饿营销的范畴&#xff0c;为什么饥饿营销屡试不爽&#xff0c;原因就在于人们面对同等的收益和损失时&#xff0c;损失会令他们更加难以接受。今天媒介盒子就来和…...

编程日记 2024/3/8 19:44:16

Vue3：ref和reactive实现响应式数据

一、情景说明 在Vue2中&#xff0c;我们已经知道数据的响应式&#xff0c;是什么含义 就是&#xff0c;在data块中&#xff0c;定义的变量&#xff0c;在页面中引用后 任何地方修改了该变量&#xff0c;页面中引用的变量会立即显示最新数值。 这块&#xff0c;我们学习了 插值…...

编程日记 2024/3/8 19:42:14

二维码门楼牌管理系统应用场景：商业与零售业发展的助推器

文章目录 前言一、二维码门楼牌管理系统的基本功能二、商业和零售业中的应用场景三、二维码门楼牌管理系统的优势分析四、结论 前言 在数字化时代的浪潮中&#xff0c;二维码门楼牌管理系统凭借其独特的优势&#xff0c;正在逐步成为商业和零售业发展的新宠。它不仅能够为商家…...

编程日记 2024/3/8 19:40:12

【Linux进阶之路】网络 —— “?“ (下)

文章目录 前言一、概念铺垫1.TCP2.全双工 二、网络版本计算器1. 原理简要2. 实现框架&&代码2.1 封装socket2.2 客户端与服务端2.3 封装与解包2.4 请求与响应2.5 对数据进行处理2.6 主程序逻辑 3.Json的简单使用 总结尾序 前言 在上文我们学习使用套接字的相关接口进行了…...

编程日记 2024/3/8 19:38:10

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

编程新知 2025/6/15 5:36:36

高危文件识别的常用算法：原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

编程新知 2025/7/30 11:18:40

Neo4j 集群管理：原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档，本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石，用于构建高可用、可扩展且一致的图数据库服务…...

编程新知 2025/7/4 0:49:28

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

编程新知 2025/7/29 9:22:51

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

编程新知 2025/7/7 22:33:57

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

编程新知 2025/7/9 2:49:50

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

编程新知 2025/7/28 23:35:14

uniapp 字符包含的相关方法

在uniapp中&#xff0c;如果你想检查一个字符串是否包含另一个子字符串&#xff0c;你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的&#xff0c;但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...

编程新知 2025/7/9 20:53:30

【Linux】自动化构建-Make/Makefile

前言 上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客 本来我们将一个对于编译来说很重要的工具&#xff1a;make/makfile 1.背景 在一个工程中源文件不计其数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;mak…...

编程新知 2025/7/29 15:07:45

【Linux手册】探秘系统世界：从用户交互到硬件底层的全链路工作之旅

目录 前言 操作系统与驱动程序 是什么&#xff0c;为什么 怎么做 system call 用户操作接口 总结 前言 日常生活中&#xff0c;我们在使用电子设备时&#xff0c;我们所输入执行的每一条指令最终大多都会作用到硬件上&#xff0c;比如下载一款软件最终会下载到硬盘上&am…...

编程新知 2025/7/30 17:28:21