Videospace2

Running

App Files Files Community

Aleksmorshen commited on 9 days ago

Commit

e6a2689

verified ·

1 Parent(s): 961d562

Update app.py

Browse files

Files changed (1) hide show

app.py +476 -159

app.py CHANGED Viewed

@@ -7,82 +7,177 @@ from flask_socketio import SocketIO, join_room, leave_room, emit
 import hashlib
 app = Flask(__name__)
-app.config['SECRET_KEY'] = 'your-secret-key-here'
 socketio = SocketIO(app)
-# Путь к JSON-файлам
-ROOMS_DB = 'rooms.json'
-USERS_DB = 'users.json'
-# Загрузка данных из JSON
 def load_json(file_path, default={}):
-    if os.path.exists(file_path):
-        with open(file_path, 'r') as f:
-            return json.load(f)
-    return default
-# Сохранение данных в JSON
 def save_json(file_path, data):
-    with open(file_path, 'w') as f:
-        json.dump(data, f, indent=4)
 # Инициализация баз данных
 rooms = load_json(ROOMS_DB)
 users = load_json(USERS_DB)
-# Генерация 15-значного токена
 def generate_token():
     return ''.join(random.choices(string.ascii_letters + string.digits, k=15))
-# Хеширование пароля
 def hash_password(password):
-    return hashlib.sha256(password.encode()).hexdigest()
 # Главная страница (регистрация/вход)
 @app.route('/', methods=['GET', 'POST'])
 def index():
     if 'username' in session:
         return redirect(url_for('dashboard'))
     if request.method == 'POST':
         action = request.form.get('action')
         username = request.form.get('username')
         password = request.form.get('password')
         if action == 'register':
             if username in users:
                 return "Пользователь уже существует", 400
             users[username] = hash_password(password)
             save_json(USERS_DB, users)
             session['username'] = username
             return redirect(url_for('dashboard'))
         elif action == 'login':
             if username in users and users[username] == hash_password(password):
                 session['username'] = username
                 return redirect(url_for('dashboard'))
             return "Неверный логин или пароль", 401
     return render_template_string('''<!DOCTYPE html>
-<html>
 <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Видеоконференция</title>
     <style>
-        body { font-family: Arial, sans-serif; text-align: center; padding: 20px; margin: 0; }
-        h1 { font-size: 1.5em; }
-        button, input { padding: 10px; margin: 5px; width: 100%; max-width: 300px; box-sizing: border-box; }
-        form { display: flex; flex-direction: column; align-items: center; }
-        @media (max-width: 600px) { h1 { font-size: 1.2em; } button, input { padding: 8px; } }
     </style>
 </head>
 <body>
-    <h1>Видеоконференция</h1>
-    <form method="post">
-        <input type="text" name="username" placeholder="Логин" required>
-        <input type="password" name="password" placeholder="Пароль" required>
-        <button type="submit" name="action" value="login">Войти</button>
-        <button type="submit" name="action" value="register">Зарегистрироваться</button>
-    </form>
 </body>
 </html>''')
@@ -91,6 +186,7 @@ def index():
 def dashboard():
     if 'username' not in session:
         return redirect(url_for('index'))
     if request.method == 'POST':
         action = request.form.get('action')
         if action == 'create':
@@ -103,31 +199,121 @@ def dashboard():
             if token in rooms and len(rooms[token]['users']) < rooms[token]['max_users']:
                 return redirect(url_for('room', token=token))
             return "Комната не найдена или переполнена", 404
     return render_template_string('''<!DOCTYPE html>
-<html>
 <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Панель управления</title>
     <style>
-        body { font-family: Arial, sans-serif; text-align: center; padding: 20px; margin: 0; }
-        h1 { font-size: 1.5em; }
-        button, input { padding: 10px; margin: 5px; width: 100%; max-width: 300px; box-sizing: border-box; }
-        form { display: flex; flex-direction: column; align-items: center; }
-        @media (max-width: 600px) { h1 { font-size: 1.2em; } button, input { padding: 8px; } }
     </style>
 </head>
 <body>
-    <h1>Добро пожаловать, {{ session['username'] }}</h1>
-    <form method="post">
-        <button type="submit" name="action" value="create">Создать комнату</button>
-    </form>
-    <form method="post">
-        <input type="text" name="token" placeholder="Введите токен комнаты" required>
-        <button type="submit" name="action" value="join">Войти в комнату</button>
-    </form>
-    <form action="/logout" method="post">
-        <button type="submit">Выйти</button>
-    </form>
 </body>
 </html>''', session=session)
