React.js Project to Build WebRTC Video,Audio & Screen Recorder Using react-media-recorder Library in TypeScript Full Project For Beginners

npm i react-media-recorder

`Usage`

import { ReactMediaRecorder } from "react-media-recorder";

const App = () => (
  <div>
    <ReactMediaRecorder
      video
      render={({ status, startRecording, stopRecording, mediaBlobUrl }) => (
        <div>
          <p>{status}</p>
          <button onClick={startRecording}>Start Recording</button>
          <button onClick={stopRecording}>Stop Recording</button>
          <video src={mediaBlobUrl} controls autoPlay loop />
        </div>
      )}
    />
  </div>
);

export default App

import { ReactMediaRecorder } from "react-media-recorder";

const App = () => (

<div>

<ReactMediaRecorder

video

render={({ status, startRecording, stopRecording, mediaBlobUrl }) => (

<div>

<p>{status}</p>

<button onClick={startRecording}>Start Recording</button>

<button onClick={stopRecording}>Stop Recording</button>

</div>

)}

</div>

);

export default App

Here you can pass three options for video,audio and screen recording

video

audio

screen

Usage with react hooks

import { useReactMediaRecorder } from "react-media-recorder";

const RecordView = () => {
  const {
    status,
    startRecording,
    stopRecording,
    mediaBlobUrl,
  } = useReactMediaRecorder({ video: true });

  return (
    <div>
      <p>{status}</p>
      <button onClick={startRecording}>Start Recording</button>
      <button onClick={stopRecording}>Stop Recording</button>
      <video src={mediaBlobUrl} controls autoPlay loop />
    </div>
  );
};

import { useReactMediaRecorder } from "react-media-recorder";

const RecordView = () => {

const {

status,

startRecording,

stopRecording,

mediaBlobUrl,

} = useReactMediaRecorder({ video: true });

return (

<div>

<p>{status}</p>

<button onClick={startRecording}>Start Recording</button>

<button onClick={stopRecording}>Stop Recording</button>

</div>

);

};

Usage

Usage with react hooks

Related posts:

You Might Also Like

React.js Hooks Advanced Maths Scientific Calculator Using Javascript Full Project For Beginners

Build a React Native Calendar Modal Picker Component Using react-native-calendar-picker Library in Javascript Full Project For Beginners

React.js Axios Example to Make HTTP Get Call to Get Random Photo in Javascript Full Project For Beginners

Leave a Reply Cancel reply

`Usage`