How to add camera module pipeline with A-Frame

Question

I am new to 8th wall, and frontend development. I'm developing a project with a bunch of image-target experiences developed in a-frame. And on top of that I need to scan QR code in the AR. From what I see in the documentation, I can add camera pipeline module. But my question is that how can I start implementing that with a-frame component register? the start code is here.

AFRAME.registerComponent('qr-scan', {
  schema: {
  },
  init: function () {
    // Install a module which gets the camera feed as a UInt8Array.
    XR8.addCameraPipelineModule(
    XR8.CameraPixelArray.pipelineModule({luminance: true, width: 240, height: 320}))
    // Install a module that draws the camera feed to the canvas.
    XR8.addCameraPipelineModule(XR8.GlTextureRenderer.pipelineModule())
    // Create our custom application logic for scanning and displaying QR codes.
    XR8.addCameraPipelineModule({
      name : 'qrscan',
      onProcessCpu : ({onProcessGpuResult}) => {
        // CameraPixelArray.pipelineModule() returned these in onProcessGpu.
        const { pixels, rows, cols, rowBytes } = onProcesGpuResult.camerapixelarray
        const { wasFound, url, corners } = findQrCode(pixels, rows, cols, rowBytes)
        return { wasFound, url, corners }
      },
      onUpdate : ({onProcessCpuResult}) => {
        // These were returned by this module ('qrscan') in onProcessCpu
        const {wasFound, url, corners } = onProcessCpuResult.qrscan
        if (wasFound) {
          showUrlAndCorners(url, corners)
        }
      },
    })
  },
})