webgl_video_processor/video_processor/canvas2d_video_processor.js

var canvasSource;
var camera1Ctx;
var camera2Ctx;
var isCopying = false;
var timer;

const mergedViewSize = [1920, 1080];
const camera1Size = [640, 480];
const camera1CilpStartPoint = [1280, 600];
const camera2Size = [640, 480];
const camera2PartSize = [640, 160];
const camera2CilpStartPoint = [0, 200];

var camera1Width;
var camera1Height;
var camera1CilpX;
var camera1CilpY;
var camera2Width;
var camera2Height;
var camera2PartWidth;
var camera2PartHeight;
var camera2CilpX;
var camera2CilpY;

/// 拷贝视频流
function copyVideoStream() {
  let gl = canvasSource.getContext("webgl", { preserveDrawingBuffer: true });
  let camera1Pixels = new Uint8Array(camera1Width * camera1Height * 4);
  let camera2PartPixels = new Uint8Array(
    camera2PartWidth * camera2PartHeight * 4 * 3
  );
  
  gl.readPixels(
    camera1CilpX,
    camera1CilpY,
    camera1Width,
    camera1Height,
    gl.RGBA,
    gl.UNSIGNED_BYTE,
    camera1Pixels
  );

  camera1Ctx.canvas.width = camera1Width;
  camera1Ctx.canvas.height = camera1Height;

  let camera1ImageData = camera1Ctx.createImageData(
    camera1Width,
    camera1Height
  );

  camera2Ctx.canvas.width = camera2Width;
  camera2Ctx.canvas.height = camera2Height;
  let camera2PartImageData = camera2Ctx.createImageData(
    camera2PartWidth * 3,
    camera2PartHeight
  );

  // 绘制摄像头1画面
  camera1ImageData.data.set(camera1Pixels);
  camera1Ctx.putImageData(camera1ImageData, 0, 0);

  // 绘制摄像头2画面
  // 分三次填充数据
  gl.readPixels(
    camera2CilpX,
    camera2CilpY,
    camera2PartWidth * 3,
    camera2PartHeight,
    gl.RGBA,
    gl.UNSIGNED_BYTE,
    camera2PartPixels
  );
  camera2PartImageData.data.set(camera2PartPixels);
  camera2Ctx.putImageData(camera2PartImageData, 0, camera2PartHeight * 2);
  camera2Ctx.putImageData(
    camera2PartImageData,
    -camera2PartWidth,
    camera2PartHeight
  );
  camera2Ctx.putImageData(camera2PartImageData, -camera2PartWidth * 2, 0);

  /// 清理变量
  camera1Pixels = null;
  camera2PartPixels = null;
  camera1ImageData = null;
  camera2PartImageData = null;
}

// Start copying the video stream
function startCopying() {
  if (!isCopying) {
    isCopying = true;
    console.log("开始拷贝视频流");
    const video1 = document.getElementById("video1");
    canvasSource = video1;
    const camera1 = document.getElementById("camera1");
    const camera2 = document.getElementById("camera2");
    camera1Ctx = camera1.getContext("2d");
    camera2Ctx = camera2.getContext("2d");
    initSize();
  }
}

// Stop copying the video stream
function stopCopying() {
  isCopying = false;
  timer = null;
}

function initSize() {
  const gl = canvasSource.getContext("webgl");
  const scale = gl.drawingBufferWidth / mergedViewSize[0];
  console.log("Scale", scale);
  camera1Width = parseInt(camera1Size[0] * scale);
  camera1Height = parseInt(camera1Size[1] * scale);
  camera1CilpX = parseInt(camera1CilpStartPoint[0] * scale);
  camera1CilpY = parseInt(camera1CilpStartPoint[1] * scale);
  camera2Width = parseInt(camera2Size[0] * scale);
  camera2Height = parseInt(camera2Size[1] * scale);
  camera2PartWidth = parseInt(camera2PartSize[0] * scale);
  camera2PartHeight = parseInt(camera2PartSize[1] * scale);
  camera2CilpX = parseInt(camera2CilpStartPoint[0] * scale);
  camera2CilpY = parseInt(camera2CilpStartPoint[1] * scale);
}