[React] Record API : ReactMediaRecorder

react-media-recorder

 

웹페이지에서 recorder 를 사용하고 싶을 때 사용할 수 있는 API

 

npm 설치

npm install react-media-recorder

 

실제사용

• status | 현재 recorder 의 상태를 보여줌
• startRecording (function) | 녹화시작함수
• stopRecording (function) | 녹화중단(종료)함수
• mediaBlobUrl | 녹화한 영상이나 음성을 나타내는 Blob 객체 생성(녹화종료시 생성됨) / a, audio, video 태그의 href 속성에 사용됨.

* Blob (Blnary Large Object) : 멀티미디어 데이터를 다룰 때 사용하는 객체로 불변하는 raw data

function App() {
  return (
    <div>
      <ReactMediaRecorder
        audio
        render={({ status, startRecording, stopRecording, mediaBlobUrl }) =>(
          <div>
            <p>{status}</p>
            <button onClick={startRecording}>start recording</button>
            <button onClick={stopRecording}>stop recording</button><br/><br/>
            <audio src={mediaBlobUrl} controls></audio><br/>

            <a href={mediaBlobUrl} download="mysound.wav">download</a>
          </div>  
        )}
      />
    </div>
}

출력결과