如何呈現動態位圖流到畫布？

我已經寫了一個OpenGL遊戲，我想通過畫布元素允許遠程玩遊戲。輸入很簡單，但視頻很難。如何呈現動態位圖流到畫布？

我現在正在做的是通過node.js啓動遊戲，並在我的渲染循環中發送stdout代表當前幀的位圖數據的base64編碼流。 base64框架通過websocket發送到客戶端頁面，並逐個像素地渲染（苦心慢慢地）。顯然這不能忍受。

我一直在嘗試生成一個視頻流的想法，然後我可以很容易地通過標籤（ala http://mrdoob.github.com/three.js/examples/materials_video.html）將其渲染到畫布上。

我有這個想法的問題是我不知道編解碼器/流確定在高層次，如果這實際上是可能的？我不確定編解碼器是否是我需要擔心能夠動態更改內容的部分，並且可能會提前幾幀。

其他想法我有：

試圖創建以base64框架
試圖優化壓縮/重繪區域，使得像素帶寬低得多的HTMLImageElement（似乎不現實實現我需要獲得20 + fps的性能）。

然後總是有閃光燈的選擇......但我真的更喜歡避免它。我正在尋找一些關於追求技術的觀點，想法？

來源

2011-02-20 amirpc

爲什麼Base64編碼的數據？我認爲你可以通過WebSocket的推動原始字節
如果你有RGBA值的格式正確的線性陣列，你可以轉儲那些直入一個ImageData對象隨後與單ctx.putImageData()通話使用。

來源

2011-02-21 23:01:34 Alnitak

1.谷歌搜索似乎表明，否則，但我從來沒有嘗試過（因爲我嘗試前搜索）。 2.現在我想起它..你說得對，與重繪區域/壓縮相結合可能足夠快。我會試驗它。 – amirpc

是的，在進一步思考WebSocket可能會收到一個原始字符串，但你仍然必須解壓到一個本地數組，以便能夠'putImageData（）'使用它。 – Alnitak

嘗試在YCbCr色彩空間和流像素值轉化爲RGB：

Y1 Y2 Y3 Y4 Y5 .... Cb1 Cb2 Cb3 Cb4 Cb5 .... Cr1 Cr2 Cr3 Cr4 Cr5 ...

會有很多重複的圖案，所以任何壓縮算法將壓縮更好然後RGBRGBRBG序列。

http://en.wikipedia.org/wiki/YCbCr

來源

2011-02-21 22:55:18

此外，請檢查https://github.com/pkrumins/node-video。看起來這個庫可以用視頻編碼完成所有骯髒的工作。 –

它會比RRRRRGGGGGBBBBB更好地壓縮嗎？ – Nakilon

剛剛通過了1920x1080 PNG真實照片的測試。壓縮的RGB..RGB大小爲392kb，YCbCr..YCbCr爲309kb。壓縮的RR..GG..BB爲409kb，YY..CbCb..CrCr爲218kb。真的更好:)也可以嘗試將圖像分割爲M個像素邊的N個方塊，併爲每個方形線性書寫YY..CbCb..CrCr序列，我認爲它會壓縮得更好，稍後再檢查。但是不要忘記，你可以放鬆YCbCr中的一些顏色信息 - 查看wiki獲取詳細信息。對於遲到的答案感到抱歉;） –

如何呈現動態位圖流到畫布？

回答

相關問題