網絡攝像頭流式傳輸 - 以可變間隔將圖像流式傳輸到圖像控制系統？

Question

我遇到問題，連接速度慢的用戶無法正確獲取圖像Feed。

我每秒向Ajax更新面板中的圖片框發送新圖片，使用Ajax計時器。

所以如果他們的速度實在太慢，一個圖像犯規負載下一個進來前充分，所以他們從來沒有得到整個畫面......

任何想法？

Answer 1

在JavaScript中使用圖像OnLoad事件。換句話說，在最後一個沒有完全加載之前，不要加載新的圖像。

也許你不應該使用更新面板。圖片標籤（包括其大小，外觀和位置）保持不變;它是變化的來源。而不是更新的一切，我建議做以下在客戶端：

1. 在開始的時候，加載第一圖像（不更新面板）。
2. 在客戶端將OnLoad事件的監聽程序添加到<img />。
3. 當圖片完全加載時，通過查詢服務器以獲取更新的圖片來重新加載。例如，您可能會考慮擁有一個ASP.NET頁面Camera.aspx，該頁面服務於從相機抓取的最新照片。可以肯定的頁面確實是查詢，<img />元素的src屬性更改爲Camera.aspx?t=1，Camera.aspx?t=2等

在服務器端（所以沒有JavaScript在這裏會），所抓取的圖像存儲在數據庫中，因此Camera.aspx將查詢最後存儲的記錄，檢索它並直接發送給客戶端（指定適當的Response.ContentType和使用Response.OutputStream）。

爲了獲得更好的視覺反應，您可能還需要考慮並行使用兩個圖像元素：第一個加載時，顯示第二個，反之亦然。它可能會更好，但我不確定，所以在選擇合適的方法之前進行測試。