# Record video using webcam stream in weWeb

**URL:** <https://community.weweb.io/t/record-video-using-webcam-stream-in-weweb/7835>\
**Category:** How do I?\
**Tags:** design\
**Created:** [March 28, 2024, 5:03pm UTC](https://community.weweb.io/t/record-video-using-webcam-stream-in-weweb/7835 "2024-03-28T17:03:57Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![islamtalha01](https://avatars.discourse-cdn.com/v4/letter/i/ecd19e/32.png) [@islamtalha01](https://community.weweb.io/u/islamtalha01)\
**Post date:** [March 28, 2024, 5:03pm UTC](https://community.weweb.io/t/record-video-using-webcam-stream-in-weweb/7835/1 "2024-03-28T17:03:57Z")

</div>

Hey everyone , I am new to weWeb and looking to use any existing element to record my video using webcam or any custom way to access the webcam stream and record a clip using custom js/Html. I need guidence or some detail answer to this.I dnt only want to know the code i also want to knwo how to use it and record my clip.

---

<div class="post-metadata">

**Author:** ![Alexis](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/alexis/32/13248_2.png) [@Alexis](https://community.weweb.io/u/Alexis)\
**Post date:** [April 3, 2024, 3:43pm UTC](https://community.weweb.io/t/record-video-using-webcam-stream-in-weweb/7835/2 "2024-04-03T15:43:28Z")

</div>

Hi, here the steps to start playing and recording your webcam

1. How to display your webcam

Use a video element, you can hide the controls, add a name and an id `webcamOutput`

 ![Capture d’écran 2024-04-03 à 17.35.04](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/6/6c32419802aa2a60a7236bd6ffa841dcc0d4b1fc.png)

You can then add a button to enable the user webcam (it will ask for permission) and put the stream inside the video element using custom js

```auto
// Select the video element on the page
const videoElement = document.querySelector('video');

// Call the getUserMedia API with the constraints to activate the webcam
navigator.mediaDevices.getUserMedia({ video: true })
.then((stream) => {
    wwLib.getFrontWindow().stream = stream; // make stream available to browser console
    videoElement.srcObject = stream;
})
.catch((error) => {
    console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);
})

// Return a success message
return 'Webcam activated successfully.';

```

1. Start Recording

You can add another button with another custom js script, that’s will start recording and filling a global variable with the stream

```auto
wwLib.getFrontWindow().recordedChunks = [];
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
    .then(stream => {
        wwLib.getFrontDocument().getElementById('webcamOutput').srcObject = stream;
        wwLib.getFrontWindow().webcamStream = stream;

        wwLib.getFrontWindow().mediaRecorder = new MediaRecorder(stream);
        wwLib.getFrontWindow().mediaRecorder.ondataavailable = event => {
            if (event.data.size > 0) {
                recordedChunks.push(event.data);
            }
        };

        wwLib.getFrontWindow().mediaRecorder.start();
    })
    .catch(error => {
        console.error('Error accessing media devices.', error);
    });

```

1. Stop Recording

You can also create another button with another custom js script, that’s will stop recording and convert the stream into a blob file and return it so you can do something else with it in the following workflow actions

```auto
let mediaRecorder = wwLib.getFrontWindow().mediaRecorder;
let recordedChunks = wwLib.getFrontWindow().recordedChunks;
let webcamStream = wwLib.getFrontWindow().webcamStream;

mediaRecorder.stop();
webcamStream.getTracks().forEach(track => track.stop()); // Stop the webcam stream

return await new Promise(resolve => {
    mediaRecorder.onstop = () => {
        const recordedBlob = new Blob(recordedChunks, { type: "video/webm" });
        recordedChunks = [];

        resolve(recordedBlob);
    }
})

```

1. Download the video

Finally you can download the file by adding more steps into your stop recording workflow, you can convert it to dataurl and then download it

 ![Capture d’écran 2024-04-03 à 17.42.21](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/9/9c3a8247c9fded2f9782a5a85fd4c1eadc39022c.png)  
 ![Capture d’écran 2024-04-03 à 17.42.31](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/1/1d9349dd9b4ef94be2370d4bee578eec0653b63a.png)

We will discuss how to provide this as a component or a plugin so you dont have to use custom javascript to achieve it anymore 🙂

---

<div class="post-metadata">

**Author:** ![ryanev](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@ryanev](https://community.weweb.io/u/ryanev)\
**Post date:** [August 15, 2024, 10:09pm UTC](https://community.weweb.io/t/record-video-using-webcam-stream-in-weweb/7835/3 "2024-08-15T22:09:35Z")

</div>

Would love a custom WeWeb camera component that offers this functionality:

-Default camera: front / rear  
-Default aspect ratio  
-Default mode: photo / video  
-Default audio (for video): muted / unmuted  
-Video: ability to start, pause, restart, discard recording  
-Camera Overlay: ability to overlay a png on top of the camera preview as a positioning gude for user (ie: outline of a car)