在HTML5中渲染MJpeg流

我想使用img標記呈現HTML5中的MJpeg流。當我運行下面的，一切都很正常，這意味着，在視頻開始播放，直到視頻結束：在HTML5中渲染MJpeg流

<img src="http://[some ip]:[port]/mjpg">

我的問題是如何獲得通過幀的流幀。對於每一幀，我想得到它，做一些事情（ajax調用服務器），然後將該幀顯示爲圖像。

謝謝。

來源

2013-10-13 Lior Ohana

如果流源不能在另一個地址返回幀（HTTP：// [某些IP]：[端口] /幀/ XXX），則可以在服務器上使用MJPEG流解析器。例如，Paparazzo.js解析流並返回單個jpeg。實際上它只返回最後一幀而不保存前一幀，但可以更改。

問題不能沒有一些插件和服務器的js來解決只能在瀏覽器中。

來源

2013-10-14 22:05:21 Alex

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

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

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

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

camera.html

<!DOCTYPE html> 
<html> 

<head> 
    <title>ipCam</title> 
</head> 

<body> 
    <h1>ipCam</h1> 
    <img id="motionjpeg" src="http://user:[email protected]:8080/" /> 
    <script src="motionjpeg.js"></script> 
    <script> 
     //Using jQuery for simplicity 

     $(document).ready(function() { 
      motionjpeg("#motionjpeg"); // Use the function on the image 
     }); 
    </script> 
</body> 

</html>

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

來源

2015-12-17 12:05:26 Zorgatone

您無法逐幀獲取流，但可以通過將其繪製到畫布上來定期或不定期地獲取幀。

承擔canvas和img的ID是相同的：

var ctx = canvas.getContext("2d"); 
canvas.width = img.width; 
canvas.height = img.height; 

(function loop() { 
    ctx.drawImage(img, 0, 0);   // grab frame 
    // extract frame here if needed 
    requestAnimationFrame(function() { 
    requestAnimationFrame(loop);  // updates per 1/30 fps 
    }); 
})();

當然，不需要一個循環，只需撥打drawImage()「按需」在需要的時候。然後使用畫布添加文本（時間戳等）或任何並提取作爲圖像：

var dataURL = canvas.toDataURL("image/jpeg", 0.75); 
var img = new Image; 
img.onload = function() { 
    // image ready 
}; 
img.src = dataURL;

或稍快和存儲器友好，但異步（在IE不支持）：

canvas.toBlob(function(blob) { 
    var img = new Image; 
    img.onload = function() { 
    // image ready. 
    }; 
    img.src = (URL || webkitURL).createObjectURL(blob); 
}, "image/jpeg", 0.75);

從畫布可以提取返回一個圖像/幀a Data-URI是這樣的：

var uri = canvas.toDataURL("image/jpeg", 0.75);

來源

2016-06-19 01:04:06 K3N

在HTML5中渲染MJpeg流

回答

相關問題