Canvas vs Изображение для поддельного видеоплеера

Question

У меня есть сервер, который очень быстро генерирует pngs, и мне нужно превратить это в видеопоток бедняка.На самом деле создание видеопотока не вариант.

Сейчас я работаю с рекурсивным циклом, который выглядит примерно так (в псевдокоде):

function update() {
    image.src = imagepath + '?' + timestamp; // ensures the image will update
    image.onload = function () {update()};
}

Это работаетОднако через некоторое время он вылетает из браузера (Google Chrome, примерно через 10 минут).Эти изображения обновляются очень часто (несколько раз в секунду).Похоже, изображения кэшируются, что приводит к нехватке памяти в браузере.

Какое из этих решений решит проблему при сохранении быстрого обновления:

• HTML5-холст с drawImage
• HTML5-холст с CanvasPixelArray (обработка необработанных пикселей)

У меня есть доступ к необработанному двоичному файлу в виде Uint8Array, и изображение не слишком большое(менее 50 КБ или около того, 720 x 480 пикселей).

В качестве альтернативы, есть ли способ удалить старые изображения из кэша или вообще избежать кэширования?

РЕДАКТИРОВАТЬ:

Обратите внимание, это не инструмент для обычных пользователей.Это инструмент для диагностики проблем аналогового оборудования для инженеров.Причина для браузера - независимость от платформы (должна работать на Linux, Windows, Mac, iPad и т. Д. Без каких-либо изменений программного обеспечения).

Answer 1

Сбой из-за http://code.google.com/p/chromium/issues/detail?id=36142. Попробуйте создать URL-адреса объектов (используйте XHR2 responseType = "arraybuffer" вместе с BlobBuilder) и отозвайте (используя URL.revokeObjectURL) предыдущий кадр после загрузки следующего кадра.

Редактировать: Вы действительно должны обрабатывать их в видеопотоке с низкой частотой кадров в секунду на стороне сервера, что в итоге даст вам значительно меньшую задержку и более быстрое время загрузки.

Answer 2

@ Эли Грей, похоже, определил источник вашего крушения. Похоже, у них есть исправление в работе, поэтому, если вы не хотите изменять свой подход, надеюсь, это будет решено в ближайшее время.

Что касается вашего другого вопроса, вам обязательно следует придерживаться drawImage(), если можете. Если я понимаю ваше намерение использовать CanvasPixelArray, вы рассматриваете возможность итерации по каждому пикселю на холсте и обновления его с использованием новой информации о пикселях? Если это так, это будет нигде почти так же эффективно, как drawImage(). Кроме того, этот подход совершенно не нужен для вас, поскольку вам (предположительно) не нужно ссылаться на данные в предыдущем кадре.

К счастью или нет, вы не можете напрямую поменять внутренний CanvasPixelArray объект, хранящийся на холсте HTML5. Если у вас есть правильно отформатированный массив данных пикселей, единственный способ обновить элемент холста - вызвать drawImage() или putImageData(). Прямо сейчас, putImageData() намного медленнее, чем drawImage(), как вы можете видеть здесь: http://jsperf.com/canvas-drawimage-vs-putimagedata. Если у вас есть какая-либо прозрачность в кадрах вашего видео, вы, вероятно, захотите очистить холст, а затем используйте drawImage() (в противном случае вы можете видеть предыдущие кадры).

Сказав все это, я не знаю, что вам действительно нужно использовать холст для этого. Была ли у вас мотивация использовать холст, чтобы вы могли избежать кэширования (что сейчас не является для вас основной проблемой)?

Answer 3

iPad, вы говорите? .. Тем не менее, я бы посоветовал использовать Flash / видео или HTML5 / видео.

Поскольку WebKit очень легко разбивается даже при умеренном притоке изображений, либо просто больших изображений, либо простоогромное количество маленьких ..

С другой стороны, МОЖЕТ работать XHR с данными изображения base64 или массивом пикселей.У меня было приложение для коротких опросов, которое работало в течение 10-12 часов с сервером опроса XHR каждые 10 секунд.

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

Эти изображения обновляются очень часто (несколько раз в секунду).

.. если критично обновление с такой высокой скоростью - вы ДОЛЖНЫ использовать длинный опрос .

Answer 4

Если «фильм» управляется данными (т. Е. Основан на числах и расчетах), вы можете отправить НАМНОГО больше данных в браузер в виде текста, а затем с помощью javascript отобразить его на стороне клиента в фильме.«Игрок» в клиенте может затем запрашивать данные в пакетном режиме так, как ему это нужно.

Если нет, то одну вещь, которую вы можете сделать, это просто ограничить количество кадров в секунду (fps) сценария, возможножестко закодированное значение или значение слайдера / таблицы.Предполагая, что это не ограничивает полезность инструмента, по крайней мере это позволит браузеру работать дольше без сбоев.

Наконец, есть много вещей, которые можно сделать с заголовками (например,в файле .htaccess) для указания браузерам кэшировать или не кэшировать содержимое.