Create indexRealTime.html

indexRealTime.html

@@ -0,0 +1,133 @@
+<script>
+  const video = document.getElementById('video');
+  const resultImg = document.getElementById('resultImg');
+  const jsonOut = document.getElementById('jsonOut');
+  const startBtn = document.getElementById('startBtn');
+  const stopBtn = document.getElementById('stopBtn');
+  const cameraSelect = document.getElementById('cameraSelect');
+  const confSlider = document.getElementById('confSlider');
+  const iouSlider = document.getElementById('iouSlider');
+  const confVal = document.getElementById('confVal');
+  const iouVal = document.getElementById('iouVal');
+  const modeSelect = document.getElementById('modeSelect');
+
+  let stream = null;
+  let active = false;
+  let currentDeviceId = null;
+  let busy = false;       // сервер занят
+  let pendingFrame = null; // последний кадр в буфере
+
+  confSlider.oninput = () => confVal.textContent = confSlider.value;
+  iouSlider.oninput = () => iouVal.textContent = iouSlider.value;
+
+  async function enumerateCameras() {
+    const devices = await navigator.mediaDevices.enumerateDevices();
+    cameraSelect.innerHTML = '';
+    const cams = devices.filter(d => d.kind === 'videoinput');
+    cams.forEach((cam, i) => {
+      const opt = document.createElement('option');
+      opt.value = cam.deviceId || i;
+      opt.textContent = cam.label || `Камера ${i+1}`;
+      cameraSelect.appendChild(opt);
+    });
+    if (cams.length > 0) currentDeviceId = cams[0].deviceId;
+  }
+
+  async function startCamera(deviceId) {
+    if (stream) stopCamera();
+    const constraints = {
+      video: {
+        deviceId: deviceId ? { exact: deviceId } : undefined,
+        facingMode: 'environment',
+        width: { ideal: 720 },
+        height: { ideal: 720 }
+      },
+      audio: false
+    };
+    stream = await navigator.mediaDevices.getUserMedia(constraints);
+    video.srcObject = stream;
+    await video.play();
+    requestAnimationFrame(captureLoop);
+  }
+
+  function stopCamera() {
+    if (stream) {
+      stream.getTracks().forEach(t => t.stop());
+      stream = null;
+    }
+  }
+
+  cameraSelect.onchange = async () => {
+    currentDeviceId = cameraSelect.value;
+    await startCamera(currentDeviceId);
+  };
+
+  function captureLoop() {
+    if (!active || !stream) return;
+
+    const canvas = document.createElement('canvas');
+    const w = Math.min(720, video.videoWidth || 640);
+    const h = Math.floor(w * (video.videoHeight / video.videoWidth));
+    canvas.width = w;
+    canvas.height = h;
+    const ctx = canvas.getContext('2d');
+    ctx.drawImage(video, 0, 0, w, h);
+
+    canvas.toBlob(blob => {
+      pendingFrame = blob; // сохраняем последний кадр
+      if (!busy) sendFrame(); // если сервер свободен — отправляем
+    }, 'image/jpeg', 0.9);
+
+    requestAnimationFrame(captureLoop);
+  }
+
+  async function sendFrame() {
+    if (!pendingFrame) return;
+    busy = true;
+
+    const formData = new FormData();
+    formData.append('file', pendingFrame, 'frame.jpg');
+    formData.append('conf', confSlider.value);
+    formData.append('iou', iouSlider.value);
+    const returnImage = (modeSelect.value === 'image') ? 1 : 0;
+    formData.append('return_image', returnImage.toString());
+
+    pendingFrame = null; // очищаем буфер
+
+    try {
+      const resp = await fetch('/predict', { method: 'POST', body: formData });
+      if (returnImage === 1) {
+        const arrBuf = await resp.arrayBuffer();
+        const blobRes = new Blob([arrBuf], { type: 'image/jpeg' });
+        resultImg.src = URL.createObjectURL(blobRes);
+        resultImg.style.display = 'block';
+        jsonOut.style.display = 'none';
+      } else {
+        const data = await resp.json();
+        jsonOut.textContent = JSON.stringify(data, null, 2);
+        jsonOut.style.display = 'block';
+        resultImg.style.display = 'none';
+      }
+    } catch (e) {
+      console.error("Ошибка запроса:", e);
+    }
+
+    busy = false;
+    if (pendingFrame) sendFrame(); // если уже есть новый кадр — сразу отправляем
+  }
+
+  startBtn.onclick = async () => {
+    await enumerateCameras();
+    await startCamera(currentDeviceId);
+    active = true;
+    startBtn.disabled = true;
+    stopBtn.disabled = false;
+  };
+
+  stopBtn.onclick = () => {
+    active = false;
+    startBtn.disabled = false;
+    stopBtn.disabled = true;
+    stopCamera();
+  };
+</script>