[PITCH] Um gravador de tela (mas no navegador)

Valeu por compartilhar a ideia! Para mim funcionou bem! Logo após escolhermos o local onde o arquivo webm será salvo, a interface no navegador lembra bastante a carinha do Google Meet no instante em que fazemos a escolha do que será exibido durante a apresentação. No caso aqui, qual janela será gravada ou a tela toda (incluindo o áudio, se desejar).

---

Algo que notei aqui: O processo rodando no Google Chrome consume boa parte do processamento do PC. Saberia se existe alguma otimização que pode ser ativada no navegador ou no código que compartilhou de maneira que limite o número de frames capturados por segundo? Acho que com isso restrinjo um pouco do processamento :). No mais, muito boa ideia!!

Código original

    <script>
      async function record() {
        const handle = await window.showSaveFilePicker({ startIn: "videos", types: [{ accept: { "video/webm": ".webm" } }] })
        const writable = await handle.createWritable()
        const stream = await navigator.mediaDevices.getDisplayMedia({ audio: true, video: true })
        const recorder = new MediaRecorder(stream, { mimeType: "video/webm" })
        recorder.ondataavailable = async ({ data }) => await writable.write(data)
        recorder.onstop = async () => await writable.close()
        recorder.start()
      }
    </script>

Fonte: https://github.com/d3tu/reco/blob/main/index.html

Tentei futucar o código fonte que disponibilizou para alterar alguma propriedade framerate do objeto MediaRecorder. Até achei uma discussão aqui https://github.com/w3c/mediacapture-record/issues/177, recorri à documentação em https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/MediaRecorder e https://www.w3.org/TR/mediastream-recording, mas ainda não consegui mudar o intervalo de captura, só a qualidade do vídeo e áudio.

Código modificado

    <script>
      async function record() {
        const showSaveFilePickerOptions = {
          startIn: "videos",
          types: [{ accept: { "video/webm": ".webm" } }]
        };
        const getDisplayMediaOptions = {
           audio: true,
           video: true
        };
        const mediaRecorderOptions = {
          audioBitsPerSecond: 128000/8,
          videoBitsPerSecond: 2500000/8,
          mimeType: "video/webm"
        };
        const handle = await window.showSaveFilePicker(showSaveFilePickerOptions)
        const writable = await handle.createWritable()
        const stream = await navigator.mediaDevices.getDisplayMedia(getDisplayMediaOptions)
        const recorder = new MediaRecorder(stream, mediaRecorderOptions)
        recorder.ondataavailable = async ({ data }) => await writable.write(data)
        recorder.onstop = async () => await writable.close()
        recorder.start()
      }
    </script>

Adaptado de: https://github.com/d3tu/reco/blob/main/index.html