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

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

news 文章来源：https://blog.csdn.net/weixin_46084533/article/details/140829023 2025/5/4 23:37:57

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

Arcgis中查找空间距离范围内字段相等的数据

背景 目前有两份空间点数据&#xff0c;需要通过点数据1查找100米空间距离范围内点数据2中与点数据1某个字段相同的数据 步骤 1、arcgis中加载数据 2、空间连接 结果&#xff0c;从下面这两个字段可以看出&#xff0c;点数据1在100米空间距离范围内有多个点数据2 3、选择数…...

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

js中map属性

JavaScript中的Map对象保存键值对&#xff0c;并且能够记住键的原始插入顺序 以下是关于如何在JavaScript中使用Map对象的博客文章概要&#xff1a; 一、创建和初始化Map对象 使用new Map()构造函数可以创建一个新的Map对象。你还可以在构造函数中传入一个可迭代对象&#x…...

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

CS224W—03 GNN

CS224W—03 GNN 回顾 快速回顾一下上一讲的内容。我们学到的关键概念是节点嵌入&#xff08;Node Embedding&#xff09;。我们的直觉是将网络中的节点编码到低维向量空间中。我们希望学习一个接受输入图的函数 f f f&#xff0c;并将其嵌入到低维节点嵌入空间中。在这里&am…...

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

库存超卖问题解决方式

文章目录 超卖问题解决方式什么是库存超卖问题&#xff1f;乐观锁和悲观锁的定义超卖问题解决方式一、悲观锁1.jvm单机锁2.通过使用mysql的行锁&#xff0c;使用一个sql解决并发访问问题3.使用mysql的悲观锁解决4. 使用redis分布式锁来解决 二、乐观锁解决1.版本号2. CAS法&…...

编程日记 2024/7/31 23:36:36

30岁决心转行，AI太香了

今天是一篇老学员的经历分享&#xff0c;此时的王同学在大洋彼岸即将毕业&#xff0c;手握多家北美大厂offer&#xff0c;一片明媚。谁能想到王同学的转码之路竟始于一场裁员&#xff0c;这场访谈拉开了他的回忆。 最近总刷到一些关于转行的话题&#xff0c;很多刚毕业的同学喜…...

编程日记 2024/7/31 23:35:34

C#知识|文件与目录操作：目录的操作

哈喽，你好啊，我是雷工！ 前边学习了文件的删除、复制、移动，接下来学习目录的操作。 以下为学习笔记。 01 效果演示 1.1、显示指定目录下的所有文件 在左侧的文本框中显示出F:\F004-C#目录下的所有文件， 演示效果： 1.2、显示指定目录下的所有子文件 在左侧的文本框中显…...

编程日记 2024/7/31 23:33:31

从零到一：用Go语言构建你的第一个Web服务

使用Go语言从零开始搭建一个Web服务&#xff0c;包括环境搭建、路由处理、中间件使用、JSON和表单数据处理等关键步骤&#xff0c;提供丰富的代码示例。 关注TechLead&#xff0c;复旦博士&#xff0c;分享云服务领域全维度开发技术。拥有10年互联网服务架构、AI产品研发经验、…...

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

塔子哥的环游之旅-腾讯2023笔试(codefun2000)

题目链接 塔子哥的环游之旅-腾讯2023笔试(codefun2000) 题目内容 塔子哥是一位热衷旅游的程序员。他所在的国家共有 n 个城市,编号从 1 到 n。这些城市之间有 m 条双向的交通线路,分别为飞机线路和火车线路。塔子哥起始位于编号为 1 的城市,他计划前往编号为 n 的城市进行旅游…...

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

力扣SQL50 换座位

Problem: 626. 换座位 &#x1f468;‍&#x1f3eb; 参考题解 Code SELECT(CASEWHEN MOD(id, 2) ! 0 AND counts ! id THEN id 1WHEN MOD(id, 2) ! 0 AND counts id THEN idELSE id - 1END) AS id,student FROMseat,(SELECTCOUNT(*) AS countsFROMseat) AS seat_counts O…...

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

SOPHGO算能科技BM1684芯片修改内存布局

目录 1 问题由来 2 下载memory_edit工具 3 查看当前内存配置 3 修改内存布局 4 替换生效 参考文献&#xff1a; 1 问题由来 我在算能SE5盒子上开发的时候&#xff0c;明显感觉很慢&#xff0c;然后看了下cpu内存竟然只有2.6G 但是这个盒子出厂默认是12G的&#xff0c;于…...

编程日记 2024/7/31 23:26:28