Build a screen recording software that turns your screen output activity to the video output. This feature comes in handy in dynamic situations such as product demonstration/presentation where a user can use its features to make videos of screen sequences showing how an application works. The app also allows narration during capture.
- Open the app in your browser
- Click ‘START RECORDING’ button to proceed
- Select whether to record entire screen, specific window or specific chrome tab’ and click ‘Share’
- Allow the app to use your microphone
- Use ‘PAUSE RECORDING’ button to pause your video if necessary
- Click “STOP RECORDING’ to stop your recording when complete
- The video will automatically display on the video tab.
- use ‘RESET RECORDING’ button to reset your media Stream
- Linux / Windows 8 or any higher version
- Visual Studio Code (VsCode)
- This article uses git bash terminal and Linux operating system.
What you will learn:
- How to set up a Next js Project.
- How to create the screen recorder
INSTALL REQUIRED APPS
1. Install node.
In your browser, use this link to go to the nodejs official website. Click to download nodejs respective to your operating system
- In your terminal type the following command to confirm nodejs installation
Install Visual Studio Code
- Use this link to download VsCode and install the app.
- Create your projects root folder and access it via your terminal
- Create your next js app; we will name ours ‘screenrec’:
npx create-next-app screenrec. The project’s first instance is successfully built at this point
- Run the project using:
npm run dev
- The project uses port 3000 as your local server. Access it through the following link to view your project first instance
To open the directory via VsCode, type this command in your terminal:
The project’s first page is rendered from the index component in the ‘pages/index.js’ directory. It will serve as our root component to provide the page contents displayed above.
Delete all contents from the index.js page and replace with the following code:
In the code above, we import a function named ‘Recorder’ from a component called ‘recorder’ located from a components folder which we will create shortly. The function is then rendered from our Home function’s return statement.
Let us create our Record function. In the project root directory create a folder name it ‘components’. Inside it create a file called ‘recorder.js’. Your project should look like below
**NOTE**: Use the codes below to add css styling to your app. Paste them in your ‘styles/global.css’ directory
In your ‘components/recorder.js’ directory, paste the following
- line 1: This hook allows us to access a DOM element imperatively.
- line 2:You will need to download and install this module to use it. in your terminal achieve this using
npm install use-screen-recorder
- line 3: We eill use this module to create our button elements. Download material-ui using
npm install @material-uito use it.
- line 5: Create your “Recorder dunction”
- line 6: built-in React hook that accepts one argument as the initial value and returns a reference (aka ref). A reference is an object having a special property
- line 8-16: React hook for easily recording screen using MediaStream APIs.
line 19-62: the return statement will return the UI.
The diagram below shows the UI created by our code. Follow the instructions from the buttons to record your screen.
That’s it! Enjoy creating your videos
Optional Approach to this project:
- Create project directory
- Use your the terminal to clone the app: git clone https://github.com/apeli23/screen_recorder.git
- Install project dependencies with:
- Run the project:
npm run dev