Is it possible to get pixels from ImageBitMap web object without a canvas?

Question

I need to manage pixels from a webcam in js. I need them in Uint8ClampedArray format. So far I do

this.imageCapture.grabFrame()
        .then(imageBitmap => {
            this.context2d.drawImage(imageBitmap, 0, 0,imageBitmap.width, imageBitmap.height);
        })

and then later I get pixels with

this.context2d.getImageData(0,0,this._videoCanvas.width,this._videoCanvas.height);

and then I format imageData

I was thinking that there may be way to get data from ImageBitMap without using a canvas ? But could not find any workaround so far. Someone has clever answer to this dumb question ?

Thanks !

Answer 1

No, there is no way currently.

We are working on adding a new getImageData() method on the ImageBitmap interface specs issue but this still needs implementer's interest, someones to write the specs and probably a good load of discussion as everything in there is not that easy.

(ImageBitmaps can represent a lot of different sources which are internally stored in various places with various tradeoffs for readback).

So for the time being, the only solution is indeed to go through a canvas.

In a near future, probably closer than ImageBitmap.getImageData , you will be able to extract VideoFrames from your MediaStream and paint it directly to a canvas as shown in this answer of mine , thus avoiding the ImageBitmap step, or even read the YUV planes of each frame as demonstrated in this answer of mine .