html 播放mjpeg,在HTML5中渲染MJpeg流

如果相机暴露原始JPEG图像(不是.MJPEG扩展名)，您必须手动实现它(如果扩展名为.MJPEG，则浏览器将执行所有操作，只需输入正确的src)。如果你有.MJPEG并且想使用原始的.JPEG，请检查你的相机文件。大多数相机都公开.MJPEG和原始.JPEG流(仅在不同的URL上)。

不幸的是，你将无法轻松地通过Ajax获得的图像，但你可以定期改变图像的src。

您可以使用Date.getTime()，并把它添加到查询字符串强制浏览器重新加载图像，并且每次重复加载图像。

如果您使用jQuery的代码会是这个样子：

camera.html

ipCam

//Using jQuery for simplicity

$(document).ready(function() {

motionjpeg("#motionjpeg"); // Use the function on the image

});

motionjpeg.js

function motionjpeg(id) {

var image = $(id), src;

if (!image.length) return;

src = image.attr("src");

if (src.indexOf("?") < 0) {

image.attr("src", src + "?"); // must have querystring

}

image.on("load", function() {

// this cause the load event to be called "recursively"

this.src = this.src.replace(/\?[^\n]*$/, "?") +

(new Date()).getTime(); // 'this' refers to the image

});

}

注意我的例子将发挥MotionJPEG在页面加载时，但不会允许播放/暂停/停止功能