# Need to preview my webcam on weweb et take pictures

**URL:** <https://community.weweb.io/t/need-to-preview-my-webcam-on-weweb-et-take-pictures/5324>\
**Category:** How do I?\
**Created:** [November 9, 2023, 4:37pm UTC](https://community.weweb.io/t/need-to-preview-my-webcam-on-weweb-et-take-pictures/5324 "2023-11-09T16:37:56Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![rayanenocode](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/rayanenocode/32/13166_2.png) [@rayanenocode](https://community.weweb.io/u/rayanenocode)\
**Post date:** [November 9, 2023, 4:37pm UTC](https://community.weweb.io/t/need-to-preview-my-webcam-on-weweb-et-take-pictures/5324/1 "2023-11-09T16:37:56Z")

</div>

Hi everyone, I would like to have a preview of my webcam and put a button at the bottom “capture” with the workflow that goes with it. The problem is that I have not found an element to preview his webcam ☹

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [November 9, 2023, 8:28pm UTC](https://community.weweb.io/t/need-to-preview-my-webcam-on-weweb-et-take-pictures/5324/2 "2023-11-09T20:28:54Z")

</div>

Hi @rayanenocode 👋

The [QR code scanner element](https://docs.weweb.io/add-elements/elements/qr-code-reader.html) will allow you to access your webcam.

Perhaps you can work with it to achieve this. I think you’ll need a snippet of JavaScript to handle the “capture” action in your workflow.

Haven’t tried it but [this article](https://developer.mozilla.org/en-US/docs/Web/API/Media_Capture_and_Streams_API/Taking_still_photos) might be a good place to start once you’ve managed to preview your webcam with the QR code scanner.

Does that help?

---

<div class="post-metadata">

**Author:** ![rayanenocode](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/rayanenocode/32/13166_2.png) [@rayanenocode](https://community.weweb.io/u/rayanenocode)\
**Post date:** [November 9, 2023, 8:43pm UTC](https://community.weweb.io/t/need-to-preview-my-webcam-on-weweb-et-take-pictures/5324/3 "2023-11-09T20:43:22Z")

</div>

Hello ! Thank you for your response. it would be nice to have a native function on weweb to do what I’m describing, there are several use cases where this would be relevant.

---

<div class="post-metadata">

**Author:** ![rayanenocode](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/rayanenocode/32/13166_2.png) [@rayanenocode](https://community.weweb.io/u/rayanenocode)\
**Post date:** [November 9, 2023, 8:51pm UTC](https://community.weweb.io/t/need-to-preview-my-webcam-on-weweb-et-take-pictures/5324/4 "2023-11-09T20:51:16Z")

</div>

By the way i asked the js ai generator to do the thing for me, here is the code :

// Access the global variable  
let cameras = variables[‘33ffb9fe-b797-487a-a038-cd0cf7f00901-cameras’];

// Check if the camera is available  
if (cameras && cameras.length \> 0) {  
// Get the first camera  
let camera = cameras[0];

```
// Create a new canvas
let canvas = document.createElement('canvas');

// Set the canvas dimensions
canvas.width = camera.videoWidth;
canvas.height = camera.videoHeight;

// Get the 2D context from the canvas
let ctx = canvas.getContext('2d');

// Draw the current frame from the camera onto the canvas
ctx.drawImage(camera, 0, 0, canvas.width, canvas.height);

// Convert the canvas image to Data URL
let imageData = canvas.toDataURL('image/png');

// Return the image data
return imageData;

```

} else {  
// If no camera is available, return null  
return null;  
}

and it seems like this work 🙂

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/f/f6d904b4c47942e5207dba67815c58e7f6a17fd4.png)

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [November 10, 2023, 2:18pm UTC](https://community.weweb.io/t/need-to-preview-my-webcam-on-weweb-et-take-pictures/5324/5 "2023-11-10T14:18:39Z")

</div>

> [@rayanenocode](#):
>
> it would be nice to have a native function on weweb to do what I’m describing, there are several use cases where this would be relevant.

Good point! Just created a product ticket so the team can explore the idea. I think with the upcoming marketplace, it’s likely we’ll have more and more components like this. Maybe you’ll even want to share the one you built on there!

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [November 10, 2023, 2:19pm UTC](https://community.weweb.io/t/need-to-preview-my-webcam-on-weweb-et-take-pictures/5324/6 "2023-11-10T14:19:14Z")

</div>

> [@rayanenocode](#):
>
> By the way i asked the js ai generator to do the thing for me

Niiiice! I hadn’t even thought of it. Really cool solution! Thanks for sharing it 🙂