Published on

🎥 Recorder: Capture Your Screen and Camera in Your Browser

  • avatar

🎥 Recorder: Capture Your Screen and Camera in Your Browser

Are you looking for a simple and intuitive way to record your screen and camera without the hassle of downloads or installations? Look no further than Recorder, the coolest open-source web application that lets you capture your screen and camera right in your browser! With Recorder, you can easily record your browser tab or window while adding a personal touch with your webcam. Let's dive into the features and how to use this amazing tool.


  • ✨ Simple and Intuitive: Recorder offers a user-friendly interface, making recording a breeze for everyone.
  • 🎥 Screen and Camera Recording: Capture your browser tab or window while simultaneously adding a personal touch with your webcam.
  • 🖼️ Picture-in-Picture View: Experience the magic of picture-in-picture, see yourself while you're recording your screen.
  • 🔒 Local and Secure: Privacy should always be a top priority! All recordings take place directly in your browser so whatever you record, only you’ll have access to it.
  • 🎬 Real-time Preview: Preview your camera and screen recording in real-time before diving into the action.

How to Use

Using Recorder is as easy as 1-2-3! Here's a step-by-step guide:

  1. Access the Web Application: Fire up your Google Chrome browser and head to

  2. Choose Your Mode: Select your desired recording mode:

    • 🖥️ Screen only: Capture your browser tab or window without the camera.
    • 🎥 Screen and camera: Record your browser tab or window along with your awesome camera.
    • 📷 Camera only: Focus solely on your camera for a personal touch.
  3. Start Recording: Click the big red "Record" button to kickstart your screen and camera recording adventure.

  4. Picture-in-Picture View: Your camera will appear in a nifty picture-in-picture view while recording the screen.

  5. Save and Share: Ready to wrap it up? Click the "Stop" button and save your masterpiece as a video file to share with the world! 🌎

Browser Compatibility

Please note that Recorder only works with Google Chrome at the moment. It leverages certain browser capabilities that may not be available in other browsers. So make sure you have Chrome installed to enjoy the full functionality of Recorder.

Support and Contributions

If you encounter any issues, have questions, or need assistance, please feel free to open an issue on GitHub. The Recorder team welcomes your feedback and is happy to assist with any questions or concerns you may have.

Excited to dive into the code and make this app even cooler? You can contribute to Recorder by following these steps:

  1. Clone the Repository: Fork the Recorder repository and clone it to your local machine using Git.

    git clone
  2. Navigate to the Directory: Move into the Recorder project directory.

    cd recorder
  3. Install Dependencies: Install the necessary dependencies using Yarn.

  4. Run the Development Server: Start the development server with Yarn.

    yarn dev
  5. Make Your Changes: Work your magic! Make the desired improvements, add features, or fix issues.

  6. Create a Pull Request: Once you're happy with your changes, create a pull request on the main Recorder repository. The team will review your contribution and merge it if everything looks good!


Recorder is released under the MIT License, allowing you to freely use, modify, and distribute the application.

So what are you waiting for? Head over to and start capturing those amazing moments with Recorder! Lights, camera, action! 🎬🌟