Tello-Web-Control

Video demo

screenshots of the 3 project pages

The project consists of two independent but interconnected applications:

1. Python server application (Flask + Ngrok):

   • Controls the Tello drone
   • Opens a WebSocket for commands
   • Streams video
   • Generates https connections using Ngrok

2. Web application (Next.js):

   • Sends commands to the drone
   • Receives and displays video
   • Displays server status
   • Automatically registers servers and users in the Redis database

---

Project Structure

./
├─ Flask-Local-Server/        # Flask backend Local  
│  ├─ server.py               # Main backend entrypoint
│  └─ requirements.txt        # Python dependencies
└─ Next.js-Web-Application/   # Next.js frontend + API Routes
   ├─ .env.local              # Upstash/Redis credentials 
   ├─ package.json            # Node dependencies & scripts
   └─ (app/src/…)             # Frontend code

---

Download and Installation

1. Clone the repository

Download the project from GitHub:

https://github.com/IKS-TUKE-studenti-2024-2025/BP-Makhorin

2. Prerequisites

To run the project you need:

• Python version 3.8 or higher
• Node.js version 18.18.0 or higher

3. Install libraries

3.1. Python Flask server

cd BP-Makhorin/Local-server
python -m pip install -r requirements.txt

All dependencies for the server part are listed in the requirements.txt file.

3.2. Web application (Next.js)

Ignore warnings during installation; they do not affect functionality.

cd Next.js-Web-Application
npm install

Authentication for external services

Ngrok

• The file server.py contains a default test token in the variable NGROK_AUTH_TOKEN.

• If you want to use your own Ngrok account:

  1. Register at https://dashboard.ngrok.com/get-started
  2. Copy your authentication token
  3. Replace the token in server.py with your own

Upstash Redis

• Access credentials (REST URL, token, host, password) are located in the .env.local file in the root directory of the web application.

• If you want to use your own account:

  1. Register at https://upstash.com
  2. Create a new deployment
  3. Copy the access values
  4. Replace the existing credentials in .env.local with your own

Step-by-step startup

To start the entire system, use 2 terminals in the following order:

1. Start the web application (Next.js)

cd Next.js-Web-Application
npm run build
npm start

Then open in your browser:

http://localhost:3000

2. Start the local server (Python Flask)

cd Flask-Local-Server
python server.py

3. Connect the DJI Tello drone

1. Insert the battery into the drone and turn it on using the power button.
2. On the computer running the Flask server, connect to the Wi‑Fi network of the form TELLO-XXXXXX.
3. To ensure internet connectivity at the same time, use a LAN cable or a USB Wi‑Fi adapter.

Drone control after connection

After starting the project and connecting the drone, from the home page you can go to the page for selecting available servers:

http://localhost:3000/servers

On this page, you will see running Flask server applications—select your server. You can recognize it by the unique Ngrok link that appears in the console when starting the server and on the selection page.

After selecting the desired server, click Connect and then Control to initialize the connection. You will be redirected to the control interface page.

On this page, click "Start" to set up the connection with the drone. The connection status will be displayed in the text field. Then you can send commands to control the drone and receive the video stream in real time.

Option to manually connect to the Flask server via ngrok

The connection between the Flask server and the web application can be performed by manually entering the connection details into the corresponding field without using automatic data transfer. To do this, follow these steps.

Run server.py, wait for the public address to appear in the console (e.g. http://abcd1234.ngrok.io) and copy it.

Open the web application, on the main page find the item “Connect the Web and Drone“ and paste the copied link into the field. Click the “Use This Link to Connect“ button and the web application will connect to the Flask server via the specified link.

Using the project deployed on hosting

The Next.js web application has also been deployed on Vercel. If the user does not want to run the application locally, they can use the online version:

Available at: https://tello4web.vercel.app/

There is no difference in functionality between the local and the online version.

If you want to use the online version, you need to change the BACKEND_URL parameter in the server.py file:

# For local run:
BACKEND_URL = os.environ.get('BACKEND_URL', 'http://localhost:3000/')

# For the hosted version:
BACKEND_URL = os.environ.get('BACKEND_URL', 'https://tello4web.vercel.app/')

---

---

License

This project is licensed under the 📄 Apache License 2.0.

Important:
This license applies only to the original code of this project.
It does not cover third-party applications, libraries, or services (such as ngrok) that may be required or used alongside this project.
The author is not responsible for and assumes no liability regarding third-party software.

👤 Mykyta Makhorin
📧 mykytamakhorin@gmail.com