PortableDeviceAdmin/src/assets/js/video-lib/renderer_2d.js

export class Canvas2DRenderer {
  canvas = null;
  ctx = null;
  getShowData = null;
  storage = [];

  constructor(canvas, getShowData, outputLayer) {
    this.canvas = canvas;
    this.ctx = canvas.getContext('2d');
    this.getShowData = getShowData;
    this.outputLayer = outputLayer;
  }
  #ArraysAreEqual(arr1, arr2) {
    if (arr1.length !== arr2.length) {
      return false;
    }
    return arr1.every(function (val, index) {
      return val === arr2[index];
    });
  }

  #DrawBox(arr) {
    if (arr.length) {
      for (let i = 0; i < arr.length; i++) {
        this.ctx.strokeStyle = 'red';
        this.ctx.lineWidth = 10;
        if (this.outputLayer) {
          let [x, y, w, h] = [
            arr[i].x * this.outputLayer.WidthRatio,
            arr[i].y * this.outputLayer.HeightRatio,
            arr[i].w * this.outputLayer.WidthRatio,
            arr[i].h * this.outputLayer.HeightRatio,
          ];
          this.ctx.strokeRect(x, y, w, h);
          this.storage = [x, y, w, h];
        } else {
          this.ctx.strokeRect(arr[i].x, arr[i].y, arr[i].w, arr[i].h);
          this.storage = [arr[i].x, arr[i].y, arr[i].w, arr[i].h];
        }
      }
    } else {
      let [x, y, w, h] = this.storage;
      this.ctx.strokeStyle = 'transparent';
      this.ctx.lineWidth = 10;
      this.ctx.strokeRect(x, y, w, h);
    }
  }
  temp = null;
  draw(frame) {
    this.canvas.width = frame.displayHeight;
    this.canvas.height = frame.displayWidth;
    this.ctx.translate(frame.displayHeight, 0);
    this.ctx.rotate(Math.PI / 2);
    this.ctx.drawImage(frame, 0, 0, frame.displayWidth, frame.displayHeight);
    if (self.GetImg) {
      this.ctx.canvas.convertToBlob().then((blob) => {
        self.postMessage({ img: blob, type: 'img' });
      });
      self.GetImg = false;
    }
    const showData = this.getShowData();
    if (showData) {
      this.#DrawBox(showData);
    }
    frame.close();
  }
}