Show HN: Browser-based Screen Recorder (for Bug Reporting)

Get ready to revolutionize the way you report bugs and issues with websites! I'm excited to introduce a new browser-based screen recorder that allows users to capture and record their local screen using just a web page. In this article, we'll take a closer look at how it works, its features, and what's next for this exciting project.

The main use case for this product is bug reporting. Imagine being able to show developers exactly where an issue occurs on your screen, making it easier for them to identify and fix the problem. This tool can greatly enhance the user experience by providing a more detailed and accurate representation of the issue at hand.

How It Works

To use this web page, simply navigate to this GitHub repository. Once you've arrived, you'll see a simple interface with two main modal windows: the "Head" camera dropdown and the "Record" microphone dropdown. Initially, these appear empty because we don't request access to these features until further action is taken.

When you're ready to start recording your screen, simply click on the "Use head" and then "Start recording" buttons. The web page will prompt you for permission to access your camera and microphone, which you'll need to grant in order for the recording process to begin.

Once you've started recording, you can navigate around your screen as needed, clicking on elements or interacting with features to capture exactly what's happening. When you're finished, click outside of a modal window to close it and download the recorded video to your local device.

Features and Technical Details

The web page supports keyboard controls and shortcuts for navigating and controlling the recording process. These include:

  • Capture the full screen
  • Record a specific area of the screen
  • Mute/unmute the microphone
  • Pause/resume the recording
  • Stop the recording

The web page relies on several technical libraries and APIs, including:

  • Scrawl-canvas library for video output
  • Media Capture and Streams API's getDisplayMedia() function for accessing device media
  • Google's selfie-segmentation MediaPipe solution for image recognition and object detection

About the Code

The code is supplied as a Minimum Viable Product (MVP) and has not been built for the generation of professional-grade video assets. The repository contains three main files:

  • index.html: The web page's HTML code
  • index.css: The web page's CSS code
  • index.js: The web page's JavaScript functionality, which includes the recording logic and media API integration.

Because there is no toolchain or build steps associated with this repository, you'll need to grab the latest minified version of the Scrawl-canvas library and slap it into the js/ folder manually. This may not be ideal for production environments, but it's a necessary trade-off for the simplicity and ease of use that comes with using a browser-based screen recorder.

Known Issues

This project is still in its early stages, and as such, there are several known issues to be aware of:

  • Mozilla Firefox support is limited, and clicking outside a modal window may not work as expected.
  • iOS Safari support is non-existent at the moment, but we're working on it!
  • The code is not optimized for performance, so don't expect smooth video output in all cases.

Next Steps

This project has a lot of potential, and with your help, we can make it even better. If you're interested in contributing to this project or have any feedback on how to improve it, please don't hesitate to reach out!

Head over to the GitHub repository here and start exploring the features and functionality of this exciting new browser-based screen recorder. Remember: with great power comes great responsibility!