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

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

news 2025/7/10 8:46:56

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

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

编程新知 2025/7/10 4:54:42

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

编程新知 2025/7/9 7:19:24

企业如何增强终端安全？

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

编程新知 2025/7/7 21:10:42

C# 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2025/7/9 16:31:51

uniapp 开发ios， xcode 提交app store connect 和 testflight内测

uniapp 中配置 配置manifest 文档&#xff1a;manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号&#xff1a;4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...

编程新知 2025/7/9 12:17:10

解读《网络安全法》最新修订，把握网络安全新趋势

《网络安全法》自2017年施行以来&#xff0c;在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂&#xff0c;网络攻击、数据泄露等事件频发&#xff0c;现行法律已难以完全适应新的风险挑战。 2025年3月28日&#xff0c;国家网信办会同相关部门起草了《网络安全…...

编程新知 2025/7/10 0:41:51

协议转换利器，profinet转ethercat网关的两大派系，各有千秋

随着工业以太网的发展&#xff0c;其高效、便捷、协议开放、易于冗余等诸多优点&#xff0c;被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口&#xff0c;具有实时性、开放性&#xff0c;使用TCP/IP和IT标准&#xff0c;符合基于工业以太网的…...

编程新知 2025/7/10 2:38:59

Python实现简单音频数据压缩与解压算法

Python实现简单音频数据压缩与解压算法 引言 在音频数据处理中&#xff0c;压缩算法是降低存储成本和传输效率的关键技术。Python作为一门灵活且功能强大的编程语言&#xff0c;提供了丰富的库和工具来实现音频数据的压缩与解压。本文将通过一个简单的音频数据压缩与解压算法…...

编程新知 2025/7/8 19:38:21

webpack面试题

面试题&#xff1a;webpack介绍和简单使用 一、webpack&#xff08;模块化打包工具&#xff09;1. webpack是把项目当作一个整体&#xff0c;通过给定的一个主文件&#xff0c;webpack将从这个主文件开始找到你项目当中的所有依赖文件&#xff0c;使用loaders来处理它们&#x…...

编程新知 2025/7/9 8:09:50

从零手写Java版本的LSM Tree （一）：LSM Tree 概述

&#x1f525; 推荐一个高质量的Java LSM Tree开源项目&#xff01; https://github.com/brianxiadong/java-lsm-tree java-lsm-tree 是一个从零实现的Log-Structured Merge Tree&#xff0c;专为高并发写入场景设计。 核心亮点&#xff1a; ⚡ 极致性能&#xff1a;写入速度超…...

编程新知 2025/7/7 21:37:06