Se puede acceder a la cámara y el micrófono del usuario en la plataforma web con la API de Media Capture y Streams. El método getUserMedia() le solicita al usuario que acceda a una cámara o un micrófono para capturar como una transmisión multimedia. Luego, podrás grabar esta transmisión con la API de MediaRecorder o compartirla con otras personas en la red. La grabación se puede guardar en un archivo local con el método showOpenFilePicker().
El siguiente ejemplo muestra cómo puedes grabar audio desde el micrófono del usuario en formato WebM y guardar la grabación en el sistema de archivos del usuario.
let stream;
let recorder;
startMicrophoneButton.addEventListener("click", async () => {
// Prompt the user to use their microphone.
stream = await navigator.mediaDevices.getUserMedia({ audio: true });
recorder = new MediaRecorder(stream);
});
stopMicrophoneButton.addEventListener("click", () => {
// Stop the stream.
stream.getTracks().forEach(track => track.stop());
});
startRecordButton.addEventListener("click", async () => {
// For the sake of more legible code, this sample only uses the
// `showSaveFilePicker()` method. In production, you need to
// cater for browsers that don't support this method, as
// outlined in https://web.dev/patterns/files/save-a-file/.
// Prompt the user to choose where to save the recording file.
const suggestedName = "microphone-recording.webm";
const handle = await window.showSaveFilePicker({ suggestedName });
const writable = await handle.createWritable();
// Start recording.
recorder.start();
recorder.addEventListener("dataavailable", async (event) => {
// Write chunks to the file.
await writable.write(event.data);
if (recorder.state === "inactive") {
// Close the file when the recording stops.
await writable.close();
}
});
});
stopRecordButton.addEventListener("click", () => {
// Stop the recording.
recorder.stop();
});
Navegadores compatibles
MediaDevices.getUserMedia()
API de MediaRecorder
API de showSaveFilePicker() de acceso al sistema de archivos
Lecturas adicionales
- Especificación de transmisiones y capturas de contenido multimedia de W3C
- Especificación de grabación de MediaStream de W3C
- Especificación de acceso al sistema de archivos WICG