如何在网站上实时播放MJPEG视频

Question

我有一些在网站上流传mjpeg视频的问题。相机有一个私有IP（必须保持私有/本地），但必须在公共网站上可见。

我尝试了以下代码：

HTML

<img src="video.php?ip=IPADDRESS&name=NAME" width="640" height="480" />

PHP (video.php)

<?php
    // ... some code to get the camera object
    header('Content-Type: multipart/x-mixed-replace; boundary=myboundary');
    ob_end_flush();
    readfile('http://'.$cam->user.':'.$cam->pwd.'@'.$cam->ip.'/mjpg/video.mjpg');
?>

这个目前可以运作。但现在的问题是，当我通过jQuery发送一些请求（相机转向），它们无法发送，直到我刷新网站或关闭它。只有在我直接在图像src标签中编写文件时，才能起到作用。但是，当然，流只能在本地Web服务器上显示。我的问题是：在公共网站上流视频的最佳方法是什么？

问候

BlackBonjour 编辑：

这里是jQuery代码：

$('#container').on('click', '.steer', function()
{
    $.post('handle_post.php',
    {
        action: 'move-cam',
        ip: $('#camIP').val(),
        name: $('#camNAME').val(),
        move: $(this).attr('alt')
    });
});

这不是完整的代码，但这就是所有的转向功能。

更新17.09

我最近几天一直在解决我的问题，但仍然没有找到解决方案。我尝试打开一个新窗口来进行转向。问题是，如果我用JavaScript打开窗口，我仍然无法控制相机。当我打开不同的浏览器并直接访问“控制器”时，我可以控制相机。但这不是我想要的。如何使用JS（Ajax）控制相机？

接下来是，当我通过PHP读取流时，服务器和我的电脑变得非常缓慢。我该如何修复它？

我使用以下代码来读取流：

$fp = fsockopen($cam->ip, 80, $errno, $errstr, 30);

if(!$fp)
{
    echo $errstr.' ('.$errno.')<br />'."\n";
}
else
{
    $urlstring = "GET /mjpg/video.mjpg HTTP/1.0\r\nAuthorization: BASIC ".base64_encode($cam->user.':'.$cam->pwd)."\r\n\r\n";

    fputs($fp, $urlstring);

    while($str = trim(fgets($fp, 4096)))
    {
        header($str);
    }

    fpassthru($fp);
    flush();
    fclose($fp);
}

- BlackBonjour

---

尽管使用了C#，但这篇文章对我帮助很大（在敲键盘两天后） :) - Richard Housham

Answer 1

我找到了一个解决方案。问题是，在我的video.php中使用了session_start()，这会阻止所有使用相同会话的请求。就这样。
最好的问候
BlackBonjour

- BlackBonjour

---

你需要测试一下，但如果你不必更新会话，你可能可以使用session_start（[ 'read_and_close' => true ]）来解决问题。 - Richard Housham

Answer 2

我不确定你如何发送相机控制指令，因为我在这里看不到JavaScript代码。 无论如何，我在这里找到了一个很好的方法(https://github.com/wilhelmbot/Paparazzo.js)适用于你的情况:

JS:

// JavaScript example using jQuery

// Active camera will refresh every 2 seconds
var TIMEOUT = 2000;
var refreshInterval = setInterval(function() {
  var random = Math.floor(Math.random() * Math.pow(2, 31));
  $('img#camera').attr('src', 'video.php?r=' + random);//send a random var to avoid cache
}, TIMEOUT); 

Html：

<img id="camera" src="video.php" width="640" height="480" />

这段代码只是为了刷新图片元素以获取新的图片... 你能展示一下你如何向相机发送请求吗？

- lu cip

---

谢谢您的回复。我已经编辑了我的问题。但我不认为这是一个JavaScript问题。 - BlackBonjour

一个更简洁的方法是：var frame = 0; var camerafun = function(){ document.getElementById("videofeed").src = "video.mjpg?frame=" + frame; ++frame; window.requestAnimationFrame(camerafun); } window.requestAnimationFrame(camerafun); 但由于每帧重新连接的开销，最多只能达到约5 FPS。 - Qqwy

Answer 3

您也可以使用“更简单”的NGINX解决方案来代理您的请求，这可能更具性能。以下（调整后）适用于我：

server {
    listen 80;
    server_name [HOST];

    location /video.php {
        proxy_buffering off;
        proxy_set_header Authorization "Basic [KEY]";
        proxy_pass http://[HOST]/mjpg/video.mjpg?$query_string;
    }
}

- Samson