คุณสามารถเข้าถึงกล้องและไมโครโฟนของผู้ใช้ได้ในแพลตฟอร์มเว็บโดยใช้ Media Recording and Streams API เมธอด getUserMedia() จะแจ้งให้ผู้ใช้เข้าถึงกล้องและ/หรือไมโครโฟนเพื่อจับภาพเป็นสตรีมสื่อ จากนั้นจะบันทึกสตรีมนี้ด้วย Mediarecorder API หรือแชร์กับผู้อื่นผ่านเครือข่ายได้ ไฟล์ที่บันทึกจะบันทึกลงในไฟล์ในเครื่องได้ผ่านทางเมธอด showOpenFilePicker()
ตัวอย่างด้านล่างแสดงวิธีบันทึกเสียงจากไมโครโฟนของผู้ใช้ในรูปแบบ WebM และบันทึกลงในระบบไฟล์ของผู้ใช้
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();
});
การสนับสนุนเบราว์เซอร์
MediaDevices.getUserMedia()
API โปรแกรมสื่อบันทึก
showSaveFileChooseer() ของ File System Access API
อ่านเพิ่มเติม
- ข้อกำหนดเฉพาะการจับภาพและสตรีมสื่อของ W3C
- ข้อกำหนดเฉพาะของการบันทึก W3C MediaStream
- ข้อกำหนดเกี่ยวกับการเข้าถึงระบบไฟล์ WICG