Build a React.js WebRTC Video,Audio & Screen Recorder in Browser Using react-media-recorder Library

App.jsx

import React, { useState } from 'react';
import { Button, Container, Row, Col, Card } from 'react-bootstrap';
import { useReactMediaRecorder } from 'react-media-recorder';
import 'bootstrap/dist/css/bootstrap.min.css';

const App = () => {
  const [mediaType, setMediaType] = useState('video'); // Default to video

  const {
    status,
    startRecording,
    stopRecording,
    mediaBlobUrl,
    previewStream,
  } = useReactMediaRecorder({
    video: mediaType === 'video' ? true : false,
    audio: true,
    screen: mediaType === 'screen' ? true : false,
    onStop: (blobUrl) => console.log('Recording stopped', blobUrl),
  });

  const handleMediaChange = (e) => {
    setMediaType(e.target.value);
  };

  return (
    <Container className="mt-5">
      <Row className="justify-content-center">
        <Col md={8}>
          <h1 className="text-center mb-4">WebRTC Media Recorder</h1>

          {/* Media Type Selector */}
          <div className="mb-4">
            <Button
              variant={mediaType === 'video' ? 'primary' : 'secondary'}
              onClick={() => setMediaType('video')}
            >
              Video
            </Button>
            <Button
              variant={mediaType === 'audio' ? 'primary' : 'secondary'}
              className="ml-3"
              onClick={() => setMediaType('audio')}
            >
              Audio
            </Button>
            <Button
              variant={mediaType === 'screen' ? 'primary' : 'secondary'}
              className="ml-3"
              onClick={() => setMediaType('screen')}
            >
              Screen
            </Button>
          </div>

          {/* Recording Status */}
          <div className="text-center mb-4">
            <h5>Status: {status}</h5>
          </div>

          {/* Preview */}
          {previewStream && (
            <div className="mb-4">
              <Card>
                <Card.Body>
                  <video
                    ref={(ref) => {
                      if (ref) {
                        ref.srcObject = previewStream;
                      }
                    }}
                    autoPlay
                    muted
                    playsInline
                    width="100%"
                  />
                </Card.Body>
              </Card>
            </div>
          )}

          {/* Control Buttons */}
          <div className="text-center">
            <Button
              variant="success"
              onClick={startRecording}
              disabled={status === 'recording'}
              className="mr-3"
            >
              Start Recording
            </Button>
            <Button
              variant="danger"
              onClick={stopRecording}
              disabled={status !== 'recording'}
            >
              Stop Recording
            </Button>
          </div>

          {/* Recorded Media */}
          {mediaBlobUrl && (
            <div className="text-center mt-4">
              <h5>Recorded Media:</h5>
              <a href={mediaBlobUrl} download="recording.webm">
                <Button variant="primary">Download Recording</Button>
              </a>
              <video src={mediaBlobUrl} controls className="mt-3" width="100%" />
            </div>
          )}
        </Col>
      </Row>
    </Container>
  );
};

export default App;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

import React, { useState } from 'react';

import { Button, Container, Row, Col, Card } from 'react-bootstrap';

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

import 'bootstrap/dist/css/bootstrap.min.css';

const App = () => {

const [mediaType, setMediaType] = useState('video'); // Default to video

const {

status,

startRecording,

stopRecording,

mediaBlobUrl,

previewStream,

} = useReactMediaRecorder({

video: mediaType === 'video' ? true : false,

audio: true,

screen: mediaType === 'screen' ? true : false,

onStop: (blobUrl) => console.log('Recording stopped', blobUrl),

});

const handleMediaChange = (e) => {

setMediaType(e.target.value);

};

return (

<h1 className="text-center mb-4">WebRTC Media Recorder</h1>

{/* Media Type Selector */}

<Button

variant={mediaType === 'video' ? 'primary' : 'secondary'}

onClick={() => setMediaType('video')}

Video

</Button>

<Button

variant={mediaType === 'audio' ? 'primary' : 'secondary'}

className="ml-3"

onClick={() => setMediaType('audio')}

Audio

</Button>

<Button

variant={mediaType === 'screen' ? 'primary' : 'secondary'}

className="ml-3"

onClick={() => setMediaType('screen')}

Screen

</Button>

</div>

{/* Recording Status */}

<h5>Status: {status}</h5>

</div>

{/* Preview */}

{previewStream && (

<Card>

<Card.Body>

<video

ref={(ref) => {

if (ref) {

ref.srcObject = previewStream;

}

}}

autoPlay

muted

playsInline

width="100%"

</Card.Body>

</Card>

</div>

)}

{/* Control Buttons */}

<Button

variant="success"

onClick={startRecording}

disabled={status === 'recording'}

className="mr-3"

Start Recording

</Button>

<Button

variant="danger"

onClick={stopRecording}

disabled={status !== 'recording'}

Stop Recording

</Button>

</div>

{/* Recorded Media */}

{mediaBlobUrl && (

<h5>Recorded Media:</h5>

<Button variant="primary">Download Recording</Button>

</a>

</div>

)}

</Col>

</Row>

</Container>

);

};

export default App;

Build a React.js WebRTC Video,Audio & Screen Recorder in Browser Using react-media-recorder Library

Comments

Leave a Reply Cancel reply

Archives