Dalam landskap pembangunan web moden, berinteraksi dengan perkakasan pengguna (seperti kamera dan mikrofon) menjadi lebih mudah dengan kemunculan pelbagai API penyemak imbas. Satu API yang berguna ialah API MediaRecorder, yang membenarkan pembangun merakam audio dan video terus daripada penyemak imbas.
Dalam siaran ini, kami akan membincangkan cara merakam video menggunakan JavaScript dengan mengakses kamera web pengguna, merakam strim video dan menawarkan video yang dirakam untuk dimuat turun—semua melalui API penyemak imbas!
Secara tradisinya, rakaman kandungan media daripada pengguna memerlukan alat atau pemalam luaran (seperti Flash). Walau bagaimanapun, dengan timbunan WebRTC, anda boleh merakam video dengan mudah, mencipta sambungan rakan ke rakan dan berinteraksi dengan peranti media seperti kamera, mikrofon dan skrin—tanpa memerlukan sebarang alatan pihak ketiga.
API MediaRecorder adalah sebahagian daripada timbunan ini, menjadikan rakaman video dalam penyemak imbas proses yang lancar.
Untuk merakam video, kami akan:
Mari kita lihat pelaksanaan kod.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Recorder</title>
</head>
<body>
<h1>Video Recorder using JavaScript</h1>
<video id="video" autoplay></video>
<button id="start-btn">Start Recording</button>
<button id="stop-btn" disabled>Stop Recording</button>
<video id="recorded-video" controls></video>
<a id="download-link" download="recorded-video.webm">Download Recorded Video</a>
<script>
const videoElement = document.getElementById('video');
const startButton = document.getElementById('start-btn');
const stopButton = document.getElementById('stop-btn');
const recordedVideoElement = document.getElementById('recorded-video');
const downloadLink = document.getElementById('download-link');
let mediaRecorder;
let recordedChunks = [];
// Access webcam
async function startVideoStream() {
const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
videoElement.srcObject = stream;
// Set up MediaRecorder to record the stream
mediaRecorder = new MediaRecorder(stream);
// When data becomes available, store it
mediaRecorder.ondataavailable = (event) => {
if (event.data.size > 0) {
recordedChunks.push(event.data);
}
};
// When recording stops, create a video blob and show it
mediaRecorder.onstop = () => {
const blob = new Blob(recordedChunks, { type: 'video/webm' });
const videoURL = URL.createObjectURL(blob);
recordedVideoElement.src = videoURL;
downloadLink.href = videoURL;
};
}
// Start recording
startButton.addEventListener('click', () => {
recordedChunks = [];
mediaRecorder.start();
startButton.disabled = true;
stopButton.disabled = false;
});
// Stop recording
stopButton.addEventListener('click', () => {
mediaRecorder.stop();
startButton.disabled = false;
stopButton.disabled = true;
});
// Initialize the video stream
startVideoStream();
</script>
</body>
</html>
Kami menggunakan kaedah navigator.mediaDevices.getUserMedia() untuk meminta akses kepada kamera dan mikrofon pengguna.
const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
videoElement.srcObject = stream;
Kaedah ini mengembalikan Janji yang diselesaikan kepada objek MediaStream, yang mengandungi video langsung dan audio daripada kamera pengguna. Video itu kemudiannya dipaparkan menggunakan
Setelah kami mempunyai strim langsung, kami boleh membuat contoh MediaRecorder untuk merakam video.
mediaRecorder = new MediaRecorder(stream);
MediaRecorder akan menangkap strim dalam ketulan, dan setiap kali data tersedia, acara ondataavailable dicetuskan. Kami menyimpan ketulan ini dalam tatasusunan yang dipanggil recordedChunks.
mediaRecorder.ondataavailable = (event) => {
if (event.data.size > 0) {
recordedChunks.push(event.data);
}
};
Apabila rakaman dihentikan, kami menggabungkan ketulan menjadi Blob dan mencipta URL untuk memuat turun video.
mediaRecorder.onstop = () => {
const blob = new Blob(recordedChunks, { type: 'video/webm' });
const videoURL = URL.createObjectURL(blob);
recordedVideoElement.src = videoURL;
downloadLink.href = videoURL;
};
Video kini boleh dimainkan dalam
Kami menambah dua butang untuk mengawal rakaman:
Butang juga dilumpuhkan atau didayakan dengan sewajarnya untuk mengelakkan interaksi yang tidak perlu semasa proses.
Merakam video terus dalam penyemak imbas menggunakan JavaScript telah menjadi sangat mudah dengan API MediaRecorder dan kaedah getUserMedia(). Alat ini membolehkan anda membina aplikasi yang berkuasa dan kaya dengan media terus di dalam penyemak imbas tanpa memerlukan perisian luaran.
Dengan mengikut contoh di atas, anda boleh melaksanakan fungsi rakaman video dengan mudah dalam aplikasi web anda, menawarkan pengguna keupayaan untuk merakam, pratonton dan memuat turun video terus daripada penyemak imbas mereka.
Atas ialah kandungan terperinci Merakam Video Menggunakan JavaScript dan API Penyemak Imbas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
