如何在 javascript 中检测与 MJPEG 流的断开连接

How do I detect a disconnect from an MJPEG stream in javascript

本文关键字：MJPEG 断开 连接 检测 javascript      更新时间：2023-09-26

我在网页上显示来自IP摄像机的MJPEG流。流使用图像元素显示，该元素由jQuery设置：

view = $('<img>');
view.load(function() {
     console.log('loaded');
});
view.error(function() {
     console.log('error');
});
view.attr('src', 'http://camera_ip/videostream.mjpeg');

当两个事件发生各自的情况时，它们都会整齐地触发。直到我断开相机。图像冻结（当然）。我想检测此断开连接，向用户显示错误消息。我想出了一个解决方案，即将图像相隔几秒钟的帧复制到画布上，并比较内容。

有没有更简单的选择？

我能想到在前端执行此操作的唯一方法是在设置图像的 src 属性时准确创建一个 AJAX 请求。当 mjpeg 流结束时，AJAX 请求应调用"完整"回调。

如果您熟悉 node.js 和/或 websockets，您也可以设置一个 mjpeg 代理后端，该后端提供 mjpeg 流，并在流结束时通过 websocket 向该客户端发出"关闭"事件。所以它看起来像这样（请记住，我仍然没有弄清楚bufferToJPEG如何从流中解析出单个jpeg帧）：

http.get('http://camera_ip/videostream.mjpeg', function(response) {
    var buffer = "";
    response.on('data', function(chunk) {
        buffer += chunk;
        clientSocket.emit('imageFrame', bufferToJPEG(buffer));
    });
    response.on('end', function() {
        clientSocket.emit('imageEnd');
    });
});

这个问题（我现在正在尝试在我自己的项目中处理）是，您必须将 websocket 与每个图像请求相关联，或者在它们通过 websocket 进入时从 mjpeg 流发出原始 jpeg（您可以在前端使用数据 uri 渲染这些图像）。

希望这有所帮助 - 对不起，你不得不等待这么长时间才能得到回复。

编辑：https://github.com/wilhelmbot/Paparazzo.js 看起来像是以我上面描述的方式代理该图像的好方法。

这是我在阅读 zigzackattack 答案后想到的。为了简单起见，我使用"datauri"包，但为了对最终图像进行更精细的控制，我还成功地测试了"node-canvas"包。

var mjpeg2jpegs = require('mjpeg2jpegs')
const Datauri = require('datauri')
var camURL = '/videostream.cgi?user=admin&pwd=password'
var camPort = 81
var camTimeout = 10000
var FPS_DIVIDER = 1
var options = {
  hostname: '192.168.1.241',
  port: camPort,
  path: camURL,
  timeout: camTimeout
}
function startCamStream (camName, options) {
  var http = require('http')
  var req = http.request(options, mjpeg2jpegs(function (res) {
    var data
    var pos = 0
    var count = 0
    res.on('imageHeader', function (header) {
    // console.log('Image header: ', header)
      data = new Buffer(parseInt(header['content-length'], 10))
      pos = 0
    })
    res.on('imageData', function (chunk) {
    // console.log('Image data: ', data.length)
      chunk.copy(data, pos)
      pos += chunk.length
    })
    res.on('imageEnd', function () {
    // console.log('Image end')
      if (count++ % FPS_DIVIDER === 0) {
        const datauri = new Datauri()
        datauri.format('.jpeg', data)
        socket.emit(camName, datauri.content) // Send the image uri via websockets. 
      }
    })
  })).on('timeout', function () {
    console.log('timeout')
    startCamStream(camName, options)
  }).end()
}
startCamStream('ipcam1', options)

使用 vue.js（可选）我只需嵌入带有 img 标签的图像 uri。

<img :src="ipcam1"  alt="ipcam1" />

增加FPS_DIVIDER变量将减少 fps 输出。如果要在超时时更改映像，则可以在到达"超时"回调时发送"脱机"映像。

相关文章：