# pandi-127/frame-jack architecture

> Architecture diagram of the GitHub repository pandi-127/frame-jack, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/pandi-127/frame-jack
- Repository: https://github.com/pandi-127/frame-jack

## Overview

Frame-Jack streams a Windows game to a browser over a LAN: the backend launches and injects the capture DLL, receives frames through a named pipe, encodes and forwards video over WebRTC, and relays browser controls to a virtual Xbox controller. The README documents the capture, encoding, transport, signaling, and input stages; sampled source supports the injection, capture, client, and selected backend connections. Backend details not present in the excerpt are represented only where documented.

Main entry points: [`backend/index.js`](https://github.com/pandi-127/frame-jack/blob/main/backend/index.js) (Streaming server), [`frontend/client.js`](https://github.com/pandi-127/frame-jack/blob/main/frontend/client.js) (Client logic), [`dll/Dx11Hook/Dx11Hook/dllmain.cpp`](https://github.com/pandi-127/frame-jack/blob/main/dll/Dx11Hook/Dx11Hook/dllmain.cpp) (DX11 capture hook), [`Injector/injector/injector/injector.cpp`](https://github.com/pandi-127/frame-jack/blob/main/Injector/injector/injector/injector.cpp) (DLL injector)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_capture["Launch and capture"]
  node_game["Game process"]
  node_injector["DLL injector<br/>[injector.cpp]"]
  node_capture_dll["DX11 capture hook<br/>[dllmain.cpp]"]
  node_pipe["Named pipe"]
end

subgraph group_streaming["Video streaming"]
  node_server["Streaming server<br/>[index.js]"]
  node_frame_queue["Frame queue<br/>[index.js]"]
  node_ffmpeg["FFmpeg NVENC"]
  node_udp["UDP packet handler<br/>[index.js]"]
  node_webrtc_server["WebRTC peer<br/>[index.js]"]
end

subgraph group_client["Browser client"]
  node_browser["Browser client<br/>[client.html]"]
  node_client_logic["Client logic<br/>[client.js]"]
end

subgraph group_input["Controller input"]
  node_controller["Virtual Xbox controller<br/>[index.js]"]
  node_vigem["ViGEm driver"]
end

node_user(("Player"))

node_user -->|"opens stream"| node_server
node_server -->|"launches"| node_game
node_server -->|"runs injector"| node_injector
node_injector -->|"injects DLL"| node_game
node_capture_dll -->|"hooks Present"| node_game
node_capture_dll -->|"writes frames"| node_pipe
node_server -->|"reads frames"| node_pipe
node_server -->|"queues frames"| node_frame_queue
node_server -->|"starts encoder"| node_ffmpeg
node_frame_queue -->|"feeds frames"| node_ffmpeg
node_ffmpeg -->|"sends RTP"| node_udp
node_udp -->|"forwards SRTP"| node_webrtc_server
node_server -->|"sets up peer"| node_webrtc_server
node_webrtc_server -->|"streams video"| node_client_logic
node_user -->|"uses controls"| node_browser
node_server -->|"serves page"| node_browser
node_client_logic -->|"signals offer and ICE"| node_server
node_server -->|"returns answer and ICE"| node_client_logic
node_client_logic -->|"sends control input"| node_controller
node_controller -->|"updates device"| node_vigem

click node_injector "https://github.com/pandi-127/frame-jack/blob/main/Injector/injector/injector/injector.cpp"
click node_capture_dll "https://github.com/pandi-127/frame-jack/blob/main/dll/Dx11Hook/Dx11Hook/dllmain.cpp"
click node_server "https://github.com/pandi-127/frame-jack/blob/main/backend/index.js"
click node_frame_queue "https://github.com/pandi-127/frame-jack/blob/main/backend/index.js"
click node_udp "https://github.com/pandi-127/frame-jack/blob/main/backend/index.js"
click node_webrtc_server "https://github.com/pandi-127/frame-jack/blob/main/backend/index.js"
click node_browser "https://github.com/pandi-127/frame-jack/blob/main/frontend/client.html"
click node_client_logic "https://github.com/pandi-127/frame-jack/blob/main/frontend/client.js"
click node_controller "https://github.com/pandi-127/frame-jack/blob/main/backend/index.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_game,node_injector,node_capture_dll,node_pipe toneBlue
class node_server,node_frame_queue,node_ffmpeg,node_udp,node_webrtc_server toneAmber
class node_browser,node_client_logic toneMint
class node_controller,node_vigem toneRose
class node_user toneIndigo
```

## Components

### Launch and capture

- **Game process**
- [DLL injector](https://github.com/pandi-127/frame-jack/blob/main/Injector/injector/injector/injector.cpp): `Injector/injector/injector/injector.cpp`
- [DX11 capture hook](https://github.com/pandi-127/frame-jack/blob/main/dll/Dx11Hook/Dx11Hook/dllmain.cpp): `dll/Dx11Hook/Dx11Hook/dllmain.cpp`
- **Named pipe**

### Video streaming

- [Streaming server](https://github.com/pandi-127/frame-jack/blob/main/backend/index.js): `backend/index.js`
- [Frame queue](https://github.com/pandi-127/frame-jack/blob/main/backend/index.js): `backend/index.js`
- **FFmpeg NVENC**
- [UDP packet handler](https://github.com/pandi-127/frame-jack/blob/main/backend/index.js): `backend/index.js`
- [WebRTC peer](https://github.com/pandi-127/frame-jack/blob/main/backend/index.js): `backend/index.js`

### Browser client

- [Browser client](https://github.com/pandi-127/frame-jack/blob/main/frontend/client.html): `frontend/client.html`
- [Client logic](https://github.com/pandi-127/frame-jack/blob/main/frontend/client.js): `frontend/client.js`

### Controller input

- [Virtual Xbox controller](https://github.com/pandi-127/frame-jack/blob/main/backend/index.js): `backend/index.js`
- **ViGEm driver**

### Other components

- **Player**

## Connections

- Player → Streaming server: opens stream
- Streaming server → Game process: launches
- Streaming server → DLL injector: runs injector
- DLL injector → Game process: injects DLL
- DX11 capture hook → Game process: hooks Present
- DX11 capture hook → Named pipe: writes frames
- Streaming server → Named pipe: reads frames
- Streaming server → Frame queue: queues frames
- Streaming server → FFmpeg NVENC: starts encoder
- Frame queue → FFmpeg NVENC: feeds frames
- FFmpeg NVENC → UDP packet handler: sends RTP
- UDP packet handler → WebRTC peer: forwards SRTP
- Streaming server → WebRTC peer: sets up peer
- WebRTC peer → Client logic: streams video
- Player → Browser client: uses controls
- Streaming server → Browser client: serves page
- Client logic → Streaming server: signals offer and ICE
- Streaming server → Client logic: returns answer and ICE
- Client logic → Virtual Xbox controller: sends control input
- Virtual Xbox controller → ViGEm driver: updates device