2.9.3 替换视频背景_WebRTC技术详解：从0到1构建多人视频会议系统-QQ阅读男生科幻网

上QQ阅读APP看书，第一时间看更新

2.9.3　替换视频背景

代码清单2-62将视频内容绘制在canvas上，使用getImageData()方法获取视频的像素数据，然后遍历所有像素。如果像素RGB大于（150,150,150），说明像素偏白色，则使用背景图片对应的像素进行替换，最后将替换后的数据重新绘制在canvas上。

代码清单2-62　替换视频背景

computeFrame() {
  this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
  let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
  let l = frame.data.length / 4;

  for (let i = 0; i < l; i++) {
    let r = frame.data[i * 4 + 0];
    let g = frame.data[i * 4 + 1];
    let b = frame.data[i * 4 + 2];
    let a = frame.data[i * 4 + 3];

    if ( r > 150 && g > 150 && b > 150) {
      frame.data[i * 4 + 0] = this.imageFrame.data[i*4 + 0];
      frame.data[i * 4 + 1] = this.imageFrame.data[i*4 + 1];
      frame.data[i * 4 + 2] = this.imageFrame.data[i*4 + 2];
    }
  }
  this.ctx2.putImageData(frame, 0, 0);
}