Record video using webcam stream in weWeb

[islamtalha01]

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.

[Alexis]

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

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

// 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.';

2. 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

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);
    });

3. 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

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);
    }
})

4. 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

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

[ryanev]

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)