I'm capturing canvas which contains things like videos, images and text, but I capture each frame per frame, using the onseeked
event to capture the next frame after seeking the video to the desired frame.
But it's taking a long time.
Is there a way to capture canvas faster? e.g. Using GPU acceleration or dedicated software.
EDIT :
function download() {
const blob = new Blob(recordedBlobs, {type: 'video/webm'});
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = 'test.webm';
document.body.appendChild(a);
a.click();
setTimeout(() => {
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}, 100);
}
function handleDataAvailable(event) {
if (event.data && event.data.size > 0) {
recordedBlobs.push(event.data);
}
}
function handleStop(event) {
console.log('Recorder stopped: ', event);
const superBuffer = new Blob(recordedBlobs, {type: 'video/webm'});
document.querySelector('video').src = window.URL.createObjectURL(superBuffer);
}
function stopRecording() {
mediaRecorder.stop();
console.log('Recorded Blobs: ', recordedBlobs);
document.querySelector('video').controls = true;
}
function startRecording() {
videos.forEach(element =>{
element.play();
});
var stream = document.querySelector('canvas').captureStream(30);
let options = {mimeType: 'video/webm'};
recordedBlobs = [];
try {
mediaRecorder = new MediaRecorder(stream, options);
} catch (e0) {
console.log('Unable to create MediaRecorder with options Object: ', e0);
try {
options = {mimeType: 'video/webm,codecs=vp9'};
mediaRecorder = new MediaRecorder(stream, options);
} catch (e1) {
console.log('Unable to create MediaRecorder with options Object: ', e1);
try {
options = 'video/vp8'; // Chrome 47
mediaRecorder = new MediaRecorder(stream, options);
} catch (e2) {
alert('MediaRecorder is not supported by this browser.\n\n' +
'Try Firefox 29 or later, or Chrome 47 or later, ' +
'with Enable experimental Web Platform features enabled from chrome://flags.');
console.error('Exception while creating MediaRecorder:', e2);
return;
}
}
}
mediaRecorder.onstop = handleStop;
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start(100); // collect 100ms of data
console.log('MediaRecorder started', mediaRecorder);
const startTime = getTime();
let nextExpTime = startTime;
var curTime = null;
const onTimer = () => {
videos.forEach(element =>{
let dureeTotale = element.duration; // Durée de la vidéo en cours
if(frameNum == 1){
element.play();
element.pause();
}
// let seek = ((frameNum % (dureeTotale * 30 +1)) / 30); // Si dépassement, retour à 0 secondes;
let framerate = numFrames / dureeTotale;
if ((element.currentTime * framerate) === numFrames){
stopRecording();
download();
// capturer.stop();
// capturer.save(showVideoLink);
clearInterval(timer);
return;
}
})
};
onTimer();
const timer = setInterval(onTimer, 0);
}
}