title: Ð Ð°Ð·ÑÐ°Ð±Ð¾ÑÐºÐ° Ð²ÐµÐ±-Ð¿ÑÐ¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ Ð´Ð»Ñ Ð¾ÑÐ¾Ð±ÑÐ°Ð¶ÐµÐ½Ð¸Ñ Ð¿Ð¾ÑÐ¾ÐºÐ¾Ð² Ð²Ð¸Ð´ÐµÐ¾ Ñ Ð¸ÑÐ¿Ð¾Ð»ÑÐ·Ð¾Ð²Ð°Ð½Ð¸ÐµÐ¼ ÑÐµÑÐµÐ½Ð¸Ð¹ Ñ Ð¾ÑÐºÑÑÑÑÐ¼ Ð¸ÑÑ Ð¾Ð´Ð½ÑÐ¼ ÐºÐ¾Ð´Ð¾Ð¼
title: Ð²ÑÐ¿ÑÑÐºÐ½Ð°Ñ ÐºÐ²Ð°Ð»Ð¸ÑÐ¸ÐºÐ°ÑÐ¸Ð¾Ð½Ð½Ð°Ñ ÑÐ°Ð±Ð¾ÑÐ° Ð±Ð°ÐºÐ°Ð»Ð°Ð²ÑÐ°
titleType: Subtitle
title: Development of a web application for displaying video streams using open-source solutions
Creators: name: ÐÐ°Ð²ÑÐ¸Ð½Ð¾Ð², Ð®ÑÐ¸Ð¹
Publisher: name: Ð¡Ð°Ð½ÐºÑ-ÐÐµÑÐµÑÐ±ÑÑÐ³ÑÐºÐ¸Ð¹ Ð¿Ð¾Ð»Ð¸ÑÐµÑÐ½Ð¸ÑÐµÑÐºÐ¸Ð¹ ÑÐ½Ð¸Ð²ÐµÑÑÐ¸ÑÐµÑ ÐÐµÑÑÐ° ÐÐµÐ»Ð¸ÐºÐ¾Ð³Ð¾
Year: 2024
Subjects: RTSP
RTP
LL-DASH
FFmpeg
NGINX
IP-ÐºÐ°Ð¼ÐµÑÐ°
Java
Gradle
Intellij IDEA
spring
java script
Ð²ÐµÐ±-Ð¿ÑÐ¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ðµ
Ð²Ð¸Ð´ÐµÐ¾Ð¿Ð¾ÑÐ¾ÐºÐ¸
ÐºÐ»Ð¸ÐµÐ½Ñ
ÑÐµÑÐ²ÐµÑ
JWT
IP-camera
IntelliJ IDEA
Spring
JavaScript
web application
video streams
client
server

description: Ð Ð´Ð°Ð½Ð½Ð¾Ð¹ ÑÐ°Ð±Ð¾ÑÐµ Ð¾Ð¿Ð¸ÑÑÐ²Ð°ÐµÑÑÑ ÑÐ°Ð·ÑÐ°Ð±Ð¾ÑÐºÐ° Ð¿ÑÐ¾ÑÐ¾ÑÐ¸Ð¿Ð° Ð²ÐµÐ±-Ð¿ÑÐ¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ Ð´Ð»Ñ Ð¾ÑÐ¾Ð±ÑÐ°Ð¶ÐµÐ½Ð¸Ñ Ð¿Ð¾ÑÐ¾ÐºÐ¾Ð² Ð²Ð¸Ð´ÐµÐ¾ Ñ ip-ÐºÐ°Ð¼ÐµÑ, Ñ Ð¸ÑÐ¿Ð¾Ð»ÑÐ·Ð¾Ð²Ð°Ð½Ð¸Ðµ ÑÐµÑÐµÐ½Ð¸Ð¹ Ñ Ð¾ÑÐºÑÑÑÑÐ¼ Ð¸ÑÑÐ¾Ð´Ð½ÑÐ¼ ÐºÐ¾Ð´Ð¾Ð¼, Ð´Ð»Ñ ÐÐ Â«ÐÐÐ¦ Ð¡ÐÐ Ð­Ð¢Ð£Â». ÐÐ°Ð´Ð°ÑÐ¸, ÐºÐ¾ÑÐ¾ÑÑÐµ ÑÐµÑÐ°Ð»Ð¸ÑÑ Ð² ÑÐ¾Ð´Ðµ ÑÐ°Ð·ÑÐ°Ð±Ð¾ÑÐºÐ¸: 1. ÐÐ½Ð°Ð»Ð¸Ð· ÑÑÐµÐ±Ð¾Ð²Ð°Ð½Ð¸Ð¹ Ð¾Ñ Ð·Ð°ÐºÐ°Ð·ÑÐ¸ÐºÐ°; 2. ÐÐ¾Ð¸ÑÐº Ð¸ Ð°Ð½Ð°Ð»Ð¸Ð· Ð³Ð¾ÑÐ¾Ð²ÑÑ ÑÐµÑÐµÐ½Ð¸Ð¹, Ð¿Ð¾Ð´ÑÐ¾Ð´ÑÑÐ¸Ñ Ð¿Ð¾Ð´ ÑÑÐµÐ±Ð¾Ð²Ð°Ð½Ð¸Ñ; 3. ÐÐ½Ð°Ð»Ð¸Ð· Ð¿ÑÐ¾ÑÐ¾ÐºÐ¾Ð»Ð¾Ð² Ð¸ ÑÐµÑÐ½Ð¾Ð»Ð¾Ð³Ð¸Ð¹ Ð¿ÐµÑÐµÐ´Ð°ÑÐ¸ Ð²Ð¸Ð´ÐµÐ¾Ð¿Ð¾ÑÐ¾ÐºÐ¾Ð²; 4. ÐÐ¾Ð¿Ð¾Ð»Ð½ÐµÐ½Ð¸Ðµ ÑÑÐµÐ±Ð¾Ð²Ð°Ð½Ð¸Ð¹ Ð·Ð°ÐºÐ°Ð·ÑÐ¸ÐºÐ°; 5. ÐÑÐ±Ð¾Ñ ÑÑÐµÐ´ÑÑÐ² ÑÐ°Ð·ÑÐ°Ð±Ð¾ÑÐºÐ¸; 6. Ð Ð°Ð·ÑÐ°Ð±Ð¾ÑÐºÐ° Ð°ÑÑÐ¸ÑÐµÐºÑÑÑÑ Ð¿ÑÐ¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ; 7. Ð Ð°Ð·ÑÐ°Ð±Ð¾ÑÐºÐ° Ð¿ÑÐ¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ Ñ Ð·Ð°ÑÐ²Ð»ÐµÐ½Ð½ÑÐ¼ ÑÑÐ½ÐºÑÐ¸Ð¾Ð½Ð°Ð»Ð¾Ð¼; 8. ÐÑÐµÐ½ÐºÐ° Ð¿Ð¾Ð»ÑÑÐµÐ½Ð½Ð¾Ð³Ð¾ ÑÐµÐ·ÑÐ»ÑÑÐ°ÑÐ° Ð¸ Ð°Ð½Ð°Ð»Ð¸Ð· Ð¿ÑÐ¾Ð´ÐµÐ»Ð°Ð½Ð½Ð¾Ð¹ ÑÐ°Ð±Ð¾ÑÑ; 9. ÐÑÐµÐ½ÐºÐ° Ð´Ð°Ð»ÑÐ½ÐµÐ¹ÑÐµÐ³Ð¾ ÑÐ°Ð·Ð²Ð¸ÑÐ¸Ñ Ð²ÐµÐ±-Ð¿ÑÐ¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ. Ð Ð°Ð·ÑÐ°Ð±Ð¾ÑÐºÐ° ÑÐµÑÐ²ÐµÑÐ° Ð²ÐµÐ»Ð°ÑÑ Ð½Ð° ÑÐ·ÑÐºÐµ Java Ñ Ð¸ÑÐ¿Ð¾Ð»ÑÐ·Ð¾Ð²Ð°Ð½Ð¸ÐµÐ¼ ÑÑÐµÐ¹Ð¼Ð²Ð¾ÑÐºÐ° Spring Boot, ÑÐ°Ð·ÑÐ°Ð±Ð¾ÑÐºÐ° ÐºÐ»Ð¸ÐµÐ½ÑÑÐºÐ¾Ð¹ ÑÐ°ÑÑÐ¸ Ð²ÐµÐ»Ð°ÑÑ Ñ Ð¸ÑÐ¿Ð¾Ð»ÑÐ·Ð¾Ð²Ð°Ð½Ð¸Ðµ HTML, CSS, Java Script. ÐÐµÐ± Ð¿ÑÐ¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ðµ Ð¸Ð¼ÐµÐµÑ ÐºÐ»Ð¸ÐµÐ½Ñ-ÑÐµÑÐ²ÐµÑÐ½ÑÑ, Ð¼Ð½Ð¾Ð³Ð¾ÑÑÐ¾Ð²Ð½ÐµÐ²ÑÑ Ð°ÑÑÐ¸ÑÐµÐºÑÑÑÑ. ÐÐ»Ñ Ð¾ÑÐ¾Ð±ÑÐ°Ð¶ÐµÐ½Ð¸Ñ RTSP Ð¿Ð¾ÑÐ¾ÐºÐ¾Ð² Ð² Ð²ÐµÐ±-Ð±ÑÐ°ÑÐ·ÐµÑÐµ Ð±ÑÐ»Ð¾ Ð¿ÑÐ¸Ð½ÑÑÐ¾ ÑÐµÑÐµÐ½Ð¸Ðµ Ð¾ Ð²Ð½ÐµÐ´ÑÐµÐ½Ð¸Ð¸ Ð¼ÐµÐ´Ð¸Ð°ÑÐµÑÐ²ÐµÑÐ° Ñ Ð¿ÑÐ¾Ð¼ÐµÐ¶ÑÑÐ¾ÑÐ½Ð¾Ð¹ ÐºÐ¾Ð½Ð²ÐµÑÑÐ°ÑÐ¸ÐµÐ¹ Ð¿Ð¾ÑÐ¾ÐºÐ° Ð¿ÑÐ¸ Ð¿Ð¾Ð¼Ð¾ÑÐ¸ ffmpeg, Ð² ÑÐ¾ÑÐ¼Ð°Ñ LL-DASH. Ð´Ð»Ñ ÑÐ¾ÐºÑÐ°ÑÐµÐ½Ð¸Ñ Ð¾Ð±ÑÐµÐ¼Ð° ÑÐ°Ð±Ð»Ð¾Ð½Ð½Ð¾Ð³Ð¾ ÐºÐ¾Ð´Ð° Ð¸ÑÐ¿Ð¾Ð»ÑÐ·Ð¾Ð²Ð°Ð½Ð° Ð±Ð¸Ð±Ð»Ð¸Ð¾ÑÐµÐºÐ° Lombok.Â 
description: This work describes the development of a prototype web application for displaying video streams from IP cameras using open-source solutions for JSC "SPB ETU R&amp;D Center". The tasks addressed during the development include: 1. Analysis of customer requirements; 2. Search and analysis of ready-made solutions suitable for the requirements; 3. Analysis of video stream transmission protocols and technologies; 4. Refinement of customer requirements; 5. Selection of development tools; 6. Application architecture development; 7. Development of the application with the stated functionality; 8. Evaluation of the result and analysis of the work done; 9. Evaluation of the further development of the web application. The server was developed in Java using the Spring Boot framework, and the client part was developed using HTML, CSS, and JavaScript. The web application has a client-server, multi-tier architecture. To display RTSP streams in the web browser, it was decided to implement a media server with intermediate stream conversion using ffmpeg to the LL-DASH format. The Lombok library was used to reduce the amount of boilerplate code.