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

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

news 2026/1/26 3:48:12

提示：局域网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

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装（Encapsulation） 定义：将数据（属性）和操作数据的方法绑定在一起，通过访问控制符（private、protected、public）隐藏内部实现细节。示例： public …...

编程新知 2025/10/6 4:03:40

工业安全零事故的智能守护者：一体化AI智能安防平台

前言： 通过AI视觉技术，为船厂提供全面的安全监控解决方案，涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面，能够实现对应负责人反馈机制，并最终实现数据的统计报表。提升船厂…...

编程新知 2026/1/21 9:20:07

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础骨骼动画是 3D 计算机图形中常用的技术，它通过以下两个主要组件实现角色动画。骨骼系统 (Skeleton)：由层级结构的骨头组成，类似于人体骨骼蒙皮 (Mesh Skinning)：将模型网格顶点绑定到骨骼上，使骨骼移动…...

编程新知 2026/1/15 4:58:02

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一，概述 1. 目的将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本：2014.07； Kernel版本：Linux-3.10； 二，Uboot 1. sys_config.fex改动使能uart3(TX:PH00 RX:PH01)，并让boo…...

编程新知 2026/1/20 18:48:46

CppCon 2015 学习:Time Programming Fundamentals

Civil Time 公历时间特点： 共 6 个字段： Year（年）Month（月）Day（日）Hour（小时）Minute（分钟）Second（秒） 表示…...

编程新知 2025/11/29 18:42:46

对象回调初步研究

_OBJECT_TYPE结构分析在介绍什么是对象回调前，首先要熟悉下结构以我们上篇线程回调介绍过的导出的PsProcessType 结构为例，用_OBJECT_TYPE这个结构来解析它，0x80处就是今天要介绍的回调链表，但是先不着急，先把目光…...

编程新知 2026/1/22 9:31:03

React父子组件通信：Props怎么用？如何从父组件向子组件传递数据？

系列回顾： 在上一篇《React核心概念：State是什么？》中，我们学习了如何使用useState让一个组件拥有自己的内部数据（State），并通过一个计数器案例，实现了组件的自我更新。这很棒&#…...

编程新知 2025/9/6 3:35:30

大模型——基于Docker+DeepSeek+Dify ：搭建企业级本地私有化知识库超详细教程

基于Docker+DeepSeek+Dify ：搭建企业级本地私有化知识库超详细教程下载安装Docker Docker官网：https://www.docker.com/ 自定义Docker安装路径 Docker默认安装在C盘，大小大概2.9G，做这行最忌讳的就是安装软件全装C盘，所以我调整了下安装路径。新建安装目录：E:\MyS…...

编程新知 2026/1/22 20:48:45