import 'regenerator-runtime';
import '../scss/styles.scss';
console.log('main');
const startBtn = document.getElementById('startBtn');
const video = document.getElementById('preview');
let stream;
let recorder;
let videoFile;
const handleDownload = () => {
const a = document.createElement('a');
a.href = videoFile;
a.download = 'MyRecording.webm';
document.body.appendChild(a);
a.click();
};
const handleStop = () => {
startBtn.innerText = 'Download Recording';
startBtn.removeEventListener('click', handleStop);
startBtn.addEventListener('click', handleDownload);
recorder.stop();
};
const handleStart = async () => {
startBtn.innerText = 'Stop Recording';
startBtn.removeEventListener('click', handleStart);
startBtn.addEventListener('click', handleStop);
recorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
recorder.ondataavailable = (e) => {
videoFile = URL.createObjectURL(event.data);
video.srcObject = null;
video.src = videoFile;
video.loop = true;
video.play();
};
recorder.start();
};
const init = async () => {
stream = await navigator.mediaDevices.getUserMedia({
audio: false,
video: true,
});
video.srcObject = stream;
video.play();
};
init();
startBtn.addEventListener('click', handleStart);