File size: 2,540 Bytes
d12995f
 
a449ecd
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
c3d634f
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!-- Проверка работы сервиса -->
<!-- indexIsServerWorks.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>GrechnikNet — Test</title>
  <style>
    body { background:#111; color:#eee; font-family:sans-serif; text-align:center; }
    video, img { width: 480px; border:1px solid #333; border-radius:8px; margin:10px; }
    button { padding:10px 16px; border:none; border-radius:6px; background:#3a6df0; color:#fff; cursor:pointer; }
  </style>
</head>
<body>
  <h2>GrechnikNet — Test API</h2>
  <p>Нажми кнопку, чтобы сделать кадр и отправить на сервер</p>

  <video id="video" autoplay playsinline></video><br>
  <button id="snapBtn">Сделать кадр</button><br>
  <img id="resultImg" alt="Результат появится здесь">

  <script>
    const video = document.getElementById('video');
    const snapBtn = document.getElementById('snapBtn');
    const resultImg = document.getElementById('resultImg');

    // Запрашиваем доступ к камере
    navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment', width: 480 }, audio: false })
      .then(stream => { video.srcObject = stream; })
      .catch(err => { alert("Ошибка доступа к камере: " + err); });

    snapBtn.onclick = async () => {
      // Снимаем кадр в canvas
      const canvas = document.createElement('canvas');
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(video, 0, 0);

      // Конвертим в Blob
      const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/jpeg', 0.85));

      // Отправляем на сервер
      const formData = new FormData();
      formData.append('file', blob, 'frame.jpg');
      formData.append('conf', '0.25');
      formData.append('iou', '0.45');
      formData.append('return_image', '1');

      try {
        const resp = await fetch('/predict', { method: 'POST', body: formData });
        if (!resp.ok) {
          const text = await resp.text();
          alert("Ошибка сервера: " + text);
          return;
        }
        const arrBuf = await resp.arrayBuffer();
        const blobRes = new Blob([arrBuf], { type: 'image/jpeg' });
        resultImg.src = URL.createObjectURL(blobRes);
      } catch (e) {
        alert("Ошибка запроса: " + e);
      }
    };
  </script>
</body>
</html>