如何使用 A-Frame 添加摄像头模块流水线

时间:2021-06-21 18:27:22

标签: 8thwall-xr

我是 8th wall 和前端开发的新手。我正在开发一个项目,其中包含在框架中开发的一系列图像目标体验。最重要的是,我需要扫描 AR 中的二维码。 从我在文档中看到的,我可以添加相机管道模块。但我的问题是我如何开始使用框架组件寄存器来实现它?启动代码在这里。

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)
        }
      },
    })
  },
})

0 个答案:

没有答案
相关问题