Skip to content

alex2333333-coder/lan-media-share

Repository files navigation

LAN Media Share

Browse your PC media library from your phone — no cloud, no account, no upload wait.

Turn any folder on your Windows / macOS / Linux PC into a private media hub on your local network. Scan a QR code on your phone, stream videos, flip through photos, and transfer files in seconds. Built for home Wi‑Fi; optional WebRTC P2P when LAN is not enough.

中文文档 · Quick Start · Features


Why this project?

Pain point How LAN Media Share helps
Cloud drives are slow for large videos Direct LAN streaming from your disk
SMB / FTP setup is painful on mobile Zero config — open a URL or scan QR
NAS software is heavy for one PC Single npm install, one port
You don't want files leaving your home Everything stays on your machine

Typical use case: Share D:\Movies, E:\Photos, or a download folder. Lie on the couch, open the site on your phone, and watch or browse instantly.


Features

  • Instant mobile access — QR code on the PC page; phone opens the same UI in the browser
  • Rich media preview — Images, video, audio, PDF, Markdown, and plain text inline
  • Thumbnail grid — Fast browsing for photo and video folders (powered by Sharp)
  • Auto device discovery — UDP broadcast finds other instances on the same Wi‑Fi
  • Two-way file transfer — Upload from phone to PC and download from PC to phone
  • P2P fallback — WebRTC room codes when devices are not on the same subnet but can reach the signaling server
  • Responsive dark UI — Optimized for phone screens; works on desktop too
  • One-click Windows launch — Double-click 启动.bat (installs deps on first run)

Quick Start

Requirements

  • Node.js 18+
  • PC and phone on the same Wi‑Fi (or use P2P mode)

Install & run

git clone https://github.com/alex2333333-coder/lan-media-share.git
cd lan-media-share
npm install
npm run dev

Open http://localhost:3456 on your PC. Your phone uses http://<PC-IP>:3456 (shown on the page) or scan the QR code.

Share folders

  1. Click Settings (gear icon)
  2. Add folder paths — e.g. D:\Videos, /home/user/Pictures
  3. Save — folders appear for every device on the LAN

Production

npm run preview   # build frontend + start server
# or
npm run build && npm start

Usage modes

LAN mode (recommended)

Same Wi‑Fi or phone hotspot. Devices auto-discover each other. Lowest latency, simplest setup.

┌─────────────┐     Wi-Fi / hotspot      ┌─────────────┐
│  PC :3456   │ ◄──────────────────────► │   Phone     │
│  shared dirs│   HTTP + UDP discovery   │  browser    │
└─────────────┘                          └─────────────┘

P2P mode

When LAN discovery is not possible but the phone can still open the PC's URL (hotspot, Tailscale, port forward):

  1. Host (PC): Settings → shared folders → Create P2P room → 6-digit code
  2. Guest (phone): Same URL → P2P tab → enter room code
  3. File listing and preview go over WebRTC data channels

Configure TURN in src/p2p/connection.js (ICE_SERVERS) if NAT traversal fails.


Supported previews

Type Extensions
Images jpg, png, gif, webp, svg
Video mp4, webm, mov, mkv, avi, 3gp, …
Audio mp3, wav
Documents pdf, txt, md

Firewall (Windows)

Allow inbound rules on first run:

Port Protocol Purpose
3456 TCP Web UI, API, WebSocket signaling
41234 UDP Device discovery

Project structure

lan-media-share/
├── server/           # Express API, UDP discovery, P2P signaling
│   ├── index.js
│   ├── routes.js
│   ├── discovery.js
│   └── p2p-signaling.js
├── src/              # React + Vite frontend
│   ├── components/   # FileBrowser, DeviceList, P2PPanel, …
│   └── p2p/          # WebRTC host bridge & file API
├── 启动.bat          # Windows one-click launcher
└── config.json       # Local config (gitignored; see config.example.json)

Tech stack

  • Backend: Node.js, Express, WebSocket (ws), Multer, Sharp
  • Frontend: React 18, Vite 6
  • P2P: WebRTC data channels + in-app signaling
  • Discovery: UDP broadcast on port 41234

Security

Designed for trusted home networks only. There is no authentication or transport encryption beyond what HTTPS/WSS would provide if you put a reverse proxy in front. Do not expose port 3456 to the public internet without additional hardening.


Roadmap

  • HTTPS / basic auth option
  • mDNS discovery (.local hostnames)
  • Playlist / continuous video playback
  • Docker image

Contributions and issues are welcome.


License

MIT

About

Browse PC photos, videos and files from your phone over LAN — no cloud required

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages