將視頻從DirectX流式傳輸到HTML5

Question

我在屏幕上顯示動態動畫DirectX場景。 對於HTML5客戶端，我想將該序列圖像流式傳輸到瀏覽器。

我目前正在將每個幀編碼為jpeg / base64並通過websocket發送它。 在瀏覽器中，我正在將img的源替換為該編碼幀，並且圖像會更新。

本地桌面瀏覽器可以實時更改，但Android設備的性能不佳。 我不確定這是由於頻繁的DOM更新還是Websocket延遲，但圖像是滯后的。

我想通過創建一個視頻流來加入瀏覽器來優化它，這樣我就可以從硬件視頻解碼中獲得性能提升; 2.避免DOM操作和3.避免websocket開銷。

我不確定這是否可行，以及如何實現它（視頻新手）。 有人可以幫忙嗎？

Answer 1

大聲笑 - 我曾經遇到過這個問題，我花了很長時間才明白以下幾點：

如果您需要流式傳輸，請執行流式傳輸，但不要因為以下原因而使用圖像：

• 允許瀏覽器根據需要同時加載任意數量的圖像。 雖然這可以很好地提供html頁面，但如果你試圖模擬流媒體，最終可能會出現極度不同步的圖像序列。
• 視頻通過相互構建圖像獲得因子2-100壓縮，轉換為：如果您基於圖像模擬流媒體，則需要更多和更多帶寬
• 如果用戶應該接近任何流媒體體驗，那么html不會針對添加大量額外代碼的流進行優化
• 流媒體所需的大部分內容已經存在（例如瀏覽器支持協議，客戶端安裝編解碼器，瀏覽器處理將數據傳輸到編解碼器以及利用directx和open gl的各種插件）

問題是讓整個故事被一本書覆蓋的內容超出了這篇文章的格式 - 但這里有一些起點：

• 谷歌“源偽造視頻流服務器”找到開源流媒體服務器

  - >現在你的任務是找到滿足你需要的任何東西，並且與你的技能兼容

• 用他們的動作作為替代來看flash：

  - > http://en.wikipedia.org/wiki/ActionScript

  - > http://www.m2osw.com/sswf

  - > http://www.opensourcealternative.org/alternatives/graphic-editors/open-source-alternative-to-flash-professional/

Answer 2

如果您已經將每個幀編碼為jpeg / base64，則可以使用免費的ffmpeg工具輕松創建mp4。 所有現代瀏覽器都支持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還允許您直接從屏幕或幀緩沖區，管道或許多其他源捕獲，以及編碼到不同的比特率，屏幕，...應用過濾器 - 例如混合兩個視頻 - ，添加音軌，...