This project is a web-based file transfer application that allows users to send and receive files directly between browsers using WebRTC. It utilizes QR codes for easy connection setup between devices.
- HTML5/CSS3: For the user interface.
- JavaScript (ES6+): For the application logic.
- WebRTC: For peer-to-peer file transfer.
- QR Codes: For connection establishment.
index.html: The main entry point of the application.styles.css: Main stylesheet.css/qr-webrtc.css: Stylesheet for the QR code and WebRTC components.js/main.js: The main application logic, including UI updates and event handling.js/connection/: Contains the logic for managing different connection methods.connection-manager.js: Manages the overall connection state.qr-connection.js: Handles the QR code generation and scanning for connection setup.webrtc-helper.js: A utility module for WebRTC related operations.
js/state/: Manages the application state.connection-store.js: A store for connection-related data.
js/ui/: Contains the UI components.connection-ui.js: UI components for the connection process.status-bar.js: The status bar component.transfer-ui.js: UI components for the file transfer process.
js/utils/: Contains utility modules.file-chunker.js: A utility for splitting files into chunks for transfer.qr-manager.js: A utility for managing QR codes.
- The user opens the application in their browser.
- A unique QR code is generated for the user.
- The user on another device scans the QR code to establish a WebRTC connection.
- Once the connection is established, the users can select files to transfer.
- The selected files are split into chunks and sent over the WebRTC data channel.
- The received chunks are reassembled on the other end and the file is downloaded.
- Implement the file transfer logic.
- Implement the UI for the file transfer process.
- Add support for multiple file transfers.
- Add a progress bar for the file transfer.
- Improve the UI/UX of the application.