Aprenda a criar um gravador de tela em JavaScript com poucas linhas de código

Carlos Rolim

6 meses atrás

Na dica de hoje vamos mostrar como você pode criar seu próprio gravador de tela em JavaScript utilizando poucas linhas de código.

Precisando de soluções seguras e inovadoras, entre em contato conosco. Acesse https://soloweb.com.br

Aproveite esta dica juntamente com outra dica nossa de criação de extensão para o Google Chrome para cria sua extensão de captura de tela. Segue a baixo

Construindo uma extensão do Google Chrome para obter cotação do dólar

Então vamos ao nosso código

Primeiro vamos criar nosso HTML simples e salvar como: index.html

<html>
    <head>
        <title>Gravador de Tela</title>
    </head>
    <body>
        <button id="btnIniciar">INICIAR GRAVAÇÃO</button>
    </body>
    <script src="script.js"></script>
</html>

Neste HTML apenas criamos uma página simples, com um título, a importação de um script JS e um simples botão.

Agora vamos criar o conteúdo do script “script.js” que acabamos de incluir em nossa página: index.html

const button = document.querySelector("#btnIniciar");

button.addEventListener("click", async () => {
    const stream = await navigator.mediaDevices.getDisplayMedia();
    const recoder = new MediaRecorder(stream);

    recoder.start();

    const [video] = stream.getVideoTracks();
    video.addEventListener("ended", () => {
        recoder.stop();
    });

    recoder.addEventListener("dataavailable", (evt) => {
        const a = document.createElement("a");
        a.href = URL.createObjectURL(evt.data);
        a.download = "minha-captura-de-video.webm";
        a.click();
    });
});