Kemampuan merekam audio dan video merupakan fitur penting untuk banyak aplikasi web, mulai dari konferensi video hingga pendidikan online. Meskipun API WebRTC memberikan dukungan asli untuk merekam aliran media, API dapat menjadi tantangan untuk digunakan dan memerlukan banyak kode boilerplate.

Dalam tutorial ini, kita akan membuat React hook khusus yang menyederhanakan proses perekaman aliran media. Pengait kami, useMediaRecorder, akan menyediakan antarmuka sederhana untuk merekam audio dan video dari kamera dan mikrofon perangkat pengguna.

Prasyarat

Untuk mengikuti tutorial ini, Anda memerlukan:

• Pengetahuan dasar tentang React dan hooks
• Editor kode (seperti VS Code)
• Peramban web modern

Mari kita mulai dengan membuat proyek React baru menggunakan Create React App. Buka terminal Anda dan jalankan perintah berikut:

npx create-react-app media-recorder-app

cd media-recorder-app
npm start

Membuat useMediaRecorderPengait

Selanjutnya, mari buat pengaitnya useMediaRecorder. Di editor kode Anda, buat file baru di srcdirektori bernama useMediaRecorder.js.

import { useState, useEffect } from 'react';

const useMediaRecorder = () => {
  const [stream, setStream] = useState(null);
  const [recorder, setRecorder] = useState(null);
  const [isRecording, setIsRecording] = useState(false);
  const [chunks, setChunks] = useState([]);

  useEffect(() => {
    const init = async () => {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
      setStream(stream);
      setRecorder(new MediaRecorder(stream));
    };
    init();
  }, []);

  const startRecording = () => {
    if (recorder && !isRecording) {
      setChunks([]);
      recorder.start();
      setIsRecording(true);
    }
  };

  const stopRecording = () => {
    if (recorder && isRecording) {
      recorder.stop();
      setIsRecording(false);
    }
  };

  const handleDataAvailable = (event) => {
    setChunks([...chunks, event.data]);
  };

  const getRecording = () => {
    if (chunks.length) {
      const blob = new Blob(chunks, { type: chunks[0].type });
      return URL.createObjectURL(blob);
    }
    return null;
  };

  return {
    stream,
    isRecording,
    startRecording,
    stopRecording,
    getRecording,
  };
};

export default useMediaRecorder;

Fungsi startRecordingdan stopRecordingmasing-masing memulai dan menghentikan proses perekaman. Kami juga mendefinisikan handleDataAvailablefungsi yang dipanggil saat perekam memiliki data yang tersedia. Fungsi ini menambahkan data ke chunksvariabel status.

Terakhir, kami mendefinisikan getRecordingfungsi yang mengembalikan rekaman sebagai URL. Fungsi ini memeriksa apakah ada data yang tersedia dalam chunksvariabel dan membuat objek baru Blobdari data tersebut.

Menggunakan useMediaRecorderPengait

Sekarang setelah kita membuat useMediaRecorderhook, mari kita gunakan di aplikasi React kita. Buka App.jsfile di editor kode Anda dan ganti konten default dengan kode berikut:

import React from 'react';
import useMediaRecorder from './useMediaRecorder';

function App() {
  const { stream, isRecording, startRecording, stopRecording, getRecording } = useMediaRecorder();

  return (
    <div className="App">
      {stream && (
        <div>
          <video src={URL.createObjectURL(stream)} autoPlay muted />
          <button onClick={startRecording} disabled={isRecording}>
            Start Recording
          </button>
          <button onClick={stopRecording} disabled={!isRecording}>
            Stop Recording
          </button>
          {isRecording && <p>Recording...</p>}
          {!isRecording && getRecording() && (
            <audio src={getRecording()} controls />
          )}
        </div>
      )}
    </div>
  );
}

export default App;

Saat pengguna mengklik tombol "Mulai Merekam", startRecordingfungsi tersebut dipanggil. Ketika pengguna mengklik tombol "Stop Recording", stopRecordingfungsi tersebut dipanggil. Jika rekaman tersedia, kami menampilkan elemen audio yang memutar rekaman.

Kesimpulan

Dalam tutorial ini, kami membuat React hook khusus yang disebut useMediaRecorderyang menyederhanakan proses perekaman aliran media. Kami menggunakan API WebRTC dan MediaRecorderobjek untuk merekam audio dan video dari kamera dan mikrofon perangkat pengguna. Kami kemudian menggunakan pengait khusus kami di aplikasi React untuk menampilkan umpan kamera, memulai dan menghentikan perekaman, dan menampilkan rekaman saat tersedia.

Dengan membuat pengait khusus untuk merekam aliran media, kita dapat menyederhanakan kode kita dan membuatnya lebih dapat digunakan kembali. Kami harap tutorial ini membantu dalam menunjukkan kepada Anda cara membuat pengait khusus untuk merekam aliran media di React.