Merakam Video Menggunakan JavaScript dan API Penyemak Imbas-tutorial js-php.cn

Merakam Video Menggunakan JavaScript dan API Penyemak Imbas

DDD

Lepaskan： 2024-10-18 22:43:30

asal

506 orang telah melayarinya

Recording Videos Using JavaScript and Browser APIs

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!

Mengapa Menggunakan API MediaRecorder?

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.

Langkah-langkah untuk Merakam Video dalam Pelayar

Untuk merakam video, kami akan:

Akses kamera web menggunakan kaedah getUserMedia() daripada antara muka navigator.mediaDevices.
Rakam strim menggunakan API MediaRecorder.
Sediakan pautan muat turun supaya pengguna boleh menyimpan video yang dirakam.

Mari kita lihat pelaksanaan kod.

Contoh: Merakam Video dalam Pelayar

<!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>

Salin selepas log masuk

Memecahkan Kod:

1. Mengakses Webcam Pengguna

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;

Salin selepas log masuk

Kaedah ini mengembalikan Janji yang diselesaikan kepada objek MediaStream, yang mengandungi video langsung dan audio daripada kamera pengguna. Video itu kemudiannya dipaparkan menggunakan

2. Merakam Strim Video

Setelah kami mempunyai strim langsung, kami boleh membuat contoh MediaRecorder untuk merakam video.

mediaRecorder = new MediaRecorder(stream);

Salin selepas log masuk

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);
  }
};

Salin selepas log masuk

3. Menghentikan Rakaman dan Menyimpan Video

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;
};

Salin selepas log masuk

Video kini boleh dimainkan dalam

Butang dan Interaksi Pengguna

Kami menambah dua butang untuk mengawal rakaman:

Butang Mula: Mulakan rakaman dengan memanggil mediaRecorder.start().
Butang Berhenti: Menghentikan rakaman dengan memanggil mediaRecorder.stop().

Butang juga dilumpuhkan atau didayakan dengan sewajarnya untuk mengelakkan interaksi yang tidak perlu semasa proses.

Ciri Tambahan yang Boleh Anda Tambah

Jeda/Sambung Rakaman: Anda boleh menambah butang jeda dan sambung semula menggunakan kaedah mediaRecorder.pause() dan mediaRecorder.resume().
Format Video: Secara lalai, rakaman disimpan sebagai fail .webm, tetapi anda boleh menukar jenis MIME bergantung pada sokongan penyemak imbas, seperti video/mp4.
Memuat Naik Video: Anda boleh melanjutkan fungsi untuk memuat naik video yang dirakam ke pelayan untuk pemprosesan atau analisis selanjutnya.

Kesimpulan

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.

Selamat Mengekod!

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!