@@ -144,25 +330,125 @@ def room(token):
         return redirect(url_for('index'))
     if token not in rooms:
         return redirect(url_for('dashboard'))
     return render_template_string('''<!DOCTYPE html>
-<html>
 <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Комната {{ token }}</title>
     <style>
-        body { font-family: Arial, sans-serif; margin: 0; padding: 10px; }
-        h1 { font-size: 1.5em; text-align: center; }
-        #users { margin: 10px 0; text-align: center; font-size: 1em; }
-        .video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; padding: 10px; }
-        video { width: 100%; height: auto; background: black; border-radius: 5px; }
-        button { padding: 10px; width: 100%; max-width: 300px; margin: 10px auto; display: block; }
         @media (max-width: 600px) {
-            h1 { font-size: 1.2em; }
-            .video-grid { grid-template-columns: 1fr; }
-            video { max-height: 200px; }
-            button { padding: 8px; }
         }
     </style>
 </head>
 <body>
     <h1>Комната: {{ token }}</h1>
@@ -170,7 +456,6 @@ def room(token):
     <div class="video-grid" id="video-grid"></div>
     <button onclick="leaveRoom()">Покинуть комнату</button>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.1/socket.io.js"></script>
     <script>
         const socket = io();
         const token = '{{ token }}';
@@ -196,6 +481,9 @@ def room(token):
             const existingVideo = document.querySelector(`video[data-user="${user}"]`);
             if (existingVideo) return;
             const video = document.createElement('video');
             video.srcObject = stream;
             video.setAttribute('playsinline', '');
@@ -206,105 +494,127 @@ def room(token):
             if (muted) video.muted = true;
             video.dataset.user = user;
-            document.getElementById('video-grid').appendChild(video);
-        }
-        // Создание соединения с другим пользователем (используется и пр�� инициации, и при ответе)
         function createPeerConnection(user) {
-            if (peers[user]) {
-                return peers[user].peerConnection; // Return existing connection
             }
-            console.log('Создание RTCPeerConnection для', user);
-            const peerConnection = new RTCPeerConnection(iceConfig);
-            peers[user] = { peerConnection: peerConnection, iceCandidates: [] };
-            localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));
-            peerConnection.ontrack = event => {
-                console.log('Получен поток от', user);
-                addVideoStream(event.streams[0], user);
-            };
-            peerConnection.onicecandidate = event => {
-                if (event.candidate) {
-                    console.log('Отправка ICE-кандидата для', user);
-                    socket.emit('signal', {
-                        token: token,
-                        from: username,
-                        to: user,
-                        signal: { type: 'candidate', candidate: event.candidate }
-                    });
-                }
-            };
-            return peerConnection;
         }
-          // Обработка входящих сигналов
         socket.on('signal', data => {
-            if (data.from === username) return;
-            console.log('Получен сигнал от', data.from, ':', data.signal.type);
-            let peerEntry = peers[data.from];
-            if (!peerEntry) {
-                 createPeerConnection(data.from);
-                 peerEntry = peers[data.from];
-            }
-            let peerConnection = peerEntry.peerConnection;
-            if (data.signal.type === 'offer') {
-                console.log('Обработка предложения от', data.from);
-                peerConnection.setRemoteDescription(new RTCSessionDescription(data.signal))
-                    .then(() => peerConnection.createAnswer())
-                    .then(answer => peerConnection.setLocalDescription(answer))
-                    .then(() => {
-                        socket.emit('signal', {
-                            token: token,
-                            from: username,
-                            to: data.from,
-                            signal: peerConnection.localDescription
-                        });
-                        //Добавление ICE-кандидатов из буффера
-                        while (peerEntry.iceCandidates.length > 0) {
-                            const candidate = peerEntry.iceCandidates.shift();
-                            peerConnection.addIceCandidate(new RTCIceCandidate(candidate))
-                            .catch(err => console.error("Error adding ice candidate from buffer", err));
-                        }
-                    })
-                    .catch(err => console.error('Ошибка обработки предложения:', err));
-            } else if (data.signal.type === 'answer') {
-                console.log('Обработка ответа от', data.from);
-                peerConnection.setRemoteDescription(new RTCSessionDescription(data.signal))
-                 .then(() => {
-                     //Добавление ICE-кандидатов из буффера
-                    while (peerEntry.iceCandidates.length > 0) {
-                        const candidate = peerEntry.iceCandidates.shift();
-                        peerConnection.addIceCandidate(new RTCIceCandidate(candidate))
-                        .catch(err => console.error("Error adding ice candidate from buffer", err));
-                    }
-                 })
-                .catch(err => console.error('Ошибка установки ответа:', err));
-            } else if (data.signal.type === 'candidate') {
-                console.log('Обработка ICE-кандидата от', data.from);
-                if (peerConnection.remoteDescription) {
-                    peerConnection.addIceCandidate(new RTCIceCandidate(data.signal.candidate))
-                        .catch(err => console.error('Ошибка добавления ICE-кандидата:', err));
-                } else {
-                    // Если remote description еще не установлен, добавляем в буфер
-                    peerEntry.iceCandidates.push(data.signal.candidate);
-                    console.log("Ice candidate buffered for", data.from)
                 }
             }
         });
         socket.on('user_joined', data => {
             console.log('Пользователь', data.username, 'присоединился');
             document.getElementById('users').innerText = 'Пользователи: ' + data.users.join(', ');
-            if (data.username !== username) {
                 const peerConnection = createPeerConnection(data.username);
                 // Создание предложения (offer), только если мы инициатор
                 peerConnection.createOffer()
@@ -321,44 +631,49 @@ def room(token):
             }
         });
         socket.on('user_left', data => {
-            console.log('Пользователь', data.username, 'покинул комнату');
-            document.getElementById('users').innerText = 'Пользователи: ' + data.users.join(', ');
-            if (peers[data.username]) {
-                peers[data.username].peerConnection.close();
-                delete peers[data.username];
-                const video = document.querySelector(`video[data-user="${data.username}"]`);
-                if (video) video.remove();
-            }
         });
         socket.on('init_users', data => {
             console.log('Инициализация пользователей:', data.users);
             data.users.forEach(user => {
-                if (user !== username) {
                    createPeerConnection(user);  // Создаем RTCPeerConnection для всех, *кроме себя*
                 }
             });
         });
         function leaveRoom() {
             socket.emit('leave', { token: token, username: username });
-            localStream.getTracks().forEach(track => track.stop());
             for (let user in peers) {
                 peers[user].peerConnection.close();
             }
             window.location.href = '/dashboard';
         }
     </script>
 </body>
 </html>''', token=token, session=session)
 # WebSocket события
 @socketio.on('join')
 def handle_join(data):
     token = data['token']
     username = data['username']
     if token in rooms and len(rooms[token]['users']) < rooms[token]['max_users']:
         join_room(token)
         if username not in rooms[token]['users']:
