2

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

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

有更简单的选择吗？

4

2 回答 2

1

我能想到在前端执行此操作的唯一方法是在您设置图像的 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 与每个图像请求相关联，或者在 mjpeg 流通过 websockets 进入时从 mjpeg 流中发出原始 jpegs（您可以在前端使用数据 uri 渲染这些图像）。

希望对您有所帮助-抱歉，您不得不等待这么久才得到答复。

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

于 2013-11-01T18:46:42.437 回答
0

这是我在阅读 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（可选）我只是将图像 uri 与 img 标签嵌入。

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

增加 FPS_DIVIDER 变量将减少 fps 输出。如果您想在超时时更改图像，则可以在到达“超时”回调时发送“离线”图像。

于 2017-01-20T16:46:27.977 回答