MJPEG轉canvas播放

背景

IPCAM的影像要能在web上播放，但又是用無線網路訊號非常不穩，就有很多問題

問題

來自攝影機經過NVR的stream輸出是MJPEG格式，本來直接一個<img src="url"就可以播放
但是用無線網路不穩定會掉包，就會導致net::ERR_INCOMPLETE_CHUNKED_ENCODING 200 (OK)
影像畫面會直接變一片白，需要重新request才可以
這種錯誤我試過onerror等方法都catch不到

解決

最後找到一個好一點的方法，就是用canvas轉一層。這樣做畫面會維持在最後一張，發生問題就重新request
效果變成影像源頭掛掉時，畫面停住(本來是直接一片白)，重新連上後再繼續更新
看畫面上時間可能是到了10:02卡住不動，之後跳成10:08又繼續播放

CODE

url是影像來源，例如axxon的NVR系統是host…/DeviceIpint.158/SourceEndpoint.video:0:1


var optstr = "<canvas id='movie_canvas' width='640px' height='360px'></canvas>";
$("#movie").html(optstr);
var ctx = document.getElementById('movie_canvas').getContext('2d');
ctx.scale(0.33, 0.33)
var img = new Image();
img.onload = function() {
	ctx.drawImage(img, 0, 0);
};
var imgRefresher = setInterval(function() {
	img.src = url;
}, 100)
var movieDg = $("#movie").dialog({
	modal: true,
	width: 690,
	height: 430,
	title: "即時影像",
	close: function() {
		clearInterval(imgRefresher);
		$("#movie_canvas").remove();
		window.stop();
	}
});

上次修改於 2022-09-15