Custom Hook을 활용한 동영상 녹화 기능 추가

06 Nov 2023

reactjs

현대의 웹 애플리케이션에서 동영상을 녹화하는 기능은 사용자에게 매우 편리한 기능입니다. 이번에는 React에서 Custom Hook을 활용하여 동영상 녹화 기능을 추가하는 방법에 대해 알아보겠습니다.

Custom Hook이란?

Custom Hook은 React에서 함수형 컴포넌트에서 상태와 생명주기 메서드를 공유하기 위해 사용되는 JavaScript 함수입니다. reusability와 logic 관리를 위해 사용됩니다.

동영상 녹화 기능을 위한 Custom Hook 만들기

다음은 동영상 녹화 기능을 위한 Custom Hook을 만드는 예시 코드입니다.

import { useState, useEffect, useRef } from 'react';

const useVideoRecorder = () => {
  const [recording, setRecording] = useState(false);
  const [mediaRecorder, setMediaRecorder] = useState(null);
  const videoRef = useRef(null);

  useEffect(() => {
    const startRecording = async () => {
      const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
      const recorder = new MediaRecorder(stream);
      
      setMediaRecorder(recorder);
      recorder.start();
    };
    
    const stopRecording = () => {
      if (mediaRecorder && mediaRecorder.state === 'recording') {
        mediaRecorder.stop();
      }
    };
    
    const handleDataAvailable = (event) => {
      const videoBlob = new Blob([event.data], { type: 'video/webm' });
      const videoUrl = URL.createObjectURL(videoBlob);
      
      videoRef.current.src = videoUrl;
      videoRef.current.play();
    };
    
    if (recording) {
      startRecording();
      mediaRecorder.addEventListener('dataavailable', handleDataAvailable);
    } else {
      stopRecording();
      mediaRecorder.removeEventListener('dataavailable', handleDataAvailable);
    }
    
    return () => {
      stopRecording();
      mediaRecorder.removeEventListener('dataavailable', handleDataAvailable);
    };
  }, [recording, mediaRecorder]);
  
  const toggleRecording = () => {
    setRecording(!recording);
  };
  
  return { videoRef, toggleRecording };
};

export default useVideoRecorder;

이 Custom Hook을 사용하면 동영상을 녹화하기 위해 videoRef와 toggleRecording 함수를 제공받을 수 있습니다. videoRef는 녹화된 동영상을 재생하기 위한 HTML video 요소의 ref입니다. toggleRecording 함수는 녹화를 시작하거나 멈출 수 있도록 해줍니다.

Custom Hook 사용하기

이제 이 Custom Hook을 사용하여 동영상 녹화 기능을 추가해봅시다.

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

const VideoRecorder = () => {
  const { videoRef, toggleRecording } = useVideoRecorder();

  return (
    <div>
      <video ref={videoRef} />
      <button onClick={toggleRecording}>Record</button>
    </div>
  );
};

export default VideoRecorder;

useVideoRecorder Hook을 사용하여 videoRef와 toggleRecording을 받고, 이를 활용하여 동영상 요소와 버튼을 생성합니다.

마무리

Custom Hook을 사용하여 동영상 녹화 기능을 추가하는 방법에 대해 알아보았습니다. 이러한 활용을 통해 React 애플리케이션에서 더욱 쉽고 효율적으로 동영상 관련 기능을 구현할 수 있습니다.

해시태그: #React #CustomHook