Как получить доступ к необработанным пиксельным данным из фрейма видеоплеер HTML5?

Question

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

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

Answer 1

draw the video into a canvas. Затем с холста используйте getImageData. Он возвращает объект ImageData, который имеет свойство data. Это Uint8ClampedArray, который содержит пиксельные данные в последовательности rgba.

Answer 2

Вы рисуете видеокадры в холсте html5, а затем получаете пиксели от getImageData.

Основным источником проблем здесь является одна и та же политика происхождения: она будет работать только в том случае, если сценарий и видео находятся на одном хосте.

На этой странице есть несколько примеров для прямого доступа без библиотеки: http://html5doctor.com/video-canvas-magic/