Skip to main content

Camera

Place the camera component on the page.

<blaze-camera></blaze-camera> 

How to use

Add event listeners

Firstly set up two event handlers. One for when photos are taken and another when recordings are made.

const camera = document.querySelector('blaze-camera');

camera.addEventListener('photo', async (e) => {
  const blob = e.detail;
  const dataUrl = await camera.toDataURL(blob);
  console.log(dataUrl); // data:image/png;base64,iVBORw0KGg...
});

camera.addEventListener('recording', async (e) => {
  const blob = e.detail;
  const dataUrl = await camera.toDataURL(blob);
  console.log(dataUrl); // data:audio/ogg;codecs=opus;base64,GkXfo6NCho...
}); 

The camera component provides a toDateUrl(input: Blob) conversion helper that accepts Blobs and converts them to data URLs.

Functions

Now we have our event listeners in place we can turn the camera on, take photos, record videos and when we're done turn the camera off.

await camera.on();
camera.takePhoto();
camera.record();
camera.stop();
camera.off(); 

Note that on() returns a promise. You should wait until the camera has been turned on before trying to take pictures or making recordings.