Feature: Record webpage video as a gif (or smth like this) for reporting about perry HOT 6 CLOSED

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

from perry.

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

from perry.

yeap, exactly =)

from perry.

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

from perry.

Bonjour,

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

from perry.

This issue was closed by #47 .

from perry.