É possível acessar a câmera e o microfone do usuário na plataforma da Web com a API Media Capture and Streams. O método getUserMedia()
solicita que o usuário acesse uma câmera e/ou um microfone para capturar como um fluxo de mídia. Esse fluxo pode ser processado em uma linha de execução Web Audio separada com um AudioWorklet que oferece processamento de áudio de latência muito baixa.
O exemplo abaixo mostra como processar o áudio do microfone do usuário de maneira eficiente.
let stream;
startMicrophoneButton.addEventListener("click", async () => {
// Prompt the user to use their microphone.
stream = await navigator.mediaDevices.getUserMedia({
audio: true,
});
const context = new AudioContext();
const source = context.createMediaStreamSource(stream);
// Load and execute the module script.
await context.audioWorklet.addModule("processor.js");
// Create an AudioWorkletNode. The name of the processor is the
// one passed to registerProcessor() in the module script.
const processor = new AudioWorkletNode(context, "processor");
source.connect(processor).connect(context.destination);
log("Your microphone audio is being used.");
});
stopMicrophoneButton.addEventListener("click", () => {
// Stop the stream.
stream.getTracks().forEach(track => track.stop());
log("Your microphone audio is not used anymore.");
});
// processor.js
// This file is evaluated in the audio rendering thread
// upon context.audioWorklet.addModule() call.
class Processor extends AudioWorkletProcessor {
process([input], [output]) {
// Copy inputs to outputs.
output[0].set(input[0]);
return true;
}
}
registerProcessor("processor", Processor);
Suporte ao navegador
MediaDevices.getUserMedia()
Web Audio
AudioWorklet
Leitura adicional
- Especificação de captura e streams de mídia do W3C (em inglês)
- Especificação da API Web Audio do W3C
- Enter AudioWorklet