I’ve encountered a peculiar issue with the new Blob constructor. My code returns an array of Blobs from the MediaRecorder:
https://i.sstatic.net/X8Z7c.png
However, when trying to work with this blob in my code, calling new Blob(audioChunks) results in an empty array being outputted. Strangely, running the same command directly in the console generates a new Blob correctly! Here's the complete method:
navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
const mediaRecorder = new MediaRecorder(stream);
mediaRecorder.start();
const audioChunks = [];
mediaRecorder.addEventListener("dataavailable", event => {
audioChunks.push(event.data);
});
sleep(1000).then(r => {
mediaRecorder.stop();
console.log(audioChunks) // Show the audioChunks
console.log(new Blob(audioChunks)) // Display the failed blob
let audio = new File(new Blob(audioChunks), `${name}.webm`, {
type: "audio/webm;codecs=opus"
});
global.addTrack("filename", audio, id);
console.log(audioChunks)
});
});
Upon clicking the button that triggers this process, I receive the following console output:
https://i.sstatic.net/oylWj.png
This functionality is constructed as a method in Vue.js, but it’s uncertain whether that plays a role in the issue or not.