jquery POST 两次

Question

有人能告诉我为什么要提交两次 POST 请求吗？注意：在发送第二个请求之前有大约 2 分钟的延迟（完全相同的数据）。

该代码使用 GetUserMedia() 显示用户网络摄像头源，并立即将快照复制到 canvas。然后它获取数据 url，然后使用 jquery 到 POST 将其发送到服务器。我遇到的问题是第二个 post 请求在第一个请求后大约两分钟使用相同的数据执行。我一辈子都无法找出问题的原因 - 请帮忙！

// 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>

Answer 1

canplay事件是一个棘手的事件，它可以播放多次，例如，当当前时间更改时，浏览器需要从缓存或网络加载更多数据。这样可以触发canplay事件。

为了解决它，有两种方法。

一个 - 正如我上面的答案所说，是使用一个标志。我不支持这一点，因为与标志混合会使您的代码复杂化并使其难以阅读和维护。

其次 - 取消订阅活动：

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

从 jquery 3.0 开始 :

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

上面的代码更清晰，更易于阅读和维护。

最后，您可以自行判断什么最适合您的需求。

Answer 2

我通过让服务器响应 200 OK 解决了这个问题，

收到 POST 后。看来我忘了添加这个，它导致 JQUERY 重新 post （或类似的东西，因为 express 的 post 部分被调用了两次。）

感谢您的回复。

jquery POST 两次

jquery POST twice

javascript

jquery

post

getusermedia

我通过让服务器响应 200 OK 解决了这个问题，