Video/Image capture

🧑‍💻 Technical Support
4

Here’s a very quick example I made.

import * as ecs from '@8thwall/ecs'

ecs.registerComponent({
  name: 'Capture Screenshot',
  schema: {
    screenshotButton: ecs.eid,
    previewImage: ecs.eid,
  },
  stateMachine: ({world, eid, schemaAttribute, dataAttribute}) => {
    const toLoaded = ecs.defineTrigger()

    ecs.defineState('default')
      .initial()
      .onEnter(() => {
        const {previewImage} = schemaAttribute.get(eid)

        ecs.Hidden.set(world, previewImage)
      })
      .onTick(() => {
        // @ts-ignore
        if (window.XR8) {
          world.time.setTimeout(() => {
            toLoaded.trigger()
          }, 500)
        }
      })
      .onTrigger(toLoaded, 'loaded')

    ecs.defineState('loaded')
      .onEnter(() => {
        const {XR8} = window as any

        XR8.addCameraPipelineModule(XR8.CanvasScreenshot.pipelineModule())
      })
      .listen(schemaAttribute.get(eid).screenshotButton, ecs.input.UI_CLICK, (e) => {
        const {XR8} = window as any
        const {previewImage} = schemaAttribute.get(eid)

        XR8.CanvasScreenshot
          .takeScreenshot()
          .then((data) => {
            ecs.Ui.mutate(world, previewImage, (c) => {
              c.image = `data:image/png;base64,${data}`
            })

            ecs.Hidden.remove(world, previewImage)
          }, (error) => {
            console.log(error)
            // Handle screenshot error.
          })
      })
  },
})

Here’s a video of it in use and the component setup.