Dostęp do kamery i mikrofonu użytkownika jest możliwy na platformie internetowej za pomocą interfejsu Media Capture and Streams API. Metoda getUserMedia() prosi użytkownika o dostęp do aparatu lub mikrofonu, które można wykorzystać jako strumień multimediów. Strumień można nagrać za pomocą interfejsu MediaRecorder API lub udostępnić innym osobom w sieci. Nagranie można zapisać w pliku lokalnym metodą showOpenFilePicker().
Poniższy przykład pokazuje, jak możesz nagrać dźwięk z mikrofonu użytkownika w formacie WebM i zapisać nagranie w systemie plików użytkownika.
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();
});
Obsługiwane przeglądarki
MediaDevices.getUserMedia()
Interfejs API MediaRecorder
Funkcja showSaveFilePicker() interfejsu File System Access API
Więcej informacji
- Specyfikacja W3C Media Capture i strumieni
- Specyfikacja nagrywania W3C MediaStream
- Specyfikacja dostępu do systemu plików WICG