2014-06-26 107 views
1

我在屏幕上顯示了動態動畫DirectX場景。我想要將這些圖像序列流式傳輸到瀏覽器,以便用於HTML5客戶端。將視頻從DirectX流式傳輸到HTML5

我目前編碼每個幀作爲JPEG/BASE64併發送它在一個網頁套接字。在瀏覽器中,我將img的源替換爲該編碼框架,並且圖像得到更新。

本地桌面瀏覽器可以實時更改,但在Android設備上的性能不佳。我不確定這是由於頻繁的DOM更新還是WebSocket延遲造成的,但是圖像有些滯後。

我想通過創建一個視頻流中的瀏覽器來加載,這樣我會得到從1硬件視頻解碼性能提升優化它的; 2.避免DOM操作和3.避免websocket開銷。

我不知道這是要走的路,以及如何實現它(視頻新手)。誰能幫忙?

+0

您提到目前的解決方案是滯後的。這是否意味着互動?即,用戶是否通過網絡瀏覽器控制3D場景? –

+0

是的,通過屏幕上的UI控件(瀏覽器內)。但是本機代碼也可能會觸發對場景的更改,而無需用戶干預。 – liorda

+0

什麼是你的帶寬限制?這是在有線千兆網絡上嗎?或者在地球兩端的電腦之間?您定位了哪些瀏覽器?任何和所有,或只是,例如Chrome? –

回答

2

洛爾 - 我這個問題fittled一次,它花了年齡瞭解以下信息:

如果您需要流,做流但不與圖像fittle的原因如下:

  • 瀏覽器被允許在他們想要的同時加載儘可能多的圖像。雖然這可以很好地爲html頁面提供服務,但如果您嘗試模擬流媒體,則可能會產生極其不同步的圖像序列。
  • 視頻通過彼此構建圖像獲得因子2-100壓縮,轉換爲:如果您基於圖像模擬流式傳輸,則需要大量更多帶寬
  • html未優化用於流式傳輸,其中添加了大量額外的代碼如果用戶應該得到甚至接近任何流媒體體驗
  • 你最需要的流什麼是已經存在(如協議被瀏覽器支持,編解碼器安裝在客戶端,瀏覽器處理所有類型的插件傳輸數據到編解碼器,並使用DirectX和開放的GL)

問題是得到整個stor y是東西通過一本書,會過頭這個帖子的格式被覆蓋 - 但這裏有一些出發點:

1

如果你已經每幀編碼爲JPEG/BASE64您可以輕鬆創建使用免費工具的ffmpeg的MP4。所有MODERM瀏覽器對H264支持,如果不是所有的大部分,硬件加速,所以你可以從那裏開始:

如果圖片是這樣寫的:

image001.jpeg, image002.jpeg, ... 

要創建從一個MP4圖片:

ffmpeg \ 
    -r 1/10 \  <-- A different image each 10 seconds 
    -i image%03d.jpeg \ 
    -c:v libx264 \ 
    -r 25 \  <-- 25 images per second 
    -pix_fmt yuv420p \ 
    newVideo.mp4 

注意,FFmpeg的也讓你直接從屏幕或幀緩衝,管道或許多其他來源以及編碼不同的比特率,screensizes捕捉,...過濾器應用 - 例如混合兩種視頻 - ,添加音軌,..