O OpenScreen é uma solução de gravação de tela de código aberto, desenvolvida para oferecer uma alternativa gratuita e sem marcas d'água para criadores de conteúdo e desenvolvedores. Baseado em tecnologias web modernas e Electron, o projeto permite capturas profissionais com alto nível de personalização. Este guia técnico detalha o procedimento para configurar o ambinete de desenvolvimento e realizar o deploy local a partir do código-fonte.

Requisitos de Ambiente

Para compilar e executar o OpenScreen, o sistema deve possuir as seguintes ferramentas instaladas:

• Node.js: Versão 16.x ou superior (LTS recomendada).
• Gerenciador de Pacotes: npm (nativo do Node) ou Yarn.
• Git: Para controle de versão e clonagem do repositório.

Verifique a prontidão do seu ambiente executando os comandos abaixo no terminal:

node --version
npm --version

Preparação do Repositório e Dependências

O primeiro passo consiste em obter uma cópia local do código-fonte e instalar os módulos necessários para o funcionamento do ecossistema Electron e React.

# Clonar o repositório oficial
git clone https://gitcode.com/gh_mirrors/open/openscreen.git

# Acessar o diretório do projeto
cd openscreen

# Instalar pacotes necessários
npm install

Durante a instalação, o npm resolverá as dependências listadas no package.json, incluindo o framework Vite para o build do frontend e o Electron para a interface desktop.

Estrutura do Projeto

Compreender a organização dos arquivos é fundamental para realizar modificações ou contribuições:

• electron/: Contém o código do processo principal (Main Process), responsável pelo gerenciamento de janelas e integração com o sistema operacional.
• src/: Diretório do processo de renderização (Renderer Process).
  • components/: Elementos de UI em React, como controles de vídeo e linha do tempo.
  • hooks/: Lógica de estado compartilhada e hooks customizados para captura de mídia.
  • lib/: Funções utilitárias e lógica central de processamento.
• vite.config.ts: Configurações de bundling e hot module replacement (HMR).
• electron-builder.json5: Definições para empacotamento em formatos executáveis (.exe, .dmg, .AppImage).

Execução em Modo de Desenvolvimento

Para testar alterações em tempo real, utilize o modo de desenvolvimento. Este comando inicia o servidor Vite e lança a instância do Electron simultaneamente:

# Iniciar ambiente de desenvolvimento
npm run dev

Neste modo, qualquer alteração nos arquivos dentro de src/ disparará uma atualização automática na interface da aplicação, facilitando a depuração de layouts e funcionalidades de gravação.

Compilação e Build de Produção

Para gerar o binário final distribuível, o processo de build deve ser executado. O comando abaixo compila o código TypeScript, otimiza os assets e empacota a aplicação conforme o sistema operacional hospedeiro:

# Gerar binários de produção
npm run build

Após a conclusão, os arquivos resultantes estarão localizados na pasta dist-electron. Dependendo do seu SO, você encontrará:

• Windows: Instaladores .exe.
• macOS: Arquivos .dmg ou .app.
• Linux: Formatos como .AppImage ou .deb.

Recursos de Interface e Edição

A aplicação OpenScreen integra funcionalidades avançadas diretamente no workflow do usuário:

• Painel de Captura: Interface simplificada para seleção de fontes de entrada e início rápido de gravação.
• Editor Embutido: Ferramentas de corte e ajuste fino em uma timeline intuitiva.
• Configurações Avançadas: Ajustes de zoom, aplicação de filtros e anotações em tempo real durante a captura.
• Suporte Multijanelas: Capacidade de alternar o foco da gravação entre diferentes aplicativos abertos no sistema.

Para customizar o comportamento da aplicação, desenvolvedores podem editar as opções de compilação no arquivo tsconfig.json ou ajustar as portas de escuta no vite.config.ts caso haja conflitos de rede no ambiente local.