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

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

news 2026/2/10 6:51:33

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

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

编程新知 2026/2/8 15:03:04

从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

编程新知 2026/2/5 12:11:18

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

编程新知 2026/2/6 15:01:23

【C++特殊工具与技术】优化内存分配(一)：C++中的内存分配

目录 一、C 内存的基本概念​ 1.1 内存的物理与逻辑结构​ 1.2 C 程序的内存区域划分​ 二、栈内存分配​ 2.1 栈内存的特点​ 2.2 栈内存分配示例​ 三、堆内存分配​ 3.1 new和delete操作符​ 4.2 内存泄漏与悬空指针问题​ 4.3 new和delete的重载​ 四、智能指针…...

编程新知 2026/1/31 6:12:22

莫兰迪高级灰总结计划简约商务通用PPT模版

莫兰迪高级灰总结计划简约商务通用PPT模版&#xff0c;莫兰迪调色板清新简约工作汇报PPT模版&#xff0c;莫兰迪时尚风极简设计PPT模版&#xff0c;大学生毕业论文答辩PPT模版&#xff0c;莫兰迪配色总结计划简约商务通用PPT模版&#xff0c;莫兰迪商务汇报PPT模版&#xff0c;…...

编程新知 2026/1/29 10:37:37

【Linux系统】Linux环境变量：系统配置的隐形指挥官

。# Linux系列 文章目录 前言一、环境变量的概念二、常见的环境变量三、环境变量特点及其相关指令3.1 环境变量的全局性3.2、环境变量的生命周期 四、环境变量的组织方式五、C语言对环境变量的操作5.1 设置环境变量&#xff1a;setenv5.2 删除环境变量:unsetenv5.3 遍历所有环境…...

编程新知 2026/1/31 17:02:38

日常一水C

多态 言简意赅&#xff1a;就是一个对象面对同一事件时做出的不同反应 而之前的继承中说过&#xff0c;当子类和父类的函数名相同时&#xff0c;会隐藏父类的同名函数转而调用子类的同名函数&#xff0c;如果要调用父类的同名函数&#xff0c;那么就需要对父类进行引用&#…...

编程新知 2025/9/30 22:37:58

Spring AOP代理对象生成原理

代理对象生成的关键类是【AnnotationAwareAspectJAutoProxyCreator】&#xff0c;这个类继承了【BeanPostProcessor】是一个后置处理器 在bean对象生命周期中初始化时执行【org.springframework.beans.factory.config.BeanPostProcessor#postProcessAfterInitialization】方法时…...

编程新知 2026/2/6 22:31:04

TCP/IP 网络编程 | 服务端 客户端的封装

设计模式 文章目录 设计模式一、socket.h 接口&#xff08;interface&#xff09;二、socket.cpp 实现&#xff08;implementation&#xff09;三、server.cpp 使用封装&#xff08;main 函数&#xff09;四、client.cpp 使用封装&#xff08;main 函数&#xff09;五、退出方法…...

编程新知 2025/7/27 7:26:07

验证redis数据结构

一、功能验证 1.验证redis的数据结构&#xff08;如字符串、列表、哈希、集合、有序集合等&#xff09;是否按照预期工作。 2、常见的数据结构验证方法&#xff1a; ①字符串&#xff08;string&#xff09; 测试基本操作 set、get、incr、decr 验证字符串的长度和内容是否正…...

编程新知 2025/10/5 5:37:09