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

webrtc学习----前端推流拉流，局域网socket版，一对多

news 2025/9/16 4:39:13

提示：局域网socket版，一对多

文章目录

- @[TOC](文章目录)
前言
一、教程
二、webrtc工作流程
三、推流端
四、拉流
五、socket服务
六、效果
七、备注
总结

前言

WebRTC（Web Real-Time Communication）是一种实时通讯技术，允许网络应用或站点在不借助中间媒介的情况下，建立浏览器之间的点对点（Peer-to-Peer）连接，实现视频流、音频流或其他任意数据的传输。WebRTC的核心功能包括音视频的采集、编解码、网络传输和显示等

WebRTC的技术特点
1、实时通信：WebRTC专注于实时通信，包括音频、视频和其他数据传输。
2、点对点通信：WebRTC支持点对点通信，即两个浏览器之间直接建立连接，无需通过中间服务器。
3、多媒体引擎：WebRTC包含一个多媒体引擎，处理音频和视频流，并提供丰富的API和协议。
4、NAT穿越：WebRTC提供机制，使得在NAT（Network Address Translation）和防火墙等网络设备背后进行通信更为容易。
5、TURN服务器：当P2P连接无法建立时，WebRTC会利用TURN服务器进行数据中转，确保通信的稳定性

一、教程

webrtc文档

二、webrtc工作流程

// 推流拉流过程
/*** 推流端获取视频stream* 推流端生成offer  * 推流端通过offer设置推流LocalDescription* 推流端发送offer给(拉)流端* (拉)流端接收offer* (拉)流端通过offer设置(拉)流端RemoteDescription* (拉)流端生成answer* (拉)流端通过answer设置(拉)流端LocalDescription* (拉)流端发送answer给推流端* 推流端接收answer设置推流端RemoteDescription* 推流端发送candidate(video,audio各一次)* (拉)流端接收candidate* (拉)流端发送candidate(video,audio各一次)* 推流端接收candidate* **/

三、推流端

一个拉流RTCPeerConnection，对应一个推流RTCPeerConnection
X 个拉流RTCPeerConnection，对应X 个推流RTCPeerConnection

push.html

<!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="webrtcVideo" autoplay></video><script>const video = document.getElementById('webrtcVideo');// webscoketconst ws = new WebSocket('ws://127.0.0.1:1990'); // 可换成局域网ip地址let videoStream;// 一个拉流RTCPeerConnection对应一个推流RTCPeerConnection，xx个拉流RTCPeerConnection，对应xx个推流RTCPeerConnectionconst pushPool = {};// rtc connectionlet pushRtcCon;// 打开摄像头，video标签播放视频流const getStream = async () => {if(!navigator.mediaDevices||!navigator.mediaDevices.getUserMedia)console.log('不支持：getUserMedia');const stream = await navigator.mediaDevices.getUserMedia({video:true});video.srcObject = stream;videoStream = stream;}getStream();// 开始推流const startPush = (pullId) => {if(!pushPool[pullId])pushPool[pullId] = pushRtcCon = new RTCPeerConnection();// rtc connection 添加trackvideoStream.getVideoTracks().forEach(track => {pushRtcCon.addTrack(track,videoStream);});// 监听icecandidatepushRtcCon.onicecandidate = (event)=>{if(event.candidate)ws.send(JSON.stringify({type:'candidate',candidate:event.candidate,id:pullId}))}// 创建offerpushRtcCon.createOffer().then(offer=>{console.log(offer)// 设置推流LocalDescriptionpushRtcCon.setLocalDescription(offer).then(()=>{ console.log('推流设置LocalDescription成功');});// offer信息发送给拉流ws.send(JSON.stringify({type:'offer',id:pullId,offer}))});}// 开启websocket服务ws.addEventListener('open',()=>{// 初始化推流通道ws.send(JSON.stringify({type:'push_init'}))console.log('websocket连接成功')});// 接收wenbscoket信息ws.addEventListener('message', (event) => {let data = JSON.parse(event.data);console.log(data)// 接收到拉流传来的answer 设置推流RemoteDescriptionif(data.type == 'answer')pushRtcCon.setRemoteDescription(data.answer).then(()=>{ console.log('推流设置RemoteDescription成功');});// 接收拉流candidate 推流rtc connection 添加IceCandidateif(data.type == 'candidate'&&data.candidate)pushRtcCon.addIceCandidate(data.candidate).then(()=>{ console.log('推流添加candidate成功');});// 接收拉流开启消息 开始推流if(data.type == 'pull_start')startPush(data.id);})</script>
</body>
</html>

