Example of init with data

[vivian940425]

Hi Brion,

Thanks for the great work. New to the YUV format and I am trying to display YUV420 images on the canvas.

Read through the document, I didn't see a clear example of populating the frame object if I have the bytes array already. Can you enlight me the gap between YUV-buffer and YUV-canvas Thank you!

const data = new Uint8Array(/* Pseudo */);
// Dont mind the new operator, Data is coming from backend in NV12 format  YYYYYYYY UVUV 

// Below is copied from the document
let format: YUVFormat = {
  // Many video formats require an 8- or 16-pixel block size.
  width: 1920,
  height: 1088,

  // Using common 4:2:0 layout, chroma planes are halved in each dimension.
  chromaWidth: 1920 / 2,
  chromaHeight: 1088 / 2,

  // Crop out a 1920x1080 visible region:
  cropLeft: 0,
  cropTop: 4,
  cropWidth: 1920,
  cropHeight: 1080,

  // Square pixels, so same as the crop size.
  displayWidth: 1920,
  displayHeight: 1080,
};

format = YUVBuffer.format(format);

// This is the part I am confused, after we initialized the format, how do I feed the format object with the data array?
const buffer = /* somehow format gets the data populated and continue to YUV Canvas */

yuv.drawFrame(buffer);

Thank you so much!