JQuery POST дважды - PullRequest
Новая
       60

JQuery POST дважды

2 голосов
/ 31 мая 2019

Может, кто-нибудь объяснит мне, почему он отправляет запрос POST дважды? NB. Перед отправкой второго запроса задержка составляет примерно 2 минуты (точно такие же данные).

Код использует GetUserMedia () для отображения канала веб-камеры пользователя и немедленно копирует снимок на холст. Затем он получает URL-адрес данных, прежде чем использовать jquery для отправки его на сервер. Проблема, с которой я сталкиваюсь, заключается в том, что второй почтовый запрос выполняется с теми же данными примерно через две минуты после первого. Я не могу выяснить причину проблемы, пожалуйста, помогите! 

// The width and height of the captured photo. We will set the
// width to the value defined here, but the height will be
// calculated based on the aspect ratio of the input stream.
var width = 320;    // We will scale the photo width to this
var height = 0;     // This will be computed based on the input stream
// |streaming| indicates whether or not we're currently streaming
// video from the camera. Obviously, we start at false.
var streaming = false;
// The various HTML elements we need to configure or control. These
// will be set by the startup() function.
var video = null;
var canvas = null;
var track = null;
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var photo = document.getElementById('photo');
var kill = null;
// get feed
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
  .then(function (stream) {
    video.srcObject = stream;
    track = stream.getTracks()[0];  // if only one media track
    video.play();
  })
  .catch(function (err) {
    console.log("An error occurred: " + err);
  });

video.addEventListener('canplay', function (ev) {    // when recieving stream

  if (kill === null) {

    if (!streaming) {
      height = video.videoHeight / (video.videoWidth / width);
      if (isNaN(height)) {    // // Firefox currently has a bug
        height = width / (4 / 3);
      }
      video.setAttribute('width', width);    // make sure video and canvas html is correct size
      video.setAttribute('height', height);
      canvas.setAttribute('width', width);
      canvas.setAttribute('height', height);
      streaming = true;
      ev.preventDefault();
      var context = canvas.getContext('2d');
      if (width && height) {
        canvas.width = width;
        canvas.height = height;
        context.drawImage(video, 0, 0, width, height);
        //  !!!!!!!!!!!!!!!!!!!
        $.post('/recv', {
          img: canvas.toDataURL()
        });
        track.stop();
        kill = 1;
        ev.target.removeEventListener(ev.type, arguments.callee);
        return false;
        //  !!!!!!!!!!!!!!!!!!!
      }
    } else {
      return;
    }
  }
}, false);
<!DOCTYPE html>
<html>

<head>
    <title>webrtc snapper</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>

<body>
    <div class="camera">
        <video id="video"></video>
    </div>
    <canvas id="canvas">
    </canvas>
    <div class="output">
        <img id="photo">
    </div>
    <script src="capture.js">
    </script>
</body>

</html>

Ответы [ 2 ]

0 голосов
/ 05 июня 2019

Я решил проблему, попросив сервер ответить 200 OK,

после получения POST.Кажется, я забыл добавить это, и это заставляло JQUERY делать репосты (или что-то подобное, потому что секцию post express вызывали дважды.)

Спасибо за ваши ответы.

0 голосов
/ 04 июня 2019

Событие canplay является сложным, оно может воспроизводиться более одного раза, например, при изменении текущего времени браузер должен загрузить больше данных из кэша или сети.Это может вызвать событие canplay.

Чтобы решить его, есть два пути.

One - как сказано выше, ответ на вопрос - использовать флаг.Я не поддерживаю это, поскольку смешивание с флагами может усложнить ваш код и усложнить его чтение и сопровождение.

Второй - это отмена подписки на событие: 

video.bind('canplay', function (ev) {
   // your logic ....
   video.unbind('canplay')
}

Начиная с jquery 3.0 и далее : 

 video.on('canplay', function (ev) {
       // your logic ....
       video.off('canplay')
    }

Приведенный выше код чище, его легче читать и обслуживать.

В конце концов,вам решать, что лучше всего подходит вам здесь.

...