logologo
라이트 테마 버튼다크 테마 버튼
#Website
#Admin System
#Enterprise Solutions
#Utility Features
#Next.js
#UI/UX Design
Manmul Workshop
Manmul Workshop
portfolio-top-image/file/2025_05_12/1747036535592_만물공작소-1.webp
Year of Production0
Production Period3 months
Technologies UsedNext.js, TypeScript
ABOUT

This project delivered a drone-powered platform that provides real-time, location-based information for festival sites and crowded areas—such as live weather conditions, congestion level, and parking availability.


We built a real-time data visualization engine that processes key signals collected from drone-mounted sensors (weather, crowd density, and parking capacity) and converts them into intuitive visual outputs. We also designed a map-based UI that lets users tap a specific point to instantly view detailed on-site status.


In addition, we implemented a high-quality live video streaming system fully integrated with drone cameras. Using RTMP and web streaming protocols, the platform supports stable real-time broadcasting. To meet different user needs, we delivered a separated interface structure: an admin console for operating drones and managing data/streams, and a user-facing view focused on fast information lookup and live monitoring.

md

코드 복사


Client Requirements

1) Drone-based real-time regional information system

- Collect and analyze on-site data (weather, crowding, parking availability) via drone sensors and cameras.

- Provide continuous, real-time updates that reflect rapidly changing conditions.

- Visualize complex data in an easy-to-understand format (charts/graphics), not raw numbers.

- Support use cases like festivals and large public events so visitors can plan visits efficiently.


2) Real-time live video streaming

- Deliver live footage from drone-mounted high-resolution cameras to show the actual situation on site.

- Consider multi-stream environments where multiple drones/locations can be monitored.

- Ensure stable streaming with minimal lag and interruptions.

- Provide flexible viewing (single stream selection, multi-stream comparison).


3) Separate admin and user modes

- Admin mode: flight operations, monitoring, data registration/management, and stream control.

- User mode: simple, intuitive access to real-time status + live video with minimal learning curve.


Key Deliverables

1) Real-time data collection + visualization system

- Developed a real-time processing pipeline for sensor-based data (weather, crowd density, parking space).

- Built a visualization engine to convert raw data into charts and graphical indicators.

- Designed a map-based UI: users click/tap a point to view live status in a popup panel.

- Optimized the frontend for low latency by focusing on core functions and lightweight rendering.

- Provided data-type-optimized charts and graphs to maximize readability and decision speed.


2) Live streaming integration (RTMP + web streaming)

- Implemented a high-quality live streaming system linked directly to drone cameras.

- Supported RTMP and web streaming protocols for broader device/network compatibility.

- Added adaptive behavior to maintain stable viewing depending on network conditions.

- Designed a multi-channel structure: each drone assigned its own stream channel for scalable monitoring.

- Enabled flexible watching modes (select one drone, monitor multiple feeds).


3) Admin / user interface separation

- Admin console:

- Drone flight path setup and real-time control

- Monitoring for battery/flight/data collection status

- Data CRUD (create/edit/delete) for collected information

- Stream start/stop controls per drone

- Dashboard-style operational visibility for fast response

- User interface:

- Location-based, map-centered information lookup

- Quick access to live video for selected areas

- Simplified interaction model focused on viewing (not control)

- Reduced friction with lightweight login and minimal steps to access services

OUTPUT
portfolio-image/file/2024_11_27/1732690240345_1728972220291_image 13.webp
wave-imagewave-image
Contact Us
Considering starting a project? Start your project perfectly with DevFive.
/images/main/contact_us/guide-icon.webp
GuidelinesPreparing your first project? Refer to DevFive's guide to understand everything from development process to technology stack at a glance.
CC
hh
ee
cc
kk
GG
uu
ii
dd
ee
ll
ii
nn
ee
ss
/images/main/contact_us/inquiry-icon.webp
Quote and InquiryStart your project with DevFive with a quick and easy quote.
RR
ee
qq
uu
ee
ss
tt
QQ
uu
oo
tt
ee