html5 void,在HTML5中渲染MJpeg流

如果相機暴露原始JPEG圖像(不是.MJPEG擴展名)，您必須手動實現它(如果擴展名爲.MJPEG，則瀏覽器將執行所有操作，只需輸入正確的src)。如果你有.MJPEG並且想使用原始的.JPEG，請檢查你的相機文件。大多數相機都公開.MJPEG和原始.JPEG流(僅在不同的URL上)。

不幸的是，你將無法輕鬆地通過Ajax獲得的圖像，但你可以定期改變圖像的src。

您可以使用Date.getTime()，並把它添加到查詢字符串強制瀏覽器重新加載圖像，並且每次重複加載圖像。

如果您使用jQuery的代碼會是這個樣子：

camera.html

ipCam

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在頁面加載時，但不會允許播放/暫停/停止功能