前端WebRTC局域网1V1视频通话
基本概念
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;});});
});
使用
- 在文件目录运行命令：node server.mjs
- 修改信令服务器地址，浏览器打开 index.html
- 将 index.html 复制到另一台电脑上用浏览器打开
- 允许使用摄像头和麦克风，两边点击开始按钮即可
参考资料
WebRTC_API
前端使用WebRTC
相关文章：
前端WebRTC局域网1V1视频通话
基本概念 WebRTC（Web Real-Time Communications） 网络实时通讯，它允许网络应用或者站点，在不借助中间媒介的情况下，建立点对点（Peer-to-Peer）的连接，实现视频流和音频流或者其他任…...
设计模式之构建者模式
构建者模式（Builder） 定义 将一个复杂对象的构建与其表示分离，使得同样的构建过程可以创建不同的表示 使用场景 主要角色 产品 Product建造者接口 Builder具体的建造者 Concrete Builder指挥者 Director:组织构建过程 示例代码 Data p…...
【PCIe 链路训练】之均衡(equalization)
1、概述 这篇文章简单介绍一下PCIE phy的均衡原理和过程，USB phy，ethernet phy这些高速的串行serdes也有相同或者相似的结构。可以不用太关注其中的细节，等到debug的时候可以查询协议，但是需要了解这个故事讲的大概内容。整个equalization过程是controller和phy一起配合完成…...
P1059 [NOIP2006 普及组] 明明的随机数
题目描述 明明想在学校中请一些同学一起做一项问卷调查，为了实验的客观性，他先用计算机生成了 N 个 1 到 1000 之间的随机整数 (N≤100)，对于其中重复的数字，只保留一个，把其余相同的数去掉，不同的数对应着…...
【每日一问】Cookie、Session 和 Token 有什么区别？
Cookie、Session 和 Token 通常都是用来保存用户登录信息的技术，但三者有很大的区别，简单来说 Cookie 适用于简单的状态管理，Session 适用于需要保护用户敏感信息的场景，而 Token 适用于状态无关的身份验证和授权。 具体来说&…...
智能合约语言（eDSL）—— proc_macro实现合约init函数
我们通过属性宏来实现合约的init函数，call函数其实和init是类似的； GitHub - XuHugo/xwasm 构建属性宏，要在cargo.toml里面设置一些参数，这是必须的。一般来说，过程宏必须是一个库，或者作为工程的子库&…...
如何使用 ArcGIS Pro 制作三维地形图
伴随硬件性能的提高和软件算法的优化，三维地图的应用场景会越来越多，这里为大家介绍一下在ArcGIS Pro怎么制作三维地形图，希望能对你有所帮助。 数据来源 教程所使用的数据是从水经微图中下载的DEM和影像数据，除了DEM和影像数据…...
服务器配置禁止IP直接访问，只允许域名访问
联网信息系统需设置只允许通过域名访问，禁止使用IP地址直接访问，建议同时采用云防护技术隐藏系统真实IP地址且只允许云防护节点IP访问服务器，提升网络安全防护能力。 一、Nginx 修改配置文件nginx.conf，在server段里插入正则表达式…...
#14vue3生成表单并跳转到外部地址的方式
1、背景 后端返回的json数据中包含一个json数组，此数组中是目标跳转地址所需要的form表单的数据。 2、跳转前的页面 const goto () > {finish.value true;request.post(/xxx/yyy,{zzz: zzz.value}).then(res > {const url res.data.submitUrlconst params…...
航测管家：智能化革新航测作业流程
在信息时代的浪潮中，倾斜摄影作为一种高效的航测技术，对于城市规划、土地管理、环境监测等领域的重要性日益凸显。然而，航测作业中的数据管理和设备操作复杂性一直是行业面临的挑战。深圳赛尔智控推出的赛尔航测管家，凭借其智能化…...
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 常…...
数据结构从入门到精通——栈
栈 前言一、栈1.1栈的概念及结构1.2栈的实现1.3栈的面试题 二、栈的具体实现代码栈的初始化栈的销毁入栈出栈返回栈顶元素返回栈中的元素个数检测是否为空Stack.hStack.ctest.c 前言 栈，作为一种后进先出（LIFO）的数据结构，在计算…...
webhook详解
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 webhook简介 在当今高度连接的网络世界中,没有什么可以孤立地发挥最佳作用。完成一项任务(几乎)总是需要多个实体的参与。电子商务应用程序需要与支付系统通信,支付…...
用 ChatGPT 帮自己修英文简历 — UI/UX 设计师篇
用 ChatGPT 帮自己修英文简历 — UI/UX 设计师篇 之所以能写这篇文章，主要是我本身是 AI 工具的重度使用者，在工作上目前大量依赖 GitHub Copilot 与 ChatGPT 等工具，所以算是有一些心得可以分享。我自己觉得要能发挥这类工具最大的效用&…...
2402. 2-SAT 问题（tarjan，2-SAT模板题）
活动 - AcWing 给定 n 个还未赋值的布尔变量 x1∼xn。 现在有 m 个条件，每个条件的形式为 “xi 为 0/1 或 xj 为 0/1 至少有一项成立”，例如 “x1 为 1 或 x3 为 0”、“x8 为 0 或 x4 为 0” 等。 现在，请你对这 n 个布尔变量进行赋值&am…...
基于java+springboot+vue实现的宠物健康咨询系统（文末源码+Lw）23-206
摘 要 本宠物健康咨询系统分为管理员还有用户两个权限，管理员可以管理用户的基本信息内容，可以管理公告信息以及宠物健康知识信息，能够与用户进行相互交流等操作，用户可以查看宠物健康知识信息，可以查看公告以及查看…...
品牌如何玩转饥饿营销？媒介盒子分享
饥饿营销是许多品牌都会用的策略，从“限定发售”、“先到先得”、“季节限定”、“专属VIP”等都属于饥饿营销的范畴，为什么饥饿营销屡试不爽，原因就在于人们面对同等的收益和损失时，损失会令他们更加难以接受。今天媒介盒子就来和…...
Vue3：ref和reactive实现响应式数据
一、情景说明 在Vue2中，我们已经知道数据的响应式，是什么含义 就是，在data块中，定义的变量，在页面中引用后 任何地方修改了该变量，页面中引用的变量会立即显示最新数值。 这块，我们学习了 插值…...
二维码门楼牌管理系统应用场景：商业与零售业发展的助推器
文章目录 前言一、二维码门楼牌管理系统的基本功能二、商业和零售业中的应用场景三、二维码门楼牌管理系统的优势分析四、结论 前言 在数字化时代的浪潮中，二维码门楼牌管理系统凭借其独特的优势，正在逐步成为商业和零售业发展的新宠。它不仅能够为商家…...
【Linux进阶之路】网络 —— “?“ (下)
文章目录 前言一、概念铺垫1.TCP2.全双工 二、网络版本计算器1. 原理简要2. 实现框架&&代码2.1 封装socket2.2 客户端与服务端2.3 封装与解包2.4 请求与响应2.5 对数据进行处理2.6 主程序逻辑 3.Json的简单使用 总结尾序 前言 在上文我们学习使用套接字的相关接口进行了…...
基于大模型的 UI 自动化系统
基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...
JavaScript 中的 ES|QL：利用 Apache Arrow 工具
作者：来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗？了解下一期 Elasticsearch Engineer 培训的时间吧！ Elasticsearch 拥有众多新功能，助你为自己…...
Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例
使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件，常用于在两个集合之间进行数据转移，如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model：绑定右侧列表的值&…...
vscode（仍待补充）
写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh？ debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...
【git】把本地更改提交远程新分支feature_g
创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...
3403. 从盒子中找出字典序最大的字符串 I
3403. 从盒子中找出字典序最大的字符串 I 题目链接：3403. 从盒子中找出字典序最大的字符串 I 代码如下： class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...
SpringTask-03.入门案例
一.入门案例 启动类： package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...
MySQL用户和授权
开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务： test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...
【Oracle】分区表
个人主页：Guiat 归属专栏：Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...
在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？
uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件，用于在原生应用中加载 HTML 页面： 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...