Help with js code to screenshot webcam

Ask us anything How do I?
21

A base64 image formatted as a data url, as you’re calling “toDataURL” method.

You can bind this to an image element to preview it. You can send it to a backend to store it too.

1 Like
22

Thank you !

23

Thanks for the discussion. I’ve used the simplified code @Alexis provided along with a select component to choose which camera to use (discussed in docs for QR code reader).

For some reason every other image I capture is mirrored. Any idea why this would happen?

24

Hey ! In that case you will need to add this bit of code in your code so that will be

const ctx = qrCodeReaderElement.getContext('2d');

image.onload = () => {
    ctx.scale(-1, 1);
    ctx.drawImage(image, -image.width, 0);

    const dataURL = qrCodeReaderElement.toDataURL('image/jpeg');
    return dataURL;
}
1 Like
25

Have you been able to set the default camera using a variable? It seems like the QR Code Reader component isn’t responding to the camera name being set on page load. It only works if I change the variable on the same page the component is on.

27

Hey eric, here is the full tutorial Loom | Free Screen & Video Recording Software | Loom

and here is the code

function processImage() {
  return new Promise((resolve, reject) => {
  
    const qrCodeReaderElement = wwLib.getFrontDocument().querySelector('#yourelementid > canvas');

    if (qrCodeReaderElement) {
     
      const imageData = qrCodeReaderElement.toDataURL('image/jpeg');

      resolve(imageData);
    } 
  });
}

return processImage().then(imageData => {

  return imageData;
})
2 Likes
28

Thanks again. I have the saving of images working great. Also modified to ensure the captures are not mirrored (incidentally, in your tutorial, this happens to you). The issue now is that I cannot force the camera component to use a specific camera. Here is what happens:

FWIW, this is the code I’m currently using:

const qrCodeReaderElement = wwLib.getFrontDocument().querySelector('#camera_div > canvas');

if (qrCodeReaderElement) {
  const context = qrCodeReaderElement.getContext('2d');

  // Flip the canvas horizontally
  context.translate(qrCodeReaderElement.width, 0);
  context.scale(-1, 1);

  // Draw the image onto the canvas
  context.drawImage(qrCodeReaderElement, 0, 0, qrCodeReaderElement.width, qrCodeReaderElement.height);

  // Reset transformations
  context.setTransform(1, 0, 0, 1, 0, 0);

  // Capture the mirrored image
  return qrCodeReaderElement.toDataURL('image/jpeg');
} else {
  return null; // Handle case when the canvas element is not found
}
1 Like
29

Ahh right! Now I see, this kind of problem has already happened to me on weweb too. I’ll try to find a solution and get back to you, maybe it’s a bug on weweb too @Alexis do you have any advice?

30

Fantastic, thanks

1 Like