Search code examples
javascriptscreenshot

How do websites like jam.dev achieve their screenshotting functionality?

does anyone know how websites like jam.dev achieve their click and drag screenshotting functionality?

I am trying to create a tool which involves screenshotting on the client side and my preferred way was to implement it in a similar fashion. Is anyone kind enough to point me in the right direction?

Some things I have tried and researched, but these don't provide the exact results I want:

  • html2canvas and other libraries that use svg and foreign object - these just don't produce consistent results.
  • rendering server side with puppeteer - it would be much better if the screenshotting could be achieved client side.
  • using webRTC - asking for permission and having the user select a screen/window is just not very intuitive.

Any insight would be greatly appreciated!

Solution

  • Browsers share api for extensions that allows making a screenshot

    Accoding to this answwer

    chrome.tabs.captureVisibleTab(null, {}, function (image) {
   // You can add that image HTML5 canvas, or Element.
});