jQuery POST兩次
[英]jquery POST twice
問題描述
請問有人為什么要兩次提交POST請求？ 注意：發送第二個請求之前大約有2分鍾的延遲（數據完全相同）。
該代碼使用GetUserMedia（）來顯示用戶網絡攝像頭，並立即將快照復制到畫布。 然后，在使用jquery將其發布到服務器之前，它會獲得一個數據URL。 我遇到的問題是，第二個發布請求在第一個發布請求后兩分鍾左右用相同的數據執行。 我一生無法解決問題的原因-請幫忙！
// 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 個解決方案
解決方案1
0 2019-06-04 06:20:52
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')
}
上面的代碼更加簡潔，易於閱讀和維護。
最后，您可以根據自己的判斷來決定最適合您的需求。
解決方案2
-3 已采納 2019-06-05 14:26:41
我通過讓服務器響應200 OK解決了該問題，
收到POST后。 似乎我忘記了添加它，這導致JQUERY重新發布（或類似的東西，因為express的發布部分被調用了兩次）。
謝謝你的回復。
jQuery $ .post觸發兩次？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.