流本地mjpg視頻到HTML畫布

我想寫一個mjpg視頻到HTML畫布的直播流。流本地mjpg視頻到HTML畫布

以下內容：http://camelive.info/有一個mjpeg視頻的公共攝像頭列表，但他們似乎在編寫框架>帶框架元素的標籤，我無法理解它如何在小提琴中工作。

理想的解決方案有任何活MJPG（理想的鏈接？）流在小提琴的HTML畫布。

任何有用的資源表示讚賞，我想做到這一點，而不包括外部庫（允許jQuery的）

編輯：相關閱讀：How to make an snapshot from a MJPEG stream in HTML

編輯：我也有一個本地MJPG從像畫例。解決方案可以使用本地流

來源

2016-03-21 mattyd

不知道這是否有幫助，但你必須檢查[這個例子]（https://webrtc.github.io/samples/src/content/getusermedia/face/） – Bhavik

現在看它，我認爲這是正確的想法。我試着暫時拿起初步小提琴 – mattyd

根據你的規格，你不能。一些有問題的瀏覽器如chrome會讓你這樣做，但這是一個錯誤。畫布drawImage僅繪製動畫「img」的第一幀。 – Kaiido

根據to specs關於畫布2DRenderingContext drawImage方法，

具體地，當CanvasImageSource對象代表了HTMLImageElement動畫圖像，用戶代理必須使用動畫的默認圖像（該格式定義的一個要被使用時不支持動畫或禁用），或者，如果不存在這樣的圖像，動畫的第一幀，呈現圖像時0 CanvasRenderingContext2D API的。

這適用於.gif注意：，SMIL動畫.SVG和.mjpeg媒體。所以一旦你獲取的數據中，只有一個框架應繪製在畫布上。

請注意，鉻has a bug和只尊重.gif圖像，但他們可能會修復它的某一天。

您注意到自己的一個解決方案是使用clear-cache hack（'your.url/?' + new Date().getTime();）獲取另一個新幀，但是您將失去mjpeg格式（部分幀內容）的任何優勢，並且無法確定何時清新會發生。

因此，如果適用，更好的解決方案是使用視頻格式。視頻的每一幀都可以繪製到畫布上。

來源

2016-03-22 01:14:25 Kaiido

嘿凱多多。 img url的新日期是最好的解決方案。！ – mattyd

許多IP攝像機MJPEG是那裏實際上是在預定的幀速率，這時候經常更新的，看起來像一個視頻發送單個JPEG文件。

你需要檢查相機的製造商API的正確的URL與Foscam相機，我已經做之前，下面用得到的圖像流，例如，它完美的作品：

<img id='videostream' src="http://123.456.789.233:8080/videostream.cgi">

你顯然必須得到相機的正確IP和端口號（如果存在）。

更新 -這並不意味着你不能有其他的現場視頻流方法可用，它只是我知道從IP攝像機獲得實時視頻的最簡單的方法。

更新2 - 也有一些相機具有用戶名密碼&所以你可能要追加那些網址videostream.cgi?user=your_user&password=your_password

希望這有助於。

來源

2016-03-21 17:45:22 Yani

你只是用setTimeout更新圖像嗎？ – mattyd

@mattyd取決於你的相機的API，它可以在使用'videostream.cgi'時自動刷新圖像，具體來說，Foscam有一個'snapshot.cgi'，它返回一個圖像，然後你必須使用'setTimeout'調用來手動刷新它。 – Yani

流本地mjpg視頻到HTML畫布

回答

相關問題