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.
1 Like
Hi, here the steps to start playing and recording your webcam
- 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.';
- 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);
});
- 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);
}
})
- 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 
1 Like