Update templates/video_app.html

templates/video_app.html

@@ -335,209 +335,178 @@
 
 
 <script>
-// Three.js setup
-const scene = new THREE.Scene();
-scene.background = new THREE.Color(0xf0f4f8);
-const aspect = 4 / 3;
-const camera = new THREE.PerspectiveCamera(60, aspect, 0.1, 1000);
-const renderer = new THREE.WebGLRenderer({ antialias: true });
-const modelContainer = document.getElementById('model-container');
-renderer.setSize(modelContainer.clientWidth, modelContainer.clientWidth / aspect);
-modelContainer.appendChild(renderer.domElement);
-
-camera.position.set(0, 0, 1.5);
-camera.lookAt(0, 0, 0);
-
-// Add lighting
-const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
-scene.add(ambientLight);
-const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
-directionalLight.position.set(1, 1, 1);
-scene.add(directionalLight);
-
-// Create spheres for keypoints
-const spheres = [];
-for (let i = 0; i < 33; i++) {
-    const geometry = new THREE.SphereGeometry(0.015, 32, 32);
-    const material = new THREE.MeshPhongMaterial({
-        color: 0x3498db,
-        shininess: 100,
-        specular: 0x111111
-    });
-    const sphere = new THREE.Mesh(geometry, material);
-    scene.add(sphere);
-    spheres.push(sphere);
-}
-
-// Function to create cylinders
-const cylinders = [];
-function createCylinder(point1, point2) {
-    const direction = new THREE.Vector3().subVectors(point2, point1);
-    const cylinder = new THREE.Mesh(
-        new THREE.CylinderGeometry(0.007, 0.007, direction.length(), 8, 1),
-        new THREE.MeshPhongMaterial({
-            color: 0x2c3e50,
+    // 连接到Socket.IO服务器
+    const socket = io();
+
+    // Three.js设置
+    const scene = new THREE.Scene();
+    scene.background = new THREE.Color(0xf0f4f8);
+    const aspect = 4 / 3;
+    const camera = new THREE.PerspectiveCamera(60, aspect, 0.1, 1000);
+    const renderer = new THREE.WebGLRenderer({ antialias: true });
+    const modelContainer = document.getElementById('model-container');
+    renderer.setSize(modelContainer.clientWidth, modelContainer.clientWidth / aspect);
+    modelContainer.appendChild(renderer.domElement);
+
+    camera.position.set(0, 0, 1.5);
+    camera.lookAt(0, 0, 0);
+
+    // 添加灯光
+    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+    scene.add(ambientLight);
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
+    directionalLight.position.set(1, 1, 1);
+    scene.add(directionalLight);
+
+    // 创建用于标记关键点的球体
+    const spheres = [];
+    for (let i = 0; i < 33; i++) {
+        const geometry = new THREE.SphereGeometry(0.015, 32, 32);
+        const material = new THREE.MeshPhongMaterial({
+            color: 0x3498db,
             shininess: 100,
             specular: 0x111111
-        })
-    );
-    cylinder.position.copy(point1);
-    cylinder.position.addScaledVector(direction, 0.5);
-    cylinder.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), direction.normalize());
-    scene.add(cylinder);
-    return cylinder;
-}
-
-// Initialize charts
-const speedChartCtx = document.getElementById('speedChart').getContext('2d');
-const accelerationChartCtx = document.getElementById('accelerationChart').getContext('2d');
-const speedChart = new Chart(speedChartCtx, {
-    type: 'line',
-    data: {
-        labels: [],
-        datasets: [{
-            label: 'Speed',
-            data: [],
-            borderColor: 'rgba(75, 192, 192, 1)',
-            borderWidth: 1,
-            fill: false
-        }]
-    },
-    options: {
-        scales: {
-            y: { beginAtZero: true }
-        },
-        animation: false
+        });
+        const sphere = new THREE.Mesh(geometry, material);
+        scene.add(sphere);
+        spheres.push(sphere);
     }
-});
-const accelerationChart = new Chart(accelerationChartCtx, {
-    type: 'line',
-    data: {
-        labels: [],
-        datasets: [{
-            label: 'Acceleration',
-            data: [],
-            borderColor: 'rgba(255, 99, 132, 1)',
-            borderWidth: 1,
-            fill: false
-        }]
-    },
-    options: {
-        scales: {
-            y: { beginAtZero: true }
-        },
-        animation: false
+
+    // 创建圆柱体的函数
+    const cylinders = [];
+    function createCylinder(point1, point2) {
+        const direction = new THREE.Vector3().subVectors(point2, point1);
+        const cylinder = new THREE.Mesh(
+            new THREE.CylinderGeometry(0.007, 0.007, direction.length(), 8, 1),
+            new THREE.MeshPhongMaterial({
+                color: 0x2c3e50,
+                shininess: 100,
+                specular: 0x111111
+            })
+        );
+        cylinder.position.copy(point1);
+        cylinder.position.addScaledVector(direction, 0.5);
+        cylinder.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), direction.normalize());
+        scene.add(cylinder);
+        return cylinder;
     }
-});
 
-// Global variables
-let allResults = [];
-let currentFrame = 0;
-let fps = 30;
-let isPlaying = false;
-let videoElement;
-
-// Function to update 3D model
-function update3DModel(landmarks) {
-    landmarks.forEach((coord, index) => {
-        spheres[index].position.set((coord[0] - 0.5) * 2, -(coord[1] - 0.5) * 2, -coord[2] * 0.5);
+    // 初始化图表
+    const speedChartCtx = document.getElementById('speedChart').getContext('2d');
+    const accelerationChartCtx = document.getElementById('accelerationChart').getContext('2d');
+    const speedChart = new Chart(speedChartCtx, {
+        type: 'line',
+        data: {
+            labels: [],
+            datasets: [{
+                label: 'Speed',
+                data: [],
+                borderColor: 'rgba(75, 192, 192, 1)',
+                borderWidth: 1,
+                fill: false
+            }]
+        },
+        options: {
+            scales: {
+                y: { beginAtZero: true }
+            }
+        }
     });
-
-    // Clear existing cylinders
-    cylinders.forEach(cylinder => scene.remove(cylinder));
-    cylinders.length = 0;
-
-    // Create new cylinders
-    const connections = [
-        // Face
-        [0, 1], [1, 4], [4, 7], [7, 8], [8, 5], [5, 2], [2, 0],
-        [0, 9], [9, 10], [0, 10],
-        // Arms
-        [11, 13], [13, 15], [15, 17], [15, 19], [15, 21],
-        [12, 14], [14, 16], [16, 18], [16, 20], [16, 22],
-        // Body
-        [11, 12], [11, 23], [12, 24], [23, 24],
-        // Legs
-        [23, 25], [25, 27], [27, 29],
-        [24, 26], [26, 28], [28, 30], [28, 32]
-    ];
-
-    connections.forEach(([i, j]) => {
-        cylinders.push(createCylinder(spheres[i].position, spheres[j].position));
+    const accelerationChart = new Chart(accelerationChartCtx, {
+        type: 'line',
+        data: {
+            labels: [],
+            datasets: [{
+                label: 'Acceleration',
+                data: [],
+                borderColor: 'rgba(255, 99, 132, 1)',
+                borderWidth: 1,
+                fill: false
+            }]
+        },
+        options: {
+            scales: {
+                y: { beginAtZero: true }
+            }
+        }
     });
-}
 
-// Function to update charts
-function updateCharts(frame) {
-    const frameData = allResults[frame];
-    if (frameData) {
-        speedChart.data.labels.push(frame);
-        speedChart.data.datasets[0].data.push(frameData.velocities.reduce((a, b) => a + b, 0) / frameData.velocities.length);
-        
-        accelerationChart.data.labels.push(frame);
-        accelerationChart.data.datasets[0].data.push(frameData.accelerations.reduce((a, b) => a + b, 0) / frameData.accelerations.length);
-        
-        // Keep only the last 100 data points
-        if (speedChart.data.labels.length > 100) {
-            speedChart.data.labels.shift();
-            speedChart.data.datasets[0].data.shift();
-        }
-        if (accelerationChart.data.labels.length > 100) {
-            accelerationChart.data.labels.shift();
-            accelerationChart.data.datasets[0].data.shift();
-        }
-        
-        speedChart.update();
-        accelerationChart.update();
+    // 更新图表的函数
+    function updateChart(chart, newData) {
+        const currentTime = new Date().toLocaleTimeString();
+        chart.data.labels.push(currentTime);
+        chart.data.datasets.forEach((dataset) => {
+            dataset.data.push(newData.reduce((a, b) => a + b, 0) / newData.length);
+        });
+        chart.update();
     }
-}
 
-// Function to animate the scene
-function animate() {
-    requestAnimationFrame(animate);
-    renderer.render(scene, camera);
-    
-    if (isPlaying && allResults.length > 0) {
-        const frameData = allResults[currentFrame];
-        if (frameData) {
-            update3DModel(frameData.landmarks);
-            updateCharts(currentFrame);
-            currentFrame = (currentFrame + 1) % allResults.length;
-            if (videoElement) {
-                videoElement.currentTime = currentFrame / fps;
-            }
+    // 监听从服务器发送的pose_data事件
+    socket.on('pose_data', function(data) {
+        // 更新3D模型
+        const landmarks = data.landmarks;
+        landmarks.forEach((coord, index) => {
+            spheres[index].position.set((coord[0] - 0.5) * 2, -(coord[1] - 0.5) * 2, -coord[2] * 0.5);
+        });
+
+        // 清除现有的圆柱体
+        cylinders.forEach(cylinder => scene.remove(cylinder));
+        cylinders.length = 0;
+
+        // 创建新的圆柱体
+        const connections = [
+            // Face
+            [0, 1], [1, 4], [4, 7], [7, 8], [8, 5], [5, 2], [2, 0],
+            [0, 9], [9, 10], [0, 10],
+            // Arms
+            [11, 13], [13, 15], [15, 17], [15, 19], [15, 21],
+            [12, 14], [14, 16], [16, 18], [16, 20], [16, 22],
+            // Body
+            [11, 12], [11, 23], [12, 24], [23, 24],
+            // Legs
+            [23, 25], [25, 27], [27, 29],
+            [24, 26], [26, 28], [28, 30], [28, 32]
+        ];
+
+        connections.forEach(([i, j]) => {
+            cylinders.push(createCylinder(spheres[i].position, spheres[j].position));
+        });
+
+        // 更新速度和加速度图表
+        if (data.velocities) {
+            updateChart(speedChart, data.velocities);
         }
-    }
-}
+        if (data.accelerations) {
+            updateChart(accelerationChart, data.accelerations);
+        }
+    });
 
-// Start animation
-animate();
+    function animate() {
+        requestAnimationFrame(animate);
+        renderer.render(scene, camera);
+    }
+    animate();
 
-// Function to show messages
-function showMessage(message) {
+   function showMessage(message) {
     const messageBox = document.getElementById('message-box');
     const messageText = document.getElementById('message-text');
     messageText.textContent = message;
     messageBox.style.display = 'block';
 
+    // 2秒后自动隐藏
     setTimeout(() => {
         messageBox.style.display = 'none';
     }, 2000);
 }
 
-// Function to show/hide loading indicator
-function showLoadingIndicator(isLoading) {
-    const loadingIndicator = document.getElementById('loading-indicator');
-    loadingIndicator.style.display = isLoading ? 'block' : 'none';
-}
-
-// Video upload handling
+// 视频上传处理
 document.getElementById('video-upload').addEventListener('change', function(e) {
     const file = e.target.files[0];
     if (file) {
         const formData = new FormData();
         formData.append('video', file);
 
+        // 显示加载指示器
         showLoadingIndicator(true);
 
         fetch('/upload_video', {
@@ -545,119 +514,89 @@ document.getElementById('video-upload').addEventListener('change', function(e) {
             body: formData
         }).then(response => response.json())
         .then(data => {
-            showLoadingIndicator(false);
+            showLoadingIndicator(false); // 隐藏加载指示器
             if (data.success) {
                 showMessage(data.message);
-                loadResults();
+                document.getElementById('video-feed').src = "{{ url_for('video_feed') }}?" + new Date().getTime();
             } else {
                 showMessage('Error uploading video');
             }
         }).catch(error => {
-            showLoadingIndicator(false);
+            showLoadingIndicator(false); // 隐藏加载指示器
             showMessage('Upload failed: ' + error.message);
         });
     }
 });
 
-// Function to load results
-function loadResults() {
-    fetch('/get_results')
-        .then(response => response.json())
-        .then(data => {
-            allResults = data.results;
-            fps = data.fps;
-            currentFrame = 0;
-            
-            // Reset charts
-            speedChart.data.labels = [];
-            speedChart.data.datasets[0].data = [];
-            accelerationChart.data.labels = [];
-            accelerationChart.data.datasets[0].data = [];
-            
-            // Load video
-            videoElement = document.createElement('video');
-            videoElement.src = '/uploads/temp_video.mp4';
-            videoElement.load();
-            
-            const videoContainer = document.getElementById('video-container');
-            videoContainer.innerHTML = '';
-            videoContainer.appendChild(videoElement);
-            
-            // Add play/pause button
-            const playPauseBtn = document.createElement('button');
-            playPauseBtn.textContent = 'Play';
-            playPauseBtn.onclick = togglePlayPause;
-            videoContainer.appendChild(playPauseBtn);
-            
-            showMessage('Video and results loaded successfully');
-        })
-        .catch(error => {
-            showMessage('Error loading results: ' + error.message);
-        });
+// 切换到相机模式
+document.getElementById('camera-switch').addEventListener('click', function() {
+    showLoadingIndicator(true); // 显示加载指示器
+
+    fetch('/switch_to_camera', {
+        method: 'POST'
+    }).then(response => response.json())
+    .then(data => {
+        showLoadingIndicator(false); // 隐藏加载指示器
+        if (data.success) {
+            showMessage(data.message);
+            document.getElementById('video-feed').src = "{{ url_for('video_feed') }}?" + new Date().getTime();
+        } else {
+            showMessage('Error switching to camera');
+        }
+    }).catch(error => {
+        showLoadingIndicator(false); // 隐藏加载指示器
+        showMessage('Switch failed: ' + error.message);
+    });
+});
+function showLoadingIndicator(isLoading) {
+    const loadingIndicator = document.getElementById('loading-indicator');
+    loadingIndicator.style.display = isLoading ? 'block' : 'none';
 }
 
-// Function to toggle play/pause
-function togglePlayPause() {
-    isPlaying = !isPlaying;
-    const playPauseBtn = document.querySelector('#video-container button');
-    playPauseBtn.textContent = isPlaying ? 'Pause' : 'Play';
-    if (isPlaying) {
-        videoElement.play();
-    } else {
-        videoElement.pause();
-    }
-}
 
-// Sync video with 3D model and charts
-videoElement.addEventListener('timeupdate', function() {
-    currentFrame = Math.floor(videoElement.currentTime * fps);
-    const frameData = allResults[currentFrame];
-    if (frameData) {
-        update3DModel(frameData.landmarks);
-        updateCharts(currentFrame);
-    }
-});
+    // 缩放处理
+    document.getElementById('video-scale').addEventListener('input', function(e) {
+        document.getElementById('video-feed').style.transform = `scale(${e.target.value})`;
+    });
 
-// Slider for video and 3D model scale
-document.getElementById('video-scale').addEventListener('input', function(e) {
-    videoElement.style.transform = `scale(${e.target.value})`;
-});
+    document.getElementById('model-scale').addEventListener('input', function(e) {
+        const newWidth = modelContainer.clientWidth * e.target.value;
+        const newHeight = newWidth / aspect;
+        renderer.setSize(newWidth, newHeight);
+    });
 
-document.getElementById('model-scale').addEventListener('input', function(e) {
-    const newWidth = modelContainer.clientWidth * e.target.value;
-    const newHeight = newWidth / aspect;
-    renderer.setSize(newWidth, newHeight);
-});
+    // 窗口大小调整处理
+    window.addEventListener('resize', function() {
+        const width = modelContainer.clientWidth;
+        const height = width / aspect;
+        camera.aspect = aspect;
+        camera.updateProjectionMatrix();
+        renderer.setSize(width, height);
+    });
 
-// Window resize handling
-window.addEventListener('resize', function() {
-    const width = modelContainer.clientWidth;
-    const height = width / aspect;
-    camera.aspect = aspect;
-    camera.updateProjectionMatrix();
-    renderer.setSize(width, height);
+   navigator.mediaDevices.getUserMedia({
+    video: {
+        facingMode: 'user',
+        width: { ideal: 640 },
+        height: { ideal: 480 },
+        frameRate: { ideal: 15 }
+    }
+})
+.then(stream => {
+    const video = document.createElement('video');
+    video.srcObject = stream;
+    video.play();
+    const videoFeed = document.getElementById('video-feed');
+    videoFeed.srcObject = stream;
+    videoFeed.play();
+})
+.catch(error => {
+    console.error('Error accessing camera: ', error);
 });
 
-// Initialize the application
-document.addEventListener('DOMContentLoaded', function() {
-    // Check if there's a previously uploaded video
-    fetch('/get_results')
-        .then(response => {
-            if (response.ok) {
-                return response.json();
-            } else {
-                throw new Error('No previous results found');
-            }
-        })
-        .then(data => {
-            allResults = data.results;
-            fps = data.fps;
-            loadResults();
-        })
-        .catch(error => {
-            console.log('No previous video found. Please upload a new video.');
-        });
-});
+
+
 </script>
+
 </body>
 </html>