四、拉流

pull.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><video id="pullVideo" autoplay preload muted></video><div id="pullBtn">拉流</div><script>const pullBtn = document.getElementById('pullBtn');// 开始拉流const startPll = () =>{let ws = new WebSocket('ws://127.0.0.1:1990'); // 可换成局域网ip地址const pullVideo = document.getElementById('pullVideo');let pullStrem;// 拉流rtc connectionconst pullRtcCon = new RTCPeerConnection();const pullID = new Date().getTime()+'io'+Math.round(Math.random()*10000);// 拉流监听icecandidatepullRtcCon.onicecandidate = (event)=>{// 接收到icecandidate  发送candidate给推流端if(event.candidate)ws.send(JSON.stringify({type:'candidate',candidate:event.candidate,num:1,id:pullID}))}// 监听trackpullRtcCon.addEventListener('track' ,(event) => {pullStrem = event.streams[0];pullVideo.srcObject = event.streams[0];})// 打开webscoketws.addEventListener('open',async ()=>{await ws.send(JSON.stringify({type:'pull_init',id:pullID}));// 通知推流端，开始推流ws.send(JSON.stringify({type:'pull_start',id:pullID}));console.log('websocket连接成功')});// 监听webscoket消息ws.addEventListener('message',(event)=>{let data = JSON.parse(event.data);// 接收到推流端offerconsole.log(data,'????')if(data.type == 'offer'){// 设置拉流端 RemoteDescriptionpullRtcCon.setRemoteDescription(data.offer).then(()=>{console.log('拉流设置RemoteDescription成功')// 创建answerpullRtcCon.createAnswer(data.offer).then((answer)=>{// 设置拉流的LocalDescriptionpullRtcCon.setLocalDescription(answer).then(()=>{console.log('拉流设置LocalDescription成功')});// 发送answer到推流端ws.send(JSON.stringify({type:'answer',answer,id:pullID}))});});}// 接收推流端candidate  拉流端添加IceCandidateif(data.type == 'candidate')pullRtcCon.addIceCandidate(data.candidate).then(()=>{ console.log('拉流添加candidate成功');});})}// 拉流按钮点击事件pullBtn.addEventListener('click',startPll)</script>
</body>
</html>

五、socket服务

安装依赖

npm init
npm install nodejs-websocket -S

index.js

const ws = require('nodejs-websocket');
const port = '1990';// 推流通道  拉流通道
let wsPush,wsPull,pullPool={};
const server = ws.createServer((connection)=>{// websocket 连接接收数据connection.on('text',(msg)=>{let data = JSON.parse(msg);// 初始化推流websocketif(data.type == 'push_init')wsPush = connection;// 初始化拉流websocketif(data.type == 'pull_init')if(!pullPool[data.id]) pullPool[data.id] = connection;// 接收推流消息 发送给拉流if(connection == wsPush&&pullPool[data.id])pullPool[data.id].send(msg);// 接收拉流消息 发送给推流for(let key in pullPool){if(connection == pullPool[key]&&wsPush)wsPush.send(msg);}})// websocket 关闭connection.on('close',()=>{wsPush = null;wsPull = null;console.log('通道关闭')})// websocket 报错connection.on('err',(err)=>{wsPush = null;wsPull = null;console.log('通道报错：'+err)})
})
server.listen(port,console.log('ws启动成功，127.0.0.1:'+port));

六、效果

推流端
在这里插入图片描述
拉流端（点击拉流按钮）

七、备注

1、socket地址可换成局域网IP地址访问
2、pull来流请求地址可换成局域网IP地址访问

总结

踩坑路漫漫长@~@

webrtc学习----前端推流拉流，局域网socket版，一对多

提示：局域网socket版，一对多文章目录 [TOC](文章目录) 前言一、教程二、webrtc工作流程三、推流端四、拉流五、socket服务六、效果七、备注总结前言 WebRTC（Web Real-Time Communication）是一种实时通讯技术，允许网…...

编程日记 2024/12/25 11:27:40

美国加州房价数据分析01

1.项目简介本数据分析项目目的是分析美国加州房价数据，预测房价中值。环境要求： ancondajupyter notebookpython3.10.10 虚拟环境： pandas 2.1.1 numpy 1.26.1 matplotlib 3.8.0 scikit-learn1.3.1 2. 导入并探索数据集通用的数据分析…...

编程日记 2024/12/25 11:22:35

用Python开启人工智能之旅（四）深度学习的框架和使用方法

