Bạn có thể truy cập vào máy ảnh và micrô của người dùng trên nền tảng web bằng API Luồng và thu thập nội dung nghe nhìn. Phương thức getUserMedia() sẽ nhắc người dùng truy cập vào máy ảnh và/hoặc micrô để ghi dưới dạng luồng nội dung nghe nhìn. Sau đó, bạn có thể ghi lại luồng này bằng API MediaRecorder hoặc chia sẻ với những người khác qua mạng. Bạn có thể lưu bản ghi vào tệp cục bộ thông qua phương thức showOpenFilePicker().
Ví dụ bên dưới cho thấy cách bạn có thể ghi âm từ micrô của người dùng ở định dạng WebM và lưu bản ghi vào hệ thống tệp của người dùng.
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();
});
Hỗ trợ trình duyệt
MediaDevices.getUserMedia()
API MediaRecorder
Chương trình showSaveFilePicker() của API Truy cập hệ thống tệp
Tài liệu đọc thêm
- Thông số kỹ thuật của luồng và thu thập nội dung nghe nhìn W3C
- Thông số kỹ thuật của bản ghi MediaStream W3C
- Thông số kỹ thuật về quyền truy cập hệ thống tệp WICG