Question

我正在使用Raspberry Pi和Raspberry Pi相机模块构建延时相机Web应用程序。到目前为止，我已经构建了一个Web应用程序（使用NodeJS，Express，AngularJS和BootStrap 3），可以使用开源NodeJS模块（https://www.npmjs.org/package/raspicam）与Raspberry Camera Module进行交互。我的网络应用程序可以通过按下Web界面上的按钮来设置延时设置并拍照。但是，它目前在Web浏览器上没有实时流功能，用户可以在其中查看Raspberry Pi Camera模块远程查看的内容。我想通过简单地在html文件中执行类似的操作来找出一种在网络上显示相机模块的实时流的方法：

<img src="live-stream-raspberry-pi-camera">

Answer 1

这是我想出的用于从相机直播的内容。它非常粗糙，但适用于所有浏览器。

我不知道您如何访问Raspberry pi相机，但下面的示例显示了如何在linux中访问内置网络摄像头：

使用ffmpeg：

将相机编码为更新的图像文件

ffmpeg -analyzeduration 0 -i /dev/video0 -update 1 -q 1 -r 5 -y /video/feed/1.jpg

使用php读取图像文件并输出更改内容：

<?php
session_start();
session_write_close();
$imgFile = '/video/feed/1.jpg';
$img = (file_get_contents($imgFile));
$lastImgSize = $_SESSION['imageSize'];
while (true) {
    usleep(20000);
    $img = (file_get_contents($imgFile));
    $imgSize = strlen($img);
    if ($lastImgSize != $imgSize) {
        break;
    }
} 
session_start();
header("Content-type: image/jpg");
$_SESSION['imageSize'] = $imgSize;
echo $img;
exit;

使用javascript重新加载图像，php将在可用时提供新图像：

<img id="feed" src>
        <script>
            img = new Image
            function f() {
                img.src = "img.php?rnd=" + Date.now();
                img.onload = function() {
                    feed.src = img.src;
                    setTimeout(function() {
                        f();
                    }, 50);
                };
                img.onerror = function() {
                    setTimeout(function() {
                        f();
                    }, 50);
                };
            }
            f();
        </script>

如果您正在寻找更有趣的东西：

查看支持来自rtmp / hls源的实时流媒体的flowplayer，两者都可以用ffmpeg进行编码。

或者仍然是Dashcast一个linux / windows流媒体服务，用于编码当前由ie和chrome支持的html5 mpeg-DASH格式的实时流，firefox支持是on the way

Answer 2

对于那些简单的东西，你可以发送一个multipart / x-mixed-replace响应，其中每个部分都是一个视频帧。当与XMLHttpRequest一起使用时，Chrome和Firefox删除了对此类响应的支持，但AFAIK仍然允许它们用于图像元素。

使用NodeJS在Web浏览器上使用Raspberry Pi相机模块访问实时流？

2 个答案: