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

菌菌的快乐生活

已于 2024-07-31 22:10:24 修改

阅读量437

点赞数 4

文章标签： webrtc

于 2024-07-31 17:53:46 首次发布

本文链接：https://blog.csdn.net/weixin_46084533/article/details/140829023

版权

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

安装 Node.js：

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

创建信令服务器（例如 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}`);
});

启动信令服务器：
```
node server.js
```

2. 在树莓派上

安装 Node.js：

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

创建客户端项目（例如 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) => {
        // 将视频流添加到 peerConnection
        peerConnection.addTrack(new MediaStream(data));
    });
}

// 启动摄像头流
startCameraStream();

启动客户端：
```
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 连接。

运行项目

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

额外注意事项

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

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

总结

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

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

菌菌的快乐生活

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
1
评论
树莓派通过webRTC进行视频流传输到公网

公网服务器上的 Node.js 运行信令服务器，处理信令消息。树莓派上的 Node.js 运行客户端代码，捕获摄像头流并通过 WebRTC 发送到浏览器。通过这种方式，树莓派和浏览器可以通过公网服务器建立稳定的视频流连接。希望这些信息对你有所帮助！如果还有其他问题，请随时提问。
复制链接

扫一扫