Периодически отправлять захваченное изображение javascript webrtc

Question

Как сделать POST-запрос периодически?

Я использовал инструкцию от https://davidwalsh.name/browser-camera и она работает.

Джей оставил там комментарий, в котором он отправляет изображение, используя запрос POST, но я все еще не могу использовать его в своем коде.

navigator.webkitGetUserMedia({video:true},function(stream){
        document.getElementById("video").src = webkitURL.createObjectURL(stream);
    },
    ....

    var video_element = document.getElementById('video'); 
    var canvas = document.getElementById("myCanvas");
    var ctx=canvas.getContext("2d"); 
    ctx.drawImage(video_element,0, 0, 640,480, 0,0, 320,240);
    ....
var data = imgData.substr(22); 
$.post(qurl,{ 'dataImg' : data ,   ...

Как я могу принять этот код для отправки изображения каждые 10 секунд и проверки, было ли отправлено предыдущее изображение или нет?

Answer 1

Попробуйте этот код

var video = document.getElementById('video');

// Get access to the camera!
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    // Not adding `{ audio: true }` since we only want video now
    navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
        video.src = window.URL.createObjectURL(stream);
        video.play();
    });
}

// Elements for taking the snapshot
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');

// Trigger photo take
setTimeout(autoclick, 1000);
functio autoclick(){
  document.getElementById("snap").addEventListener("click", function() {
    context.drawImage(video, 0, 0, 640, 480);
  });
  var imgData = context.getImageData(0, 0, 640, 480);
  $.ajax({
    type: "POST",
    url: '/imgupload',
    data: {'file':imgData},
    processData: false,
    contentType: false,
    success: function (data) {
       // action
    }
});
}

<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>

Answer 2

Вы можете заключить этот код в функцию, а затем периодически вызывать его с помощью метода setInterval.

setInterval(myCaptureImageFunction , 10000);

Он будет запускать вашу функцию каждые 10 секунд.

Что касается проверок, вы можете создать переменную, в которой будут храниться данные о последней успешной загрузке (включая время), а затем просто запросить эту переменную или распечатать ее в виде сообщения о состоянии.

Вот ссылка на документацию для setInterval: https://www.w3schools.com/jsref/met_win_setinterval.asp