Захватите HTML-холст для обработки

Question

Я управляю небольшими проектами, требующими захвата и анализа содержимого холста.

Это агент, который играет в Google игру без динозавров в интернете .

Я могу получить доступ к содержимому холста из консоли с помощью:

canvas = document.getElementById("gamecanvas");
context = canvas.getContext("2d");
imgData = context.getImageData(0,0,600,150);

Но я пытался использовать HTMLCanvasElement.captureStream() для генерации события с заданной частотой кадров или при изменении холста.

Но когда я реализую это как:

const canvas = document.getElementById("gamecanvas");
const stream = canvas.captureStream(25)
stream.onaddtrack = function(event) { console.log("Called") }

Я бы ожидал, что console.log("Called") будет вызываться 25 раз в секунду, но ничего не вызывается.Я что-то не так понял о потоках?

Answer 1

HTMLCanvasElement.captureStream возвращает MediaStream.Этот MediaStream изначально состоит из специального вида MediaStreamTrack : a CanvasCaptureMediaStreamTrack , который представляет собой просто специальную видеодорожку со ссылкой на оригинальный HTMLCanvasElement.

Это все еще можетна этом этапе звучит иностранным языком ...
MediaStream - это контейнерный объект, содержащий сами дорожки, содержащие поток необработанных данных, которые являются частью носителя.Аудиодорожка будет содержать поток необработанных аудиоданных, а видео или холст - поток необработанных видеоданных.

Треки могут быть добавлены или удалены из MediaStream, так что MediaStream, который был переданвидео с веб-камеры должно быть изменено на видео, поступающее через webRTC и т. д. Это то, что отслеживает событие onaddtrack: когда MediaStreamTrack добавляется в контейнер MediaStream.
Это не имеет ничего общего с кадрами, добавляемыми в видеопоток,для MediaStream это либо потоковая , либо пауза .

Таким образом, MediaStream содержит поток видеоданных, сгенерированных из текущего состояния холста.
CapturedПоток из холста имеет это специальное свойство, которое может потребоваться на частоте максимум , когда браузер должен добавлять новые кадры в видеопоток.Однако это всего лишь максимум;если на холсте не было нарисовано ничего нового, то ни одно изображение не будет добавлено, и поток продолжит отображать последнее добавленное изображение.

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

1. рисование на холсте1
2. захват потока
3. визуализация потока в
4. рисование на холсте2
5. обработка изображения, нарисованного на холсте2

В то время как все, что вам нужно, это

1. рисовать на холсте1
2. обработка изображения, нарисованного на холсте1

Если вы хотите сделать это с определенной частотой кадров, то установите цикл ожидания.