从HTML画布读取像素数据

Question

如何从常规画布中获取“像素”数据？

因此，有一个我正在尝试适应我的代码的代码，它的工作方式如下：

let pixels = new Uint8Array(640 * 360 * 4);
const gl = renderer.getContext();
gl.readPixels(0,0,this.width,this.height, gl.RGBA, gl.UNSIGNED_BYTE, this.pixels);
videoEncoder.queueFrame({type: "video", pixels: this.pixels});

renderer在哪里

renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});

但是，对于我而言，不是要像WebGLRenderer那样制作动画图形，而是要对视频播放器中的帧进行编码，所以我要做的是将视频流引导到画布中：

let ctx = canvas.getContext('2d');
function animate() {
   requestAnimationFrame( animate );
   renderer.render( scene, camera ); // this is the one used above, the sample WebGL animation
   ctx.drawImage(player, 0, 0, 640, 360); // this is the video stream, player the 'video' element
}
animate();

现在真正的问题是如何从canvas / ctx获取“像素”？因此，它类似于gl.readPixels(0,0,this.width,this.height, gl.RGBA, gl.UNSIGNED_BYTE, this.pixels);

这样我就可以做到

let pixelsFromCanvas = readPixelsFromCanvas(canvas);
videoEncoder.queueFrame({type: "video", pixels: pixelsFromCanvas});

我有3个视频同步播放的屏幕截图：

（画布（2D）-左，视频播放器-中，WebGL画布-右）

这是视频编码的演示： http://videoncoder.s3-website.eu-central-1.amazonaws.com/