sd

templates/create_room.html

@@ -412,8 +412,9 @@
                         // Show room preview
                         previewDiv.style.display = 'block';
                         document.getElementById('previewId').textContent = result.room.id;
+                        const wsProto = window.location.protocol === 'https:' ? 'wss' : 'ws';
                         document.getElementById('previewWsUrl').textContent = 
-                            `ws://${window.location.hostname}:{{ server_port }}/ws/client/${result.room.id}/${result.room.password}`;
+                            `${wsProto}://${window.location.hostname}:{{ server_port }}/ws/client/${result.room.id}/${result.room.password}`;
                         
                         // Clear form
                         this.reset();

templates/room.html

@@ -422,7 +422,7 @@
                 <div class="connection-info">
                     <h4>Client Connection Information</h4>
                     <p>Clients can connect to this room using:</p>
-                    <p><strong>WebSocket URL:</strong> <code>ws://{{ server_host }}:{{ server_port }}/ws/client/{{ room.id }}/{{ room.password }}</code></p>
+                    <p><strong>WebSocket URL:</strong> <code>{{ 'wss' if ssl_enabled else 'ws' }}://{{ server_host }}:{{ server_port }}/ws/client/{{ room.id }}/{{ room.password }}</code></p>
                     <p><strong>Room ID:</strong> <code>{{ room.id }}</code></p>
                     <p><strong>Password:</strong> <code>{{ room.password }}</code></p>
                 </div>

templates/stream.html

@@ -350,6 +350,9 @@
         <div class="main-content">
             <!-- Video Container -->
             <div class="video-container">
+                <!-- Canvas для отображения видеокадров -->
+                <canvas id="videoCanvas" style="width: 100%; height: auto; display: none; background: #000;"></canvas>
+                
                 <div class="video-placeholder" id="videoPlaceholder">
                     <i class="fas fa-video"></i>
                     <h3>Waiting for Video Stream</h3>
@@ -481,7 +484,8 @@
                     return;
                 }
                 
-                const wsUrl = `ws://${window.location.hostname}:{{ server_port }}/ws/admin/${sessionId}`;
+                const wsProto = window.location.protocol === 'https:' ? 'wss' : 'ws';
+                const wsUrl = `${wsProto}://${window.location.hostname}:{{ server_port }}/ws/admin/${sessionId}`;
                 
                 try {
                     ws = new WebSocket(wsUrl);
@@ -497,10 +501,17 @@
                     
                     ws.onmessage = function(event) {
                         try {
-                            const data = JSON.parse(event.data);
-                            handleWebSocketMessage(data);
+                            // Проверяем, это бинарные данные (видеокадр) или текст (JSON)
+                            if (event.data instanceof Blob) {
+                                // Это видеокадр - отображаем на canvas
+                                handleVideoFrame(event.data);
+                            } else if (typeof event.data === 'string') {
+                                // Это текстовое сообщение JSON
+                                const data = JSON.parse(event.data);
+                                handleWebSocketMessage(data);
+                            }
                         } catch (error) {
-                            console.error('Error parsing WebSocket message:', error);
+                            console.error('Error processing WebSocket message:', error);
                         }
                     };
                     
@@ -659,6 +670,39 @@
                 }
             }
             
+            // Handle video frame from admin WebSocket
+            function handleVideoFrame(blob) {
+                const canvas = document.getElementById('videoCanvas');
+                const placeholder = document.getElementById('videoPlaceholder');
+                
+                // Show canvas, hide placeholder
+                if (canvas.style.display === 'none') {
+                    canvas.style.display = 'block';
+                    placeholder.style.display = 'none';
+                }
+                
+                // Create image from blob and draw on canvas
+                const img = new Image();
+                img.onload = function() {
+                    const ctx = canvas.getContext('2d');
+                    // Set canvas size to match image
+                    canvas.width = img.width;
+                    canvas.height = img.height;
+                    // Draw image
+                    ctx.drawImage(img, 0, 0);
+                    // Revoke the object URL to free memory
+                    URL.revokeObjectURL(img.src);
+                };
+                
+                img.onerror = function() {
+                    console.error('Failed to load image from blob');
+                    URL.revokeObjectURL(img.src);
+                };
+                
+                // Create object URL from blob and load as image
+                img.src = URL.createObjectURL(blob);
+            }
+            
             // Initialize sliders
             function initializeSliders() {
                 // Quality slider