Как визуализировать динамический растровый поток на холст? - PullRequest
4 голосов
/ 20 февраля 2011

Я написал игру для OpenGL и хочу разрешить удаленную игру через элемент canvas.Вводить легко, но видео сложно.

Сейчас я запускаю игру через node.js, и в моем цикле рендеринга я отправляю в stdout закодированный в base64 поток растровых данных, представляющих текущий кадр.,Кадр base64 отправляется через веб-сокет на страницу клиента и обрабатывается (кропотливо медленно) попиксельно.Очевидно, что этого не может быть.

Я разбирался с идеей создания видеопотока, а затем я мог легко рендерить его на холст с помощью тега (ala http://mrdoob.github.com/three.js/examples/materials_video.html).

Проблема, с которой я столкнулся в связи с этой идеей, заключается в том, что я недостаточно знаю о кодеках / потоковой передаче, чтобы на высоком уровне определить, возможно ли это на самом деле? Я не уверен, что даже кодек - это та часть, котораяМне нужно беспокоиться о возможности динамического изменения содержимого и, возможно, рендеринга на несколько кадров впереди.

Другие мои идеи:

  • Попытка создания HTMLImageElementиз кадра base64
  • Попытка оптимизировать области сжатия / перерисовки таким образом, чтобы пропускная способность пикселя была намного ниже (кажется нереалистичным добиться такой производительности, которую мне нужно было бы получить со скоростью 20 кадров в секунду).

Тогда всегда есть возможность использовать флеш-память ... но я бы действительно предпочел избежать этого. Я ищу мнения о технологиях, идеи?

Ответы [ 2 ]

2 голосов
/ 22 февраля 2011

Попробуйте преобразовать RGB в цветовое пространство YCbCr и значения пикселов потока следующим образом:

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

Было бы много повторяющихся шаблонов, поэтому любой алгоритм сжатия сжимает его лучше, чем последовательность RGBRGBRBG.

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

1 голос
/ 22 февраля 2011
  1. Почему base64 кодирует данные? Я думаю вы можете протолкнуть сырые байты через WebSocket

  2. Если у вас есть линейный массив значений RGBA в правильном формате, вы можете вывести их прямо в объект ImageData для последующего использования с помощью одного вызова ctx.putImageData().

...