【问题标题】：jquery POST twicejquery POST 两次
【发布时间】：2019-05-31 19:26:12
【问题描述】：

请有人告诉我为什么要提交两次 POST 请求？注意：在发送第二个请求之前大约有 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>

【问题讨论】：

在完成运行getUserMedia() 函数之前，您可能需要在设置监听器时将Promise 添加到函数中。因此，您的侦听器函数在执行完getUserMedia() 后会一次又一次地运行。
感谢您的评论。请您指定建议的更改，因为我不太确定您的意思。在将事件侦听器添加到“视频”之前，GUM api 调用已完成......我是 js 新手，我可能做了一些荒谬的事情。
将你的事件监听器放在getUserMedia的then中。
没什么区别...
只是注释区域被调用了两次还是更像是整个 addEventListener 被运行了两次？

标签： javascript jquery post getusermedia

【解决方案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')
    }

上面的代码更简洁，更容易阅读和维护。

最后，由您自己判断什么最适合您的需求。

【讨论】：

感谢您的回复：在我在这里发布之前，我得出了同样的结论，所以很高兴看到我们在同一页面上。我实施了标志建议，因为对于像我这样的 JS 知识有限的人来说，这似乎是最快的选择。请查看“kill”变量——我是否错误地实现了它？谢谢:)
好的，我在 .POST 之后的行上添加了“ video.removeEventListener('canplay', function(){return}); ”，但我仍然遇到同样的重复问题。（'off' 和 'unbind' 无法应用 - 我认为这是因为没有使用 jquery 选择视频...我认为 removeeventlistener 做同样的工作？...）
是的，它会去工作的，试试吧:)
在上面的代码中已经是 ev.target.removeEventListener(ev.type, arguments.callee);问题出在我的服务器上。不过，感谢您的发帖。

【解决方案2】：

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

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

感谢您的回复。

【讨论】：