@eatsjobs/screen-shooter

Screenshooter, Error reporting tool

Error reporting module. Generate JSON data the session and screenshots the site. by @eatsjobs

Purpose Retrieve session information directly in the browser

The package is released in two format output:

• standalone umd build
• esm modern package If you use webpack the new esm package SHOULD be loaded (check your configuration)

What I have used to develop it

• Preact X and htm
• getDisplayMedia fallback to html2canvas if not supported
• microbundle

Install it

npm install @eatsjobs/screen-shooter --save

<script type="module">
    import main from './node_modules/@eatsjobs/screen-shooter/lib/index.mjs';
    main({
      extra: {
        sessionScope: {a: 1, b: 2}
      }
    });
</script>
<script nomodule src="./node_modules/@eatsjobs/screen-shooter/lib/index.umd.js">
    screenShooter({
       extra: {
         sessionScope: {a: 1, b: 2}
       }
    });
</script>

Implementation example in webpack/rollup/parcel projects

(async function() {
    const {default: myModule} = await import('@eatsjobs/screen-shooter');
    myModule.main(options);
})()

Known Issues

• html2canvas cannot render images properly due to CORS policy. See this issue
• At the moment the app try to use WebRTC screen capturing if supported by the browser and fallback to html2canvas

TODO

• make it configurable with options
• explore the possibility to register also a video with WebRTC capabilities (DONE)
• see the amazing usersnap.com