Feature: Record webpage video as a gif (or smth like this) for reporting

[armand1m]

We can use https://github.com/yaronn/GifW00t to record the webpage interactions while the user uses the webpage, and also send them with the report.

This can also be well integrated with firebase through perry-firebase so we can also have nice interaction in the web panel =)

[vitormargis]

Don't think it was clear for me. You want to generate GIF's from the user interaction? Is that it?

[armand1m]

yeap, exactly =)

[armand1m]

While the page is being recorded, we can use GifW00t to generate some visual reporting, so the bug inspector (the person receiving the bug report) will be able to see actual user interaction and inspect what he did with the logs

[ghost]

Bonjour,

I can help by developing some integration with that: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices :)

[ghost]

I found this thing: https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element

Only downside: very experimental

Tried the following snippet for now to capture the screen:

const constraints = { video: { mediaSource: "screen" }};

navigator.getDisplayMedia(constraints).then((evt) => { 
    console.log(evt);
    const elem = document.createElement('video');
    elem.setAttribute('id', 'vid');
    // elem.setAttribute('srcObject', evt);
    document.querySelector('body').append(elem);
    document.querySelector('#vid').srcObject = evt;
    document.getElementById('vid').onpause = () => {
        const tracks = evt.getTracks();
        console.log(tracks);
    };
    evt.onactive = (et) => console.log('evt', et);
}).catch(console.error)

It works on Edge. If you try it on Chrome, you should call navigator.mediaDevices.getDisplayMedia.

I am building a first PoC in a package for Perry

[armand1m]

This issue was closed by #47 .