I am trying to implement a switch to turn audio on and off with electron desktop capturer and my code actually does work as soon as I launch my app but it can only record once when I tried to record second time and save the video it again saves the video which it recorded for the first time and however many times I record it saves the video which I first recorded someone please help with this I hope am clear with my problem
JavaScript file
const { writeFile } = require('original-fs');
const { dialog , Menu } = remote;
const videoElement = document.querySelector('video');
let mediarecorderwithaudio;
let mediarecorderwithoutaudio;
const recordedChunks = [];
var checkaudio;
playvideo();
document.addEventListener('DOMContentLoaded', function () {
var checkbox = document.querySelector('input[type="checkbox"]');
checkbox.addEventListener('change', function () {
if (checkbox.checked) {
checkaudio = true;
// do this
console.log('Checked');
} else {
// do that
checkaudio = false;
console.log('Not checked');
}
});
});
var recordingtxt = document.getElementById('recordtext');
const stopBtn = document.getElementById('stopBtn');
stopBtn.style.visibility = 'hidden';
stopBtn.onclick = e => {
if(checkaudio == true){
mediarecorderwithaudio.stop();
}else{
mediarecorderwithoutaudio.stop();
}
startBtn.classList.remove('is-danger');
startBtn.innerText = 'Start Recording';
startBtn.className = 'buttonStart'
stopBtn.style.visibility = 'hidden'
recordingtxt.innerText = "Now Previewing => " + source.name;
};
//Adding changes
const startBtn = document.getElementById('startBtn');
startBtn.onclick = e => {
if(checkaudio == true){
mediarecorderwithaudio.start();
}else{
mediarecorderwithoutaudio.start();
}
startBtn.classList.add('is-danger');
startBtn.innerText = 'Recording';
stopBtn.style.visibility = 'visible'
startBtn.className = 'buttonRecording'
recordingtxt.innerText = "Now Recording => " + source.name;
};
const videoSelectBtn = document.getElementById('videoSelectBtn');
videoSelectBtn.onclick = getVideoSources;
async function getVideoSources() {
const inputSources = await desktopCapturer.getSources({
types: ['window', 'screen']
});
if(checkaudio == true){
const videoOptionsMenu = Menu.buildFromTemplate(
inputSources.map(source => {
return {
label: source.name,
click: () => selectSourceWithAudio(source)
};
})
);
videoOptionsMenu.popup();
}else{
const videoOptionsMenu = Menu.buildFromTemplate(
inputSources.map(source => {
return {
label: source.name,
click: () => selectSourceWithoutAudio(source)
};
})
);
videoOptionsMenu.popup();
}
}
async function playvideo(){
const constraints = {
audio: {
mandatory: {
chromeMediaSource: 'desktop',
chromeMediaSourceId: 'screen:0:0',
}
},
video:{
mandatory:{
chromeMediaSource: 'desktop',
chromeMediaSourceId: 'screen:0:0',
}
}
}
const stream = await navigator.mediaDevices
.getUserMedia(constraints);
videoElement.srcObject = stream;
videoElement.play();
}
async function selectSourceWithAudio(source){
videoSelectBtn.innerText = source.name;
recordingtxt.innerText = "Now Previewing => " + source.name;
const constraints = {
audio: {
mandatory: {
chromeMediaSource: 'desktop',
chromeMediaSourceId: source.id,
}
},
video:{
mandatory:{
chromeMediaSource: 'desktop',
chromeMediaSourceId: source.id,
}
}
}
const stream = await navigator.mediaDevices
.getUserMedia(constraints);
videoElement.srcObject = stream;
videoElement.muted = true;
videoElement.play();
console.log(source.id);
const options = { mimeType: 'video/webm; codecs=vp9'};
mediarecorderwithaudio = new MediaRecorder(stream, options);
mediarecorderwithaudio.ondataavailable = handleDataAvailable;
mediarecorderwithaudio.onstop = handleStop;
}
async function selectSourceWithoutAudio(source){
videoSelectBtn.innerText = source.name;
recordingtxt.innerText = "Now Previewing => " + source.name;
const constraints = {
audio: false,
video:{
mandatory:{
chromeMediaSource: 'desktop',
chromeMediaSourceId: source.id,
}
}
}
const stream = await navigator.mediaDevices
.getUserMedia(constraints);
videoElement.srcObject = stream;
videoElement.muted = true;
videoElement.play();
console.log(source.id);
const options = { mimeType: 'video/webm; codecs=vp9'};
mediarecorderwithoutaudio = new MediaRecorder(stream, options);
mediarecorderwithoutaudio.ondataavailable = handleDataAvailable;
mediarecorderwithoutaudio.onstop = handleStop;
}
function handleDataAvailable(e){
console.log('video data available')
recordedChunks.push(e.data);
}
async function handleStop(e){
const blob = new Blob(recordedChunks, {
type: 'video/webm; codecs=vp9'
});
const buffer = Buffer.from(await blob.arrayBuffer());
const { filePath } = await dialog.showSaveDialog({
buttonLabel: 'Save Video',
defaultPath: `vid-${Date.now()}.webm`
});
console.log(filePath);
writeFile(filePath, buffer, () => console.log('Video saved successfully'));
}
And here's the HTML File
<html>
<head>
<meta charset="UTF-8">
<title>Margs Screen Recorder</title>
<link rel="stylesheet" href="index.css">
<script defer src="render.js"></script>
</head>
<body>
<div style="position: relative; align-items: center; text-align: center;">
<h1>Margs Screen Recorder</h1>
</div>
<div style="position: relative; align-content: center;">
<video width="896" height="504" style="position: relative;"></video>
</div>
<div style="position: relative; ">
<button id="startBtn" class="buttonStart">Start Recording</button>
<button id="stopBtn" class="buttonStop">Stop Recording</button>
</div>
<h5 id="recordtext">Now Previewing => Entire Screen</h5>
<hr />
<button id="videoSelectBtn" class="button is-text">
Choose what to record
</button>
<div id="button-container" style="position: relative; top: 25px;">
<b1>Audio</b1>
<label class="switch" style="position: relative; left: 15px;">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
</body>
</html>