第四部分：深度学习的框架和使用方法用Python开启人工智能之旅（一）Python简介与安装用Python开启人工智能之旅（二）Python基础用Python开启人工智能之旅（三）常用的机器学习算法与实现用Pyt…...

编程日记 2024/12/25 11:18:31

两分钟解决：vscode卡在设置SSH主机，VS Code-正在本地初始化VSCode服务器

问题原因 remote-ssh还是有一些bug的，在跟新之后可能会一直加载初始化SSH主机解决方案 1.打开终端2.登录链接vscode的账号，到家目录下3.找到 .vscode-server文件,删掉这个文件4.重启 vscode 就没问题了...

编程日记 2024/12/25 11:15:28

信号仿真高级工程师面试题

信号仿真高级工程师面试题可能涵盖多个方面，旨在全面评估应聘者的专业知识、技能水平、实践经验和问题解决能力。以下是一些可能的面试题及其简要解析：一、专业知识与技能描述你对信号仿真的理解考察点：对信号仿真基本概念、原理及应用的掌握程度。参考答案：信号仿真是…...

编程日记 2024/12/25 11:11:22

循环和迭代

从更高层次的思维角度来看迭代和循环的区别： 哲学层面： 迭代体现了"螺旋上升"的发展理念，每次迭代都在前一次的基础上有所提升和改进循环体现了"周而复始"的概念，强调重复相同的过程思维方式&#xff1a…...

编程日记 2024/12/25 11:10:21

一个简单封装的的nodejs缓存对象

我们在日常编码中，经常会用到缓存，而一个有效的缓存管理，也是大家必不可少的工具。而nodejs没有内置专用的缓存对象，并且由于js的作用域链的原因，很多变量使用起来容易出错，如果用一个通用的缓存管理起来&a…...

编程日记 2024/12/25 11:09:19

【Rust自学】5.3. struct的方法(Method)

喜欢的话别忘了点赞、收藏加关注哦，对接下来的教程有兴趣的可以关注专栏。谢谢喵！(･ω･) 5.3.1. 什么是方法(Method) 方法和函数类似，也是用fn关键字进行声明，方法也有名称，也有参数&#xff…...

编程日记 2024/12/25 11:07:17

ChatGPT之父：奥尔特曼

奥尔特曼阿尔特曼一般指萨姆奥尔特曼，他是OpenAI的联合创始人兼首席执行官，被称为“ChatGPT之父”.以下是其具体介绍：个人经历 1985年4月22日出生于美国芝加哥，8岁学会编程，9岁拥有电脑，对信息技术和互联网产生兴趣.高中就读于约翰巴勒斯中学，后进入斯坦福大学主修计…...

编程日记 2024/12/25 11:06:16

如何在谷歌浏览器中设置桌面快捷方式

在日常使用电脑时，反复在浏览器中输入经常访问的网址不仅耗时，而且降低了工作效率。为了解决这一问题，我们可以通过在主屏幕上创建谷歌浏览器的快捷方式来简化操作。本文将详细介绍如何在Windows和Mac系统中实现这一功能。一、步骤概述 1. …...

编程日记 2024/12/25 11:05:15

systemverilog中的priority if

1 基本概念在 SystemVerilog 中，priority - if是一种条件判断结构。它和普通的if - else语句类似，但在条件评估和错误检查方面有自己的特点，主要用于按顺序评估多个条件，并且对不符合预期的情况进行报错。报错如下两点当所有条件…...

编程日记 2024/12/25 11:01:09

