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

树莓派通过webRTC进行视频流传输到公网

news 2025/9/17 10:28:10

为了实现树莓派和浏览器之间的视频流传输，你需要在公网服务器上运行 Node.js 的信令服务器，同时在树莓派上运行 Node.js 客户端代码。以下是具体的步骤和说明：

1. 公网服务器

  • 安装 Node.js：在公网服务器上，你需要安装 Node.js 来运行信令服务器。
  • 信令服务器：信令服务器用于处理 WebRTC 连接的信令消息（如 SDP offer、SDP answer 和 ICE candidates）。这部分代码运行在公网服务器上。

2. 树莓派

  • 安装 Node.js：你也需要在树莓派上安装 Node.js，以便能够运行客户端代码。
  • 客户端代码：树莓派上运行的客户端代码将捕获摄像头的视频流，并通过 WebRTC 将其发送到浏览器。这部分代码会使用 Socket.IO 或其他库来与信令服务器进行通信。

具体步骤

1. 在公网服务器上

  1. 安装 Node.js：

    sudo apt-get update
sudo apt-get install -y nodejs npm

  2. 创建信令服务器（例如 server.js）：

    const express = require('express');
const http = require('http');
const socketIo = require('socket.io');const app = express();
const server = http.createServer(app);
const io = socketIo(server);app.use(express.static('public'));io.on('connection', (socket) => {console.log('A user connected');socket.on('offer', (offer) => {socket.broadcast.emit('offer', offer);});socket.on('answer', (answer) => {socket.broadcast.emit('answer', answer);});socket.on('candidate', (candidate) => {socket.broadcast.emit('candidate', candidate);});
});const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {console.log(`Server is running on port ${PORT}`);
});

  3. 启动信令服务器：

    node server.js
2. 在树莓派上

  1. 安装 Node.js：

    sudo apt-get update
sudo apt-get install -y nodejs npm

  2. 创建客户端项目（例如 client.js）：

    const io = require('socket.io-client');
const { exec } = require('child_process');const socket = io('http://<你的公网服务器IP>:3000');// WebRTC 连接
let peerConnection = new RTCPeerConnection({iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
});socket.on('offer', async (offer) => {await peerConnection.setRemoteDescription(new RTCSessionDescription(offer));const answer = await peerConnection.createAnswer();await peerConnection.setLocalDescription(answer);socket.emit('answer', answer);
});socket.on('answer', (answer) => {peerConnection.setRemoteDescription(new RTCSessionDescription(answer));
});socket.on('candidate', (candidate) => {peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
});// 开始摄像头流
function startCameraStream() {const cmd = "raspivid -o - -t 0 -vf -hf -n";  // 使用 raspivid 命令const ffmpeg = exec(`ffmpeg -re -i pipe: <your-pipe> -c:v copy -f mpegts udp://localhost:1234`);ffmpeg.stdout.on('data', (data) => {// 将视频流添加到 peerConnectionpeerConnection.addTrack(new MediaStream(data));});
}// 启动摄像头流
startCameraStream();

  3. 启动客户端：

    node client.js

html

当然，在前端 HTML 页面中，我们需要使用 WebRTC API 来显示来自树莓派摄像头的视频流。下面将提供完整的 HTML 页面代码，包括如何显示摄像头视频流。

更新后的 index.html

请在你的 public 文件夹中创建或更新 index.html 文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>WebRTC Camera Stream</title>
</head>
<body><h1>WebRTC Camera Stream</h1><video id="video" autoplay playsinline style="width: 100%; max-width: 800px;"></video><script src="/socket.io/socket.io.js"></script><script>const video = document.getElementById('video');const socket = io();const peerConnection = new RTCPeerConnection({iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]});peerConnection.onicecandidate = (event) => {if (event.candidate) {socket.emit('candidate', event.candidate);}};peerConnection.ontrack = (event) => {video.srcObject = event.streams[0];};async function startStream() {// 使用 WebRTC 从树莓派接收流const offer = await peerConnection.createOffer();await peerConnection.setLocalDescription(offer);socket.emit('offer', offer);}socket.on('offer', async (offer) => {await peerConnection.setRemoteDescription(new RTCSessionDescription(offer));const answer = await peerConnection.createAnswer();await peerConnection.setLocalDescription(answer);socket.emit('answer', answer);});socket.on('answer', (answer) => {peerConnection.setRemoteDescription(new RTCSessionDescription(answer));});socket.on('candidate', (candidate) => {peerConnection.addIceCandidate(new RTCIceCandidate(candidate));});// 启动视频流startStream();</script>
</body>
</html>

代码说明

  • <video> 标签：用于显示实时视频流，设置为 autoplay 和 playsinline，使其在移动设备上正常播放。
  • ontrack 事件：当接收到流时，将其设置为视频元素的源（srcObject），这样就能够显示来自树莓派的视频。
  • 信令过程：使用 Socket.IO 进行信令交换，确保能顺利建立 WebRTC 连接。

运行项目

  1. 确保你的公网服务器和树莓派都在运行相应的 Node.js 代码（信令服务器和客户端）。
  2. 在浏览器中访问公网服务器的 IP 地址（例如 http://<你的公网服务器IP>:3000），你应该能够看到树莓派摄像头的实时视频流。

额外注意事项

  • 网络连接：确保树莓派和浏览器都能成功连接到公网服务器。
  • 防火墙设置：如果出现连接问题，检查防火墙设置，确保相关端口开放。
  • SSL/TLS：在生产环境中使用 HTTPS 保护数据安全。

这样你就可以通过网页实时显示树莓派摄像头的流了。如果还有其他问题，请随时问我！

总结

  • 公网服务器上的 Node.js 运行信令服务器，处理信令消息。
  • 树莓派上的 Node.js 运行客户端代码，捕获摄像头流并通过 WebRTC 发送到浏览器。

通过这种方式，树莓派和浏览器可以通过公网服务器建立稳定的视频流连接。希望这些信息对你有所帮助！如果还有其他问题，请随时提问。

相关文章：

树莓派通过webRTC进行视频流传输到公网

为了实现树莓派和浏览器之间的视频流传输&#xff0c;你需要在公网服务器上运行 Node.js 的信令服务器&#xff0c;同时在树莓派上运行 Node.js 客户端代码。以下是具体的步骤和说明&#xff1a; 1. 公网服务器 安装 Node.js&#xff1a;在公网服务器上&#xff0c;你需要安装…...

编程日记 2024/8/1 0:14:38

【数据结构与算法】循环队列

循环队列 一.循环队列的引入二.循环队列的原理三.循环队列判断是否为满或空1.是否为空2.是否为满 四.循环队列入队五.循环队列出队六.循环队列的遍历七.循环队列获取长度八.总结 一.循环队列的引入 还记得我们顺序队列的删除元素嘛,我们有两种方式,一种是将数组要删除元素后面…...

编程日记 2024/8/1 0:13:37

为什么推荐使用@RequiredArgsConstructor代替@Autowired?

首先说一下前提&#xff1a; 项目中已经使用了Lombok&#xff0c;否则添加 Lombok 可能会增加项目的复杂度和构建时间。如果依赖项是可选的或可能在运行时改变&#xff0c;则使用字段注入或 setter 注入可能更为合适。 正文&#xff1a; 在 Spring 框架中&#xff0c;Autowir…...

编程日记 2024/8/1 0:10:34

ARM系列运行异常排查

一、断点指令BKPT BKPT指令产生软件断点中断&#xff0c;可用于程序的调试。它使处理器停止执行正常指令&#xff08;使处理器中止预取指&#xff09;而进入相应的调试程序。 BKPT指令的格式为&#xff1a;BKPT 16位的立即数 二、使用BKPT进行软件异常定位 假设异常发生后…...

编程日记 2024/8/1 0:09:32

Hive3：库操作常用语句

1、创建库 create database if not exists myhive;2、选择库 use myhive;3、查看当前选择的库 SELECT current_database();4、查看库详细信息 desc database myhive;可以查看数据文件在hdfs集群中的存储位置 5、创建库时制定hdfs的存储位置 create database myhive2 …...

编程日记 2024/8/1 0:08:31

C语言实现：C51单片机驱动LCD屏幕显示字符串(Proteus+Keil)

在Proteus中绘制电路原理图 我使用的版本是Protues8.16 ,Protues特别擅长仿真单片机及其外围设备&#xff0c;支持多种类型的微控制器&#xff0c;如8051、HC11、PIC、AVR、ARM、MSP430等&#xff0c;也可以设计pcb板&#xff0c;还能3D建模 1.新建工程 在 Start 栏中点击 …...

编程日记 2024/8/1 0:07:30

暄桐好作业之《临沈周〈东庄图册〉局部》

暄桐是一间传统美学教育教室&#xff0c;创办于2011年&#xff0c;林曦是创办人和授课老师&#xff0c;教授以书法为主的传统文化和技艺&#xff0c;皆在以书法为起点&#xff0c;亲近中国传统之美&#xff0c;以实践和所得&#xff0c;滋养当下生活。 　　 　　其中“暄桐好作…...

编程日记 2024/8/1 0:06:28

Qt3D创建3D物体步骤

使用Qt3D接口创建3D物体的步骤大致有以下几步： 1.创建一个3D窗口 2.创建根实体 3.创建物体实体，父指针为根实体 4.创建立体图形，即物体网格，设置物体的属性 5.给立体图形添加材质，添加坐标位置，添加纹理，添加其他效果 6.创建摄像头，设置摄像头的属性，父指针为根…...

编程日记 2024/8/1 0:01:15

UDP程序设计

UDP协议概述 UDP&#xff0c;User Datagram Protocol&#xff0c;用户数据报协议&#xff0c;是一个简单的面向数据报(package-oriented)的传输层协议&#xff0c;规范为&#xff1a;RFC 768。 UDP提供数据的不可靠传递&#xff0c;它一旦把应用程序发给网络层的数据发送出去…...

编程日记 2024/8/1 0:00:14

计算机网络—电路、分组、报文交换—图文详解

计算机网络—电路、分组、报文交换 计算机网络中的数据传输方式可以根据数据的处理方式和网络资源的使用方式分为电路交换、分组交换和报文交换三种类型。 这些方式在网络设计和数据传输过程中起到了不同的作用和效果。 1. 电路交换&#xff08;Circuit Switching&#xff0…...

编程日记 2024/7/31 23:59:13

linux下交叉编译licensecc

本文章只做个人笔记用 下载地址&#xff1a; #https://github.com/open-license-manager/licensecc.git #下面地址下不下来就是用第一个去官网下载git clone --recursive https://github.com/open-license-manager/licensecc.git 编译前准备3个库&#xff1a;openssl&#x…...

编程日记 2024/7/31 23:58:12

模型剪枝综述

目录 1 深度神经网络的稀疏性&#xff1a; 2 剪枝算法分类&#xff1a; 3 具体的剪枝方法包括&#xff1a; 4 剪枝算法流程&#xff1a; 5 几种常见的剪枝算法&#xff1a; 6 结构化剪枝和非结构化剪枝各有其优缺点&#xff1a; 7 剪枝算法对模型精度的影响 8 影响剪枝…...

编程日记 2024/7/31 23:57:11

破解监控难题，局域网电脑监控软件哪家强？

现在的环境&#xff0c;企业要想茁壮成长&#xff0c;员工的高效工作那可是关键中的关键。但不少老板都发现了一个头疼的问题&#xff0c;员工上班老是偷懒&#xff0c;这可怎么行&#xff1f;今天&#xff0c;就来给大家详细说道说道几款出色的局域网电脑监控软件&#xff0c;…...

编程日记 2024/7/31 23:56:10

Linux--Socket编程TCP

前文&#xff1a;Socket套接字编程 TCP的特点 面向连接&#xff1a;TCP 在发送数据之前&#xff0c;必须先建立连接。可靠性&#xff1a;TCP 提供了数据传输的可靠性。面向字节流&#xff1a;TCP 是一个面向字节流的协议&#xff0c;这意味着 TCP 将应用程序交下来的数据看成是…...

编程日记 2024/7/31 23:55:09

Android Studio导入源码

在有源码并且编译环境可用的情况下&#xff1a; 1.生成导入AS所需的配置文件 在源码的根目录执行以下命令&#xff1a; source build/ensetup.sh lunch 要编译的项目 make idegen //这一步会生成out/host/linux-x86/framework/idegen.jar development/tools/idegen/idegen.sh…...

编程日记 2024/7/31 23:54:08

UE5 UE4 使用python进行编辑器操作

使用UE 4.25以上版本后&#xff0c;python代码改动相对较少。 如下类库在4.20/21/22等早起版本不适用&#xff0c;建议查询UE的python文档 unreal.EditorAssetLibrary 1.获取当前选中的资源&#xff08;Content中&#xff09; # 获取当前选中的资产selected_assets unreal.E…...

编程日记 2024/7/31 23:53:07

区块链技术在智能城市中的创新应用探索

随着全球城市化进程的加速和信息技术的快速发展&#xff0c;智能城市成为了未来城市发展的重要方向。在智能城市建设中&#xff0c;区块链技术作为一种去中心化、安全和透明的分布式账本技术&#xff0c;正逐渐展现出其在优化城市管理、提升公共服务和增强城市安全性方面的潜力…...

编程日记 2024/7/31 23:50:04

解决mysql事件调度器重启服务后自动失效的问题

前段时间为通过mysql事件生成测试数据&#xff0c;今天发现数据在10:57后停止了CREATE EVENT IF NOT EXISTS insert_random_data ON SCHEDULE EVERY 10 SECOND DO INSERT INTO test (createtime, random_number) VALUES (NOW(), FLOOR(RAND() * 100));检查事件状态&#…...

编程日记 2024/7/31 23:49:02

mybatis开启二级缓存

例子 mybatis-config.xml <configuration><settings><setting name"cacheEnabled" value"true"/></settings><environments default"development"><environment id"development"><transacti…...

编程日记 2024/7/31 23:46:59

Oracle大型数据库管理（一）Oracle大型数据库管理全面指南

文章目录 Oracle大型数据库管理全面指南引言1. Oracle数据库概述1.1 什么是Oracle数据库1.2 Oracle数据库的主要特点 2. Oracle数据库部署2.1 安装前的准备工作2.1.1 操作系统要求2.1.2 硬件要求2.1.3 软件环境要求 2.2 Oracle数据库的安装2.2.1 用户和目录的创建2.2.2 安装Ora…...

编程日记 2024/7/31 23:45:57

KubeSphere 容器平台高可用：环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

编程新知 2025/9/16 15:01:44

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

编程新知 2025/9/15 1:31:01

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

编程新知 2025/9/15 18:06:39

多模态大语言模型arxiv论文略读（108）

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

编程新知 2025/9/12 19:00:19

sipsak：SIP瑞士军刀！全参数详细教程！Kali Linux教程！

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

编程新知 2025/9/13 17:37:48

Linux 内存管理实战精讲：核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

编程新知 2025/9/2 17:47:53

【网络安全】开源系统getshell漏洞挖掘

审计过程&#xff1a; 在入口文件admin/index.php中&#xff1a; 用户可以通过m,c,a等参数控制加载的文件和方法&#xff0c;在app/system/entrance.php中存在重点代码&#xff1a; 当M_TYPE system并且M_MODULE include时&#xff0c;会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

编程新知 2025/9/10 16:32:15

comfyui 工作流中 图生视频 如何增加视频的长度到5秒

comfyUI 工作流怎么可以生成更长的视频。除了硬件显存要求之外还有别的方法吗&#xff1f; 在ComfyUI中实现图生视频并延长到5秒&#xff0c;需要结合多个扩展和技巧。以下是完整解决方案&#xff1a; 核心工作流配置&#xff08;24fps下5秒120帧&#xff09; #mermaid-svg-yP…...

编程新知 2025/9/3 7:13:34

微服务通信安全：深入解析mTLS的原理与实践

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、引言&#xff1a;微服务时代的通信安全挑战 随着云原生和微服务架构的普及&#xff0c;服务间的通信安全成为系统设计的核心议题。传统的单体架构中&…...

编程新知 2025/7/6 17:40:31

解析两阶段提交与三阶段提交的核心差异及MySQL实现方案

引言 在分布式系统的事务处理中&#xff0c;如何保障跨节点数据操作的一致性始终是核心挑战。经典的两阶段提交协议&#xff08;2PC&#xff09;通过准备阶段与提交阶段的协调机制&#xff0c;以同步决策模式确保事务原子性。其改进版本三阶段提交协议&#xff08;3PC&#xf…...

编程新知 2025/9/2 16:23:08