I've coded an extension able to capture screen. It works, yet the video file I download has no metadata (00:00 / 00:00 duration always, unable to scroll video). Probably, I've missed some part adding this metadata to video. How to?
(also someone gave me this link as an answer, but it's almost the same as my approach)
UDP: This might be the solution. Yet though I can define that way duration for tag, it doesn't work for downloaded blob. Code updated.
My code (simplified):
class Grabber {
constructor(obj) {
this.incStream = obj;
this.recordedData = [];
this.mediaRecorder = new MediaRecorder(this.incStream);
this.mediaRecorder.ondataavailable = (event) => {
this.recordedData.push(event.data);
}
}
start() {
this.mediaRecorder.start();
}
stop() {
this.incStream.getTracks().forEach(function(track) {
track.stop();
});
this.mediaRecorder.stop();
setTimeout(() => {
this.createFileFormCurrentRecordedData();
}, 1000);
}
async createFileFormCurrentRecordedData() {
const blob = new Blob( this.recordedData, { type: 'video/mp4' });
//const file = new File( [ blob ], "testScreenGrab.mp4", { type: "video/mp4"} );
let video = document.createElement('video');
video.src = window.URL.createObjectURL(blob);
while(isNaN(video.duration) || video.duration === Infinity) {
video.currentTime = 90000;
await new Promise(r => setTimeout(r, 100));
}
let duration = video.duration;
console.log('Video duration: ' + duration);
let link = document.createElement('a');
link.type = "video/mp4";
link.href = video.src;
link.download = 'test.mp4';
link.click();
}
chrome.runtime.onMessage.addListener(
async function(request, sender, sendResponse) {
const captureStream = await navigator.mediaDevices.getDisplayMedia()
const Grb = new Grabber(captureStream);
Grb.start();
}
);