Ch2 空间域的图像增强文章目录 Ch2 空间域的图像增强Background灰度变换函数(Gray-level Transformation)对数变换(Logarithmic)幂律变换(Power-Law)分段线性变换函数(Piecewise-Linear)对比度拉伸(Contrast-Stretching)灰度级分层(Gray-level Slicing) 直方图处理(Histogram …...

编程日记 2024/12/25 10:59:07

css 编写注意-1-命名约定

编写按照可维护性、性能和可读性规则： 1.代码组织与结构层次清晰：使用模块化的结构，将样式分块组织。命名规范：采用统一的命名规则（如 BEM、SMACSS）以增强可读性。 /* BEM …...

编程日记 2024/12/25 10:58:05

虚幻引擎反射机制

在虚幻引擎中，反射系统是一种强大的机制，它允许开发者和引擎本身在运行时获取并操作类、对象、属性和方法的元信息。这个系统是基于UObject（Unreal Engine中所有支持反射的对象的基类）构建的，为游戏开发提供了极大的灵…...

编程日记 2024/12/25 10:56:02

Knife4j Swagger

1. 依赖 <dependency><groupId>com.github.xiaoymin</groupId><artifactId>knife4j-spring-boot-starter</artifactId><version>3.0.3</version></dependency>2. 配置第二步配置完成就可以访问：http://localhost…...

编程日记 2024/12/25 10:55:01

Xcode 16 编译弹窗问题、编译通过无法，编译通过打包等问题汇总

问题1：打包的过程中不断提示 ：codesign 想要访问你的钥匙串中的密钥“develop 或者distribution 证书” 解决：打开钥匙串，点击证书---显示简介---信任----改为始终信任 （记住 ：不能只修改钥匙的显示简介的…...

编程日记 2024/12/25 10:52:59

卷积神经网络入门指南：从原理到实践

目录 1 CNN的发展历史 2 CNN的基本原理 3 CNN核心组件 3.1 卷积操作基础 3.2 卷积层详解 3.3 高级卷积操作 3.3.1 分组卷积（Group Convolution） 3.3.2 深度可分离卷积（Depthwise Separable Convolution）： 3.3 池…...

编程日记 2024/12/25 10:51:58

eNSP安装教程（内含安装包）

通过网盘分享的文件：eNSP模拟器.zip 链接: https://pan.baidu.com/s/1wPmAr4MV8YBq3U5i3hbhzQ 提取码: tefj --来自百度网盘超级会员v1的分享 ！！！！解压后有四个文件，先安装Box，第二个安装cap&a…...

编程日记 2024/12/25 10:47:54

VBA技术资料MF244：利用VBA在图表工作表中创建堆积条形图

我给VBA的定义：VBA是个人小型自动化处理的有效工具。利用好了，可以大大提高自己的工作效率，而且可以提高数据的准确度。“VBA语言専攻”提供的教程一共九套，分为初级、中级、高级三大部分，教程是对VBA的系统讲解&#…...

编程日记 2024/12/25 10:44:50

【计算机网络安全】网络攻击

实验二网络攻击实验人员：第五组全体成员一、实验目的： 1：掌握ARP欺骗的原理，实践ARP欺骗的过程。 2：掌握TCP劫持的原理，实践TCP劫持的过程。 3：掌握DNS欺骗的原理，实践DN…...

编程日记 2024/12/25 10:43:47

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具，该工具基于TUN接口实现其功能，利用反向TCP/TLS连接建立一条隐蔽的通信信道，支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式，适应复杂网…...

编程新知 2025/9/15 0:18:51

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式，可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。使用 Xcode 命令行工具打包通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

编程新知 2025/8/31 7:31:14

逻辑回归：给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告（肿瘤大小、血液指标），你需要做出一个**决定性判断**：恶性还是良性？这种“非黑即白”的抉择，正是**逻辑回归（Logistic Regression）** 的战场&a…...

编程新知 2025/8/18 10:21:48

Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库，获取股票数据，并生成TabPFN这个模型可以识别、处理的格式，写一个完整的预处理示例，并构建一个预测未来 3 天股价涨跌的分类任务用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务，进行预测并输…...

编程新知 2025/9/12 10:25:58

UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中，UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

编程新知 2025/8/26 22:00:33

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人点击群设置下滑到群管理的机器人，点击进入添加机器人选择自定义Webhook服务点击添加设置安全设置，详见说明文档成功后，记录Webhook 2 API文档说明点击设置说明查看自…...

编程新知 2025/9/2 19:12:02

多模态图像修复系统：基于深度学习的图片修复实现

多模态图像修复系统：基于深度学习的图片修复实现 1. 系统概述本系统使用多模态大模型（Stable Diffusion Inpainting）实现图像修复功能，结合文本描述和图片输入，对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...

编程新知 2025/9/9 21:28:16

android13 app的触摸问题定位分析流程

一、知识点一般来说，触摸问题都是app层面出问题，我们可以在ViewRootImpl.java添加log的方式定位；如果是touchableRegion的计算问题，就会相对比较麻烦了，需要通过adb shell dumpsys input > input.log指令，且通过打印堆栈的方式，逐步定位问题，并找到修改方案。问题…...

编程新知 2025/9/13 22:02:41

Python 实现 Web 静态服务器（HTTP 协议）

目录一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1）下载安装包2）配置环境变量3）安装镜像4）node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1）使用 http-server2）详解 …...

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

tomcat指定使用的jdk版本

说明有时候需要对tomcat配置指定的jdk版本号，此时，我们可以通过以下方式进行配置设置方式找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...

编程新知 2025/6/10 21:11:28