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

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

news 2026/2/10 4:41:47

为了实现树莓派和浏览器之间的视频流传输，你需要在公网服务器上运行 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

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 如果用户登录尝试失败次…...

编程新知 2026/2/10 3:29:01

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

编程新知 2026/2/1 21:17:19

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

编程新知 2025/10/24 9:13:44

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

编程新知 2026/2/3 22:50:06

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

编程新知 2026/2/3 22:50:07

大数据学习（132）-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

编程新知 2025/10/7 8:52:21

Redis的发布订阅模式与专业的 MQ（如 Kafka, RabbitMQ）相比，优缺点是什么？适用于哪些场景？

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

编程新知 2025/12/4 2:32:37

VM虚拟机网络配置（ubuntu24桥接模式）：配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

编程新知 2026/2/9 3:25:41

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

编程新知 2026/1/26 14:15:48

Python 训练营打卡 Day 47

注意力热力图可视化 在day 46代码的基础上&#xff0c;对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...

编程新知 2025/11/24 9:42:16