Audio recording on chrome windows but not on chrome android

Question

I was making this site mp3 to webm for a project in discord and I can record on firefox with every device but chromium works only on windows.

When I record an audio it gets stored locally and converts to a black canvas to embed on discord then a bot just ask if the webm is ok or not and if it's accepted it gets transferred to another channel.

It need to be a embed file because bots on discord.js or py can't manipulate audios yet

let mediaRecorder;
let audioChunks = [];
let audioBlob;
let canvas;
let canvasStream;
let audioStream;
function createCanvasWithNickname(name) {
 canvas = document.createElement('canvas');
 canvas.width = 400;
 canvas.height = 144;
 const ctx = canvas.getContext('2d');
 ctx.fillStyle = 'black';
 ctx.fillRect(0, 0, 400, 144); 
 ctx.fillStyle = 'white'; 
 ctx.font = '24px Arial'; 
 ctx.textAlign = 'center'; 
 ctx.textBaseline = 'middle'; 
 ctx.fillText(name, 200, 72); 
 return canvas.captureStream(30); 
}
// Funzione per inizializzare l'audio con un metodo alternativo
async function initializeAudio() {
 const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
 audioStream = stream;
}
document.getElementById('recordButton').addEventListener('click', async () => {
 const name = document.getElementById('nameInput').value.trim();
 canvasStream = createCanvasWithNickname(name);
 await initializeAudio();
 const combinedStream = new MediaStream([...canvasStream.getTracks(), ...audioStream.getTracks()]);
 mediaRecorder = new MediaRecorder(combinedStream, { mimeType: 'video/webm' });
 mediaRecorder.start();
 mediaRecorder.ondataavailable = (event) => {
 audioChunks.push(event.data);
 };
 mediaRecorder.onstop = () => {
 audioBlob = new Blob(audioChunks, { type: 'video/webm' });
 const audioUrl = URL.createObjectURL(audioBlob);
 document.getElementById('audioPreview').src = audioUrl;
 document.getElementById('recordButton').disabled = false;
 document.getElementById('stopButton').disabled = true;
 document.getElementById('sendButton').disabled = false;
 };
 document.getElementById('recordButton').disabled = true;
 document.getElementById('stopButton').disabled = false;
});
document.getElementById('stopButton').addEventListener('click', () => {
 mediaRecorder.stop();
});
document.getElementById('sendButton').addEventListener('click', async () => {
 const name = document.getElementById('nameInput').value.trim();
 if (!name) {
 alert('Devi inserire un nickname!');
 return; 
 }
 const formData = new FormData();
 formData.append('file', audioBlob, 'audio.webm');
 formData.append('username', name);
 try {
 await fetch('webhookhere', {
 method: 'POST',
 body: formData
 });
 alert('Audio inviato a Discord con successo!');
 } catch (error) {
 console.error('Errore durante l\'invio del file:', error);
 }
});

I tried lots of workaround and did research but all I find are people with the same problem and no answers

• Brad: You're probably going to need to put something on that canvas periodically. It's only going to produce a frame when it changes. The frame rate you're giving the captureStream is more of a limit than specifying the actual capture rate. Without the track pumping a frame now and then, the muxer is probably getting confused.