recorder-capture

screencastify

Using this library, you can record a screen with audio, stream a user cam, and take a screenshot of a webpage.

🎁 Features

• Easy to use
• Compatible with both JavaScript and TypeScript
• Record the screen with audio
• Stream the user cam
• Take a screenshot of the webpage's screen or part of the screen

🔧 Installation

npm i screencastify

🔰 Methods

Method	Description
startRecording()	To start screen recording and get screen stream object.
stopRecording()	To end screen recording and get base64 source.
takeScreenshot()	To capture the screenshot and get base64 source.
streamUserCam()	To stream user cam and get the stream object

💡 Usage

1) To take the screenshot

takeScreenshot() method is used for taking the screenshot

import { takeScreenshot } from "screencastify";

const handleScreenshot = () => {
  const screenshot = takeScreenshot();
  // in this variable you get the screenshot captured
};
<button onClick={() => handleScreenshot()}>Take ScreenShot</button>;

2) To Record the screen

startRecording method is used for start the screen recording and startRecording method is used for stop the screen recording and it gives the video in base64 format.

import { startRecording, stopRecording } from "screencastify";

const handleStopRecording = () => {
  const recording = stopRecording();
  // in this variable you get the screen recoding
};
<button onClick={() => startRecording()}>start recording</button>;

3) To Stream user camera

streamUserCam() method is used for stream the user cam

import React, { useEffect, useRef } from "react";
import { streamUserCam } from "recorder-capture";

const UserCam = () => {
  let videoRef = useRef(null);

  const getUserVideo = async () => {
    const stream = await streamUserCam();
    //in this variable you get the stream object
    let video = videoRef.current;
    video.srcObject = stream;
    video.play();
  };

  useEffect(() => {
    getUserVideo();
  }, [videoRef]);

  return (
    <div>
      {/* In this video tag you get the the stream of user cam */}
      <video ref={videoRef}></video>
    </div>
  );
};

export default UserCam;

🤝Contributing

Feel free to submit a PR on github if you found a bug or if you want to enhance it further.

Thanks!. Happy Recording!