February 21, 2022

New Open Source Library: Announcing @Xata.Io/Screenshot

Tejas Kumar
Tejas KumarDirector of Developer Relations
Play

Today we're announcing a new open source package that takes feedback to the next level: introducing @xata.io/screenshot.

Demo

At Xata, we're committed to serving our users the smoothest developer experience any managed database service has ever offered. We're well aware that what's frictionless to us may not be frictionless to everyone, and so we're taking a highly feedback-based approach to doing this.

Inspiration

We recently rolled out our product to our first few early-stage adopters, including our founders' nonprofit organization Tupu and Saddleback Church Berlin. As we continue to roll out Xata, we recognize the importance of providing users an instant way to share realtime feedback with us while capturing the exact context they're in–and so, we wrote a library.

Enter @xata.io/screenshot

Our screenshot library wraps the native MediaDevices web platform API with a more intuitive and straightforward abstraction that allows users to take a screenshot from their computer, which they can then include in their feedback to us.

It works like so:

  • You call a function, await takeScreenshot()
  • the user is asked for permission to view their screen
  • they are asked to select what to screenshot: the current tab, another window, another tab, or their entire screen
  • once they confirm, the screenshot is captured and you get a Base64-encoded image of their screen

You can then save this string as an image, or forward it to a hosting service like S3, c-v.sh or similar after processing.

Diving Deeper: The Technical Details

The web platform provides a powerful set of APIs under the MediaDevices class. One of these APIs is MediaDevices.getDisplayMedia. This API is what prompts a user to select and grant permission to capture the contents of a display or portion thereof. One might think of this as window.alert on steroids.

This function returns a Promise that resolves into a MediaStream: an interface representing a stream of media content. In this case, the stream contains the portion of the display they've chosen to share.

Our library does the following:

  • gets this video stream
  • creates but does not visibly render a <video> element in memory
  • sets its src to this stream
  • waits for the video feed
  • waits for a frame of the current screen to be painted on the video
  • paints this frame onto a <canvas>
  • serializes the canvas to a base64 string using HTMLCanvasElement.toDataURL()
  • returns the string

The source code for this library is fully open and available on GitHub and we're proud to add it to our soon abundant repertoire of open source libraries and helpers.

How It's Used in Xata

With the exception of this website (a new one is on the way soon!), all Xata public-facing properties expose a little feedback button where users can submit feedback at any time during their usage of the property.

This feedback button opens a modal where they can type feedback, and also includes a little checkbox to include a screenshot. When they click this checkbox, this library is invoked. A full demo of this can be experienced on our documentation site.

Conclusion

This is just the beginning. Feel free to check out the source code of this library on GitHub. At Xata, we're committed to solving entire classes of problems developers face and providing frictionless solutions to them–usually in the database space, but sometimes in adjacent areas as we see opportunities. In the coming weeks, we're excited to roll out more exciting open source software.

To stay up to date, please be sure to follow us on Twitter, and sign up for our mailing list on the home page. Also–we're hiring! If you'd like to join us and consider yourself competent in Golang, TypeScript, or Developer Relations, apply here or @-us on Twitter.

Tejas Kumar

Tejas Kumar has been writing code since age 8 and today leads Xata's Developer Relations efforts, educating, equipping, and empowering developers around the world about industry-leading best practices.