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

我正在网页上显示来自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');

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

有更简单的选择吗？
我能想到的在前端执行此操作的唯一方法是在设置图像的src属性时创建一个AJAX请求。当mjpeg流结束时，AJAX请求应该调用“完成”回调

如果您对node.js和/或websocket感到满意，您也可以设置一个mjpeg代理后端，该后端提供mjpeg流，并在流结束时通过websocket向该客户端发出“关闭”事件（请记住，我仍然没有弄清楚bufferToJPEG如何从流中解析出单个jpeg帧）：

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

希望这有点帮助，对不起，你等了这么久才得到答复

编辑：看起来像是以我上面描述的方式代理该图像的一种好方法。
以下是我在阅读zigzackattack答案后得出的结论。为了简单起见，我使用了“datauri”包，但为了对最终图像进行更细粒度的控制，我还成功地测试了“节点画布”包

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（可选）我只需将图像uri嵌入一个img标记

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



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

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