Below are two canvases, both rendered with webgl (webgl2 for the first one).
A video element is uploaded to a texture with texImage2d, then rendered to fill the canvas.
Two different readPixel approaches are then applied, firstly via a PIXEL_PACK_BUFFER, then directly to an ArrayBuffer.
To confirm the data is correct, it is uploaded with texImage2d to the second context and rendered there too.
In Safari 15.2 (both iOS and macOS on an M1 Pro Macbook) the direct readPixels is significantly slower.
See WebKit bug 235002

Total Draw Time: 0 ms

Upload from video:
Draw submission:
glFinish:
readPixels (with buffer):
readPixels (direct):

Upload from Array Buffer:
Draw submission:
glFinish:

Render loop: 0 fps

Math.random() calls: