JavaScript screen record is playing in video tag but not after downloading

Question

I'm using JavaScript to record the user screen and afterward playing it in a video tag of the page and downloading it. Now it's playing fine the browser video tag but not playing once it's downloaded

Here's my code

let btn = document.querySelector('button')
btn.addEventListener('click', async function (){
    let stream = await navigator.mediaDevices.getDisplayMedia({
        video: true
    })
    let mediaRecorder = new MediaRecorder(stream)

    let chunks = []
    mediaRecorder.addEventListener('dataavailable', function (e) {
        chunks.push(e.data)
    })

    mediaRecorder.addEventListener('stop', function () {
        let blob = new Blob(chunks, { 'type': 'video/webm' })
        
        // Working fine
        let video = document.querySelector('video')
        video.src = URL.createObjectURL(blob)

        // Downloaded video is not playing
        let a = document.createElement('a')
        a.href = URL.createObjectURL(blob)
        a.download = 'video.webm'
        a.click()
    })

    mediaRecorder.start()
})``` 

Answer 1

It might be worth you trying this experiment, run this code:

<a href="https://www.w3schools.com/html/mov_bbb.mp4" target="_blank">click</a>
<script>
const a = document.querySelector('a');
a.click();
</script>

(doesn't work as a stack snippet, need to run direct on your system/browser).

Does the video start automatically? If not, are you seeing any warning, for example at the top right of your browser window, that popups are blocked? If so you could try unblocking them and see what happens.

Note: I'm not sure what you mean by 'download' and its setting in the anchor element.