使用 NodeJS 在 Web 浏览器上使用 Raspberry Pi 摄像头模块访问实时流？答案

【问题标题】：Access Live Stream with Raspberry Pi Camera Module on Web Browser using NodeJS?使用 NodeJS 在 Web 浏览器上使用 Raspberry Pi 摄像头模块访问实时流？
【发布时间】：2014-04-25 16:10:01
【问题描述】：

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

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

【问题讨论】：

标签： javascript node.js express raspberry-pi mpeg

【解决方案1】：

这是我想出的通过摄像机进行实时流式传输的方法。它很粗糙，但适用于所有浏览器。

我不知道您是如何访问树莓派摄像头的，但下面的示例显示了如何访问 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>

如果您正在寻找更高级的东西：

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

或者更喜欢 Dashcast 一个 linux / windows 流媒体服务，它以 html5 mpeg-DASH 格式编码直播流，目前支持 ie 和 chrome，firefox 支持是 on the way

【讨论】：

【解决方案2】：

对于一些简单的事情，您可以发送一个 multipart/x-mixed-replace 响应，其中每个部分都是一帧视频。当与 XMLHttpRequest 一起使用时，Chrome 和 Firefox 不再支持这种类型的响应，但 AFAIK 仍然允许它们用于图像元素。

【讨论】：