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

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

news 2025/11/20 11:18:29

提示：局域网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版，一对多

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

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

美国加州房价数据分析01

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

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

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

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

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

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

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

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

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

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

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

循环和迭代

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

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

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

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

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

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

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

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

ChatGPT之父：奥尔特曼

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

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

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

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

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

systemverilog中的priority if

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

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

图像处理-Ch2-空间域的图像增强

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-命名约定

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

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

虚幻引擎反射机制

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

编程日记 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. 配置 第二步配置完成就可以访问&#xff1a;http://localhost…...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现，设计原则设计原则是设计模式的理论基石， 设计模式 在经典的设计模式分类中（如《设计模式：可复用面向对象软件的基础》一书中），总共有23种设计模式，分为三大类： 一、创建型模式（5种） 1. 单例模式（Sing…...

编程新知 2025/8/10 21:01:28

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

编程新知 2025/11/16 21:47:48

在Ubuntu中设置开机自动运行（sudo）指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

编程新知 2025/10/28 23:14:00

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

编程新知 2025/11/16 21:56:27

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

编程新知 2025/11/18 6:35:16

项目部署到Linux上时遇到的错误（Redis，MySQL，无法正确连接，地址占用问题）

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

编程新知 2025/11/17 21:10:03

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

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

安宝特案例丨Vuzix AR智能眼镜集成专业软件，助力卢森堡医院药房转型，赢得辉瑞创新奖

在Vuzix M400 AR智能眼镜的助力下&#xff0c;卢森堡罗伯特舒曼医院&#xff08;the Robert Schuman Hospitals, HRS&#xff09;凭借在无菌制剂生产流程中引入增强现实技术&#xff08;AR&#xff09;创新项目&#xff0c;荣获了2024年6月7日由卢森堡医院药剂师协会&#xff0…...

编程新知 2025/11/16 21:57:18

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

编程新知 2025/11/17 10:39:39

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师（题目+回答）

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...

编程新知 2025/11/17 9:54:41