Skip to content

Aplicativo para gravação de tela com opções de microfone feito com node, html, css, javascript e electron forge!

License

Notifications You must be signed in to change notification settings

laracmiranda/Yuno_Recorder_APP

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 

Repository files navigation

Posts linkedin (1) Yuno Recorder

Node.js HTML CSS Javascript Electron Forge

Aplicativo de gravador de tela desenvolvido com Electron Forge, que permite capturar vídeos da tela do seu computador com áudio e microfone, de forma simples e intuitiva!

💜 - Faça download para windows aqui!

📸 Demonstração rápida

yuno-recorder ‐ Feito com o Clipchamp


📲 Funcionalidades

  • Captura de tela com qualidade nativa
  • Escolha da janela ou monitor a ser gravado
  • Gravação em vídeo .webm
  • Opção de gravar com microfone
  • Interface minimalista e intuitiva
  • Salvamento automático do arquivo gravado
  • Compatível com Windows, macOS e Linux

⚒️ Tecnologias utilizadas

  • Electron Forge - empacotamento e distribuição simplificada
  • JavaScript (ES6+) - lógica principal do app
  • MediaDevices API - captura de tela e áudio do sistema
  • HTML + CSS - interface leve e responsiva
  • Node.js - integração com o sistema de arquivos

📂 Estrutura do projeto

yuno-recorder/
├── src/
│   ├── index.js          # Processo principal (main)
│   ├── render.js         # Lógica da interface (renderer)
│   ├── index.html        # Layout principal
│   └── index.css         # Estilos da interface
├── package.json
├── forge.config.js
└── README.md

📦 Instalação

  1. Clonar o repositório
git clone https://github.com/seu-usuario/screen-recorder.git
cd screen-recorder
  1. Instalar dependências
npm install
  1. Executar em modo de desenvolvimento
npm start
  1. Gerar build do aplicativo
npm run make

O executável será gerado na pasta out/.


💡 Como funciona

  • O app usa a API desktopCapturer do Electron para listar as fontes de vídeo disponíveis (telas e janelas).
  • Após selecionar uma fonte, a MediaDevices API (navigator.mediaDevices.getDisplayMedia) é usada para capturar o vídeo.
  • O stream é gravado usando a MediaRecorder API.
  • O vídeo é salvo localmente através do módulo fs do Node.js.

🧰 Como usar?

  1. Abra o aplicativo
  2. Clique em “Selecionar tela”
  3. Escolha o monitor ou janela desejada
  4. Pressione “Iniciar”
  5. Clique em “Parar” para salvar o arquivo

🐞 Possíveis erros

Erro Causa provável Solução
TypeError: Failed to execute 'getDisplayMedia' Restrições incompatíveis ou falta de permissão Verifique se o navegador/ambiente Electron permite captura de tela
Áudio não é gravado Microfone não incluído na captura Ajuste as permissões ou revise o constraints da MediaRecorder

📄 Licença

Este projeto está sob a licença GPL-2.0. Todos os contribuidores desse projeto estão sob a licença. Sinta-se livre para contribuir ou utilizar o app!

About

Aplicativo para gravação de tela com opções de microfone feito com node, html, css, javascript e electron forge!

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published