React.js Project to Build WebRTC Video,Audio & Screen Recorder Using react-media-recorder Library

Welcome folks today in this blog post we will be building a webrtc video and audio and screen recorder using react-media-recorder library in Javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to install the below libraries using the below command as shown below

npm i react-media-recorder

And after that you will see the below directory structure of the app as shown below

App.js

import React, { useRef, useState, useEffect } from 'react';
import './style.css';
import { ReactMediaRecorder } from 'react-media-recorder';

const VideoPreview = ({ stream }) => {
  const videoRef = useRef(null);

  useEffect(() => {
    if (videoRef.current && stream) {
      videoRef.current.srcObject = stream;
    }
  }, [stream]);
  if (!stream) {
    return null;
  }
  return <video ref={videoRef} width={500} height={500} autoPlay controls />;
};

export default function App() {
  const [enable, setEnable] = useState(true);
  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <div>
        <ReactMediaRecorder
          video
          blobPropertyBag={{
            type: 'video/webm',
          }}
          // askPermissionOnMount={true}
          render={({
            previewStream,
            status,
            startRecording,
            stopRecording,
            mediaBlobUrl,
          }) => {
            console.log(previewStream);
            return (
              <div>
                <p>{status}</p>
                <button onClick={startRecording}>Start Recording</button>
                <button onClick={stopRecording}>Stop Recording</button>
                <button
                  onClick={() => {
                    startRecording();
                    setTimeout(stopRecording, 2000);
                    setEnable(false);
                  }}
                >
                  togglestreaming
                </button>
                {/* <audio src={mediaBlobUrl} controls autoPlay loop /> */}
                <video src={mediaBlobUrl} controls autoPlay loop />
                {enable && <VideoPreview stream={previewStream} />}
              </div>
            );
          }}
        />
      </div>
    </div>
  );
}

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

import './style.css';

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

const VideoPreview = ({ stream }) => {

const videoRef = useRef(null);

useEffect(() => {

if (videoRef.current && stream) {

videoRef.current.srcObject = stream;

}

}, [stream]);

if (!stream) {

return null;

}

return <video ref={videoRef} width={500} height={500} autoPlay controls />;

};

export default function App() {

const [enable, setEnable] = useState(true);

return (

<div>

<h1>Hello StackBlitz!</h1>

<div>

<ReactMediaRecorder

video

blobPropertyBag={{

type: 'video/webm',

}}

// askPermissionOnMount={true}

render={({

previewStream,

status,

startRecording,

stopRecording,

mediaBlobUrl,

}) => {

console.log(previewStream);

return (

<div>

<p>{status}</p>

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

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

<button

onClick={() => {

startRecording();

setTimeout(stopRecording, 2000);

setEnable(false);

}}

togglestreaming

</button>

{/* <audio src={mediaBlobUrl} controls autoPlay loop /> */}

{enable && <VideoPreview stream={previewStream} />}

</div>

);

}}

</div>

);

}

As you can see inside this react component we are importing the react-media-recorder library at the top and then we have the video tag in which we are showing the live stream of the user and then we have three buttons to start and stop video recording and then we have the button to download the video.