@@ -366,12 +681,15 @@ def handle_join(data):
             save_json(ROOMS_DB, rooms)
         emit('user_joined', {'username': username, 'users': rooms[token]['users']}, room=token)
         emit('init_users', {'users': rooms[token]['users']}, to=request.sid)
 @socketio.on('leave')
 def handle_leave(data):
     token = data['token']
     username = data['username']
     if token in rooms and username in rooms[token]['users']:
         leave_room(token)
         rooms[token]['users'].remove(username)
@@ -380,7 +698,6 @@ def handle_leave(data):
 @socketio.on('signal')
 def handle_signal(data):
-    # Пересылаем сигнал всем в комнате, кроме отправителя
     emit('signal', data, room=data['token'], skip_sid=request.sid)
 if __name__ == '__main__':

 import hashlib
 app = Flask(__name__)
+app.config['SECRET_KEY'] = 'your-very-secret-key-here'  # ОЧЕНЬ ВАЖНО: смените на реальный секретный ключ!
 socketio = SocketIO(app)
+# Пути к JSON-файлам (лучше использовать абсолютные пути или пути относительно app.root_path)
+ROOMS_DB = os.path.join(app.root_path, 'rooms.json')
+USERS_DB = os.path.join(app.root_path, 'users.json')
+# Загрузка данных из JSON (с обработкой ошибок)
 def load_json(file_path, default={}):
+    try:
+        if os.path.exists(file_path):
+            with open(file_path, 'r', encoding='utf-8') as f:
+                return json.load(f)
+        return default
+    except (FileNotFoundError, json.JSONDecodeError) as e:
+        print(f"Error loading JSON from {file_path}: {e}")
+        return default
+# Сохранение данных в JSON (с обработкой ошибок)
 def save_json(file_path, data):
+    try:
+        with open(file_path, 'w', encoding='utf-8') as f:
+            json.dump(data, f, indent=4, ensure_ascii=False)
+    except OSError as e:
+        print(f"Error saving JSON to {file_path}: {e}")
 # Инициализация баз данных
 rooms = load_json(ROOMS_DB)
 users = load_json(USERS_DB)
+# Генерация токена
 def generate_token():
     return ''.join(random.choices(string.ascii_letters + string.digits, k=15))
+# Хеширование пароля (более безопасно использовать bcrypt или scrypt)
 def hash_password(password):
+    return hashlib.sha256(password.encode('utf-8')).hexdigest()
 # Главная страница (регистрация/вход)
 @app.route('/', methods=['GET', 'POST'])
 def index():
     if 'username' in session:
         return redirect(url_for('dashboard'))
     if request.method == 'POST':
         action = request.form.get('action')
         username = request.form.get('username')
         password = request.form.get('password')
         if action == 'register':
             if username in users:
                 return "Пользователь уже существует", 400
+            # ВАЖНО: Хешируйте пароли перед сохранением!
             users[username] = hash_password(password)
             save_json(USERS_DB, users)
             session['username'] = username
             return redirect(url_for('dashboard'))
         elif action == 'login':
             if username in users and users[username] == hash_password(password):
                 session['username'] = username
                 return redirect(url_for('dashboard'))
             return "Неверный логин или пароль", 401
     return render_template_string('''<!DOCTYPE html>
+<html lang="ru">
 <head>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Видеоконференция</title>
     <style>
+        :root {
+            --primary-color: #6200ee; /* Основной цвет */
+            --secondary-color: #3700b3; /* Вторичный цвет */
+            --background-color: #ffffff; /* Цвет фона */
+            --surface-color: #f5f5f5; /* Цвет поверхностей (карточки, формы) */
+            --text-color: #333333; /* Основной цвет текста */
+            --error-color: #b00020; /* Цвет ошибки */
+            --font-family: 'Roboto', sans-serif; /* Шрифт */
+            --border-radius: 12px; /* Радиус скругления */
+            --box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* Тень */
+        }
+        body {
+            font-family: var(--font-family);
+            background-color: var(--background-color);
+            color: var(--text-color);
+            margin: 0;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+        }
+        .container {
+            background-color: var(--surface-color);
+            padding: 2rem;
+            border-radius: var(--border-radius);
+            box-shadow: var(--box-shadow);
+            width: 90%;
+            max-width: 400px;
+            text-align: center;
+        }
+        h1 {
+            font-size: 2rem;
+            margin-bottom: 1.5rem;
+            color: var(--primary-color);
+        }
+        input, button {
+            display: block;
+            width: 100%;
+            padding: 0.75rem;
+            margin-bottom: 1rem;
+            border: 1px solid #ccc;
+            border-radius: var(--border-radius);
+            font-size: 1rem;
+            box-sizing: border-box;
+            transition: border-color 0.3s ease;
+        }
+        input:focus {
+            outline: none;
+            border-color: var(--primary-color);
+        }
+        button {
+            background-color: var(--primary-color);
+            color: white;
+            cursor: pointer;
+            border: none;
+            font-weight: 500;
+            transition: background-color 0.3s ease;
+        }
+        button:hover {
+            background-color: var(--secondary-color);
+        }
+       button:active {
+            opacity: 0.8; /* Немного уменьшаем прозрачность при нажатии */
+        }
+        .error-message {
+            color: var(--error-color);
+            margin-top: 0.5rem;
+        }
+       @media (prefers-color-scheme: dark) {
+            :root {
+                --background-color: #121212;
+                --surface-color: #1e1e1e;
+                --text-color: #ffffff;
+            }
+        }
     </style>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
 </head>
 <body>
+    <div class="container">
+        <h1>Видеоконференция</h1>
+        <form method="post">
+            <input type="text" name="username" placeholder="Логин" required>
+            <input type="password" name="password" placeholder="Пароль" required>
+            <button type="submit" name="action" value="login">Войти</button>
+            <button type="submit" name="action" value="register">Зарегистрироваться</button>
+        </form>
+    </div>
 </body>
 </html>''')
 def dashboard():
     if 'username' not in session:
         return redirect(url_for('index'))
     if request.method == 'POST':
         action = request.form.get('action')
         if action == 'create':
             if token in rooms and len(rooms[token]['users']) < rooms[token]['max_users']:
                 return redirect(url_for('room', token=token))
             return "Комната не найдена или переполнена", 404
     return render_template_string('''<!DOCTYPE html>
+<html lang="ru">
 <head>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Панель управления</title>
     <style>
+        :root {
+            --primary-color: #6200ee;
+            --secondary-color: #3700b3;
+            --background-color: #ffffff;
+            --surface-color: #f5f5f5;
+            --text-color: #333333;
+            --accent-color: #03dac6; /* Цвет акцента (для кнопок, например) */
+            --font-family: 'Roboto', sans-serif;
+            --border-radius: 12px;
+            --box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+        }
+        body {
+            font-family: var(--font-family);
+            background-color: var(--background-color);
+            color: var(--text-color);
+            margin: 0;
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            min-height: 100vh;
+        }
+        .container {
+            background-color: var(--surface-color);
+            padding: 2rem;
+            border-radius: var(--border-radius);
+            box-shadow: var(--box-shadow);
+            width: 90%;
+            max-width: 400px;
+            text-align: center;
+            margin-top: 2rem;
+        }
+        h1 {
+            font-size: 2rem;
+            margin-bottom: 1.5rem;
+            color: var(--primary-color);
+        }
+        input, button {
+            display: block;
+            width: 100%;
+            padding: 0.75rem;
+            margin-bottom: 1rem;
+            border: 1px solid #ccc;
+            border-radius: var(--border-radius);
+            font-size: 1rem;
+            box-sizing: border-box;
+              transition: border-color 0.3s ease;
+        }
+        input:focus {
+            outline: none;
+            border-color: var(--primary-color);
+        }
+        button {
+            background-color: var(--primary-color);
+            color: white;
+            cursor: pointer;
+            border: none;
+            font-weight: 500;
+             transition: background-color 0.3s ease;
+        }
+        button:hover {
+            background-color: var(--secondary-color);
+        }
+         button:active {
+            opacity: 0.8; /* Немного уменьшаем прозрачность при нажатии */
+        }
+        .logout-button {
+            background-color: var(--accent-color); /* Другой цвет для кнопки выхода */
+            margin-top: 1rem;
+             transition: background-color 0.3s ease;
+        }
+       .logout-button:hover {
+            filter: brightness(0.9); /*Затемнение при наведении*/
+        }
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --background-color: #121212;
+                --surface-color: #1e1e1e;
+                --text-color: #ffffff;
+            }
+        }
     </style>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
 </head>
 <body>
+    <div class="container">
+        <h1>Добро пожаловать, {{ session['username'] }}</h1>
+        <form method="post">
+            <button type="submit" name="action" value="create">Создать комнату</button>
+        </form>
+        <form method="post">
+            <input type="text" name="token" placeholder="Введите токен комнаты" required>
+            <button type="submit" name="action" value="join">Войти в комнату</button>
+        </form>
+        <form action="/logout" method="post">
+            <button class="logout-button" type="submit">Выйти</button>
+        </form>
+    </div>
 </body>
 </html>''', session=session)
         return redirect(url_for('index'))
     if token not in rooms:
         return redirect(url_for('dashboard'))
     return render_template_string('''<!DOCTYPE html>
+<html lang="ru">
 <head>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Комната {{ token }}</title>
     <style>
+        :root {
+            --primary-color: #6200ee;
+            --secondary-color: #3700b3;
+            --background-color: #ffffff;
+            --surface-color: #f0f0f0; /* Светлый фон для видео */
+            --text-color: #333333;
+            --font-family: 'Roboto', sans-serif;
+            --border-radius: 12px;
+            --box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+        }
+        body {
+            font-family: var(--font-family);
+            background-color: var(--background-color);
+            color: var(--text-color);
+            margin: 0;
+            padding: 0;
+        }
+        h1 {
+            font-size: 1.8rem;
+            text-align: center;
+            margin: 1rem 0;
+            color: var(--primary-color);
+        }
+        #users {
+            text-align: center;
+            margin-bottom: 1rem;
+            font-size: 1rem;
+            color: var(--secondary-color);
+        }
+        .video-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 1rem;
+            padding: 1rem;
+            background-color: var(--surface-color);
+            border-radius: var(--border-radius);
+        }
+        video {
+            width: 100%;
+            height: auto;
+            background: black;  /* Фон для неотрендеренного видео */
+            border-radius: var(--border-radius);
+            box-shadow: var(--box-shadow);
+            object-fit: cover; /* Важно для правильного отображения */
+            display: block; /* Убирает лишние отступы */
+        }
+         /* Стили для контейнера видео */
+        .video-container {
+            position: relative; /* Для позиционирования элементов внутри */
+            overflow: hidden;    /* Скрываем всё, что выходит за границы */
+            border-radius: var(--border-radius); /* Скругление углов */
+        }
+        /* Индикатор пользователя (имя) */
+        .user-indicator {
+            position: absolute;
+            bottom: 0.5rem;
+            left: 0.5rem;
+            background-color: rgba(0, 0, 0, 0.6); /* Полупрозрачный фон */
+            color: white;
+            padding: 0.2rem 0.5rem;
+            border-radius: 5px;
+            font-size: 0.8rem;
+            z-index: 10; /* Поверх видео */
+        }
+        button {
+            display: block;
+            width: 80%;
+            max-width: 300px;
+            padding: 0.75rem;
+            margin: 1rem auto;
+            background-color: var(--primary-color);
+            color: white;
+            border: none;
+            border-radius: var(--border-radius);
+            cursor: pointer;
+            font-weight: 500;
+            transition: background-color 0.3s ease;
+        }
+         button:hover {
+            background-color: var(--secondary-color);
+        }
+        button:active {
+            opacity: 0.8;
+        }
+        /* Адаптивность */
         @media (max-width: 600px) {
+            .video-grid {
+                grid-template-columns: 1fr; /* Одно видео в ряд на мобильных */
+            }
+             video {
+                max-height: 300px; /* Ограничение по высоте на мобильных */
+            }
         }
+       @media (prefers-color-scheme: dark) {
+            :root {
+                --background-color: #121212;
+                --surface-color: #1e1e1e;
+                --text-color: #ffffff;
+            }
+       }
     </style>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.1/socket.io.js"></script>
 </head>
 <body>
     <h1>Комната: {{ token }}</h1>
     <div class="video-grid" id="video-grid"></div>
     <button onclick="leaveRoom()">Покинуть комнату</button>
     <script>
         const socket = io();
         const token = '{{ token }}';
             const existingVideo = document.querySelector(`video[data-user="${user}"]`);
             if (existingVideo) return;
+            const videoContainer = document.createElement('div'); // Контейнер
+            videoContainer.classList.add('video-container');
             const video = document.createElement('video');
             video.srcObject = stream;
             video.setAttribute('playsinline', '');
             if (muted) video.muted = true;
             video.dataset.user = user;
+             // Добавляем индикатор пользователя
+            const userIndicator = document.createElement('div');
+            userIndicator.classList.add('user-indicator');
+            userIndicator.textContent = user;
+            videoContainer.appendChild(userIndicator);
+            videoContainer.appendChild(video); // Видео внутрь контейнера
+            document.getElementById('video-grid').appendChild(videoContainer); // Добавляем контейнер
+        }
+        // Создание соединения
         function createPeerConnection(user) {
+          if (peers[user]) {
+            return peers[user].peerConnection; // Return existing connection
+          }
+          console.log('Создание RTCPeerConnection для', user);
+          const peerConnection = new RTCPeerConnection(iceConfig);
+          peers[user] = { peerConnection: peerConnection, iceCandidates: [] };
+          localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));
+          peerConnection.ontrack = event => {
+            console.log('Получен поток от', user);
+            addVideoStream(event.streams[0], user);
+          };
+          // Обработка состояния соединения
+          peerConnection.oniceconnectionstatechange = () => {
+            console.log(`ICE connection state changed to ${peerConnection.iceConnectionState} for user ${user}`);
+            if (peerConnection.iceConnectionState === 'failed' || peerConnection.iceConnectionState === 'disconnected') {
+              console.warn(`Connection with ${user} failed or disconnected.`);
+              // Можно добавить логику переподключения или удаления пользователя из UI
+              if(peers[user]){
+                  peers[user].peerConnection.close();
+                  delete peers[user];
+                  const video = document.querySelector(`video[data-user="${user}"]`);
+                  if (video) video.parentElement.remove(); // Удалять вместе с контейнером!
+              }
             }
+          };
+          peerConnection.onicecandidate = event => {
+            if (event.candidate) {
+              console.log('Отправка ICE-кандидата для', user);
+              socket.emit('signal', {
+                token: token,
+                from: username,
+                to: user,
+                signal: { type: 'candidate', candidate: event.candidate }
+              });
+            }
+          };
+          return peerConnection;
         }
+        // Обработка входящих сигналов
         socket.on('signal', data => {
+          if (data.from === username) return;
+          console.log('Получен сигнал от', data.from, ':', data.signal.type);
+          let peerEntry = peers[data.from];
+          if (!peerEntry) {
+            createPeerConnection(data.from);
+            peerEntry = peers[data.from];
+          }
+          let peerConnection = peerEntry.peerConnection;
+          if (data.signal.type === 'offer') {
+            console.log('Обработка предложения от', data.from);
+            peerConnection.setRemoteDescription(new RTCSessionDescription(data.signal))
+              .then(() => peerConnection.createAnswer())
+              .then(answer => peerConnection.setLocalDescription(answer))
+              .then(() => {
+                socket.emit('signal', {
+                  token: token,
+                  from: username,
+                  to: data.from,
+                  signal: peerConnection.localDescription
+                });
+                //Добавление ICE-кандидатов из буффера
+                while (peerEntry.iceCandidates.length > 0) {
+                  const candidate = peerEntry.iceCandidates.shift();
+                  peerConnection.addIceCandidate(new RTCIceCandidate(candidate))
+                    .catch(err => console.error("Error adding ice candidate from buffer", err));
+                }
+              })
+              .catch(err => console.error('Ошибка обработки предложения:', err));
+          } else if (data.signal.type === 'answer') {
+            console.log('Обработка ответа от', data.from);
+            peerConnection.setRemoteDescription(new RTCSessionDescription(data.signal))
+              .then(() => {
+                //Добавление ICE-кандидатов из буффера
+                while (peerEntry.iceCandidates.length > 0) {
+                  const candidate = peerEntry.iceCandidates.shift();
+                  peerConnection.addIceCandidate(new RTCIceCandidate(candidate))
+                    .catch(err => console.error("Error adding ice candidate from buffer", err));
                 }
+              })
+              .catch(err => console.error('Ошибка установки ответа:', err));
+          } else if (data.signal.type === 'candidate') {
+            console.log('Обработка ICE-кандидата от', data.from);
+            if (peerConnection.remoteDescription) {
+                peerConnection.addIceCandidate(new RTCIceCandidate(data.signal.candidate))
+                    .catch(err => console.error('Ошибка добавления ICE-кандидата:', err));
+            } else {
+              // Если remote description еще не установлен, добавляем в буфер
+              peerEntry.iceCandidates.push(data.signal.candidate);
+              console.log("Ice candidate buffered for", data.from)
             }
+          }
         });
         socket.on('user_joined', data => {
             console.log('Пользователь', data.username, 'присоединился');
             document.getElementById('users').innerText = 'Пользователи: ' + data.users.join(', ');
+             if (data.username !== username) {
                 const peerConnection = createPeerConnection(data.username);
                 // Создание предложения (offer), только если мы инициатор
                 peerConnection.createOffer()
             }
         });
         socket.on('user_left', data => {
+          console.log('Пользователь', data.username, 'покинул комнату');
+          document.getElementById('users').innerText = 'Пользователи: ' + data.users.join(', ');
+          if (peers[data.username]) {
+            peers[data.username].peerConnection.close();
+            delete peers[data.username];
+            const video = document.querySelector(`video[data-user="${data.username}"]`);
+            if (video) video.parentElement.remove();  // Удаляем вместе с контейнером!
+          }
         });
         socket.on('init_users', data => {
             console.log('Инициализация пользователей:', data.users);
             data.users.forEach(user => {
+                 if (user !== username) {
                    createPeerConnection(user);  // Создаем RTCPeerConnection для всех, *кроме себя*
                 }
             });
         });
         function leaveRoom() {
             socket.emit('leave', { token: token, username: username });
+            if (localStream) { // Проверка, что localStream существует
+              localStream.getTracks().forEach(track => track.stop());
+            }
             for (let user in peers) {
                 peers[user].peerConnection.close();
             }
             window.location.href = '/dashboard';
         }
     </script>
 </body>
 </html>''', token=token, session=session)
 # WebSocket события
 @socketio.on('join')
 def handle_join(data):
     token = data['token']
     username = data['username']
     if token in rooms and len(rooms[token]['users']) < rooms[token]['max_users']:
         join_room(token)
         if username not in rooms[token]['users']:
             save_json(ROOMS_DB, rooms)
         emit('user_joined', {'username': username, 'users': rooms[token]['users']}, room=token)
         emit('init_users', {'users': rooms[token]['users']}, to=request.sid)
+    else:
+        # Отправляем сообщение об ошибке, если комната заполнена
+        emit('error_message', {'message': 'Комната переполнена'}, to=request.sid)
 @socketio.on('leave')
 def handle_leave(data):
     token = data['token']
     username = data['username']
     if token in rooms and username in rooms[token]['users']:
         leave_room(token)
         rooms[token]['users'].remove(username)
 @socketio.on('signal')
 def handle_signal(data):
     emit('signal', data, room=data['token'], skip_sid=request.sid)
 if __name__ == '__main__':