Как сохранить фото сделанное на сайте через веб камеру, на сервер

У меня пока что вот такой код:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        video{
            display: none;
        }
        canvas{
            display: none;
        }
    </style>
</head>
<body>


<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Сделать снимок</button>
<canvas id="canvas" width="640" height="480"></canvas>
<img width="400px" height="400px" id="photo">



<script type="text/javascript">
var video = document.getElementById('video');

// Получаем доступ к камере
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    // Не включаем аудио опцией `{ audio: true }` поскольку сейчас мы работаем только с изображениями
    navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
        video.srcObject = stream;
        video.play();
    });
}
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');

// Обработчик события нажатия на кнопку "Сделать снимок"
document.getElementById("snap").addEventListener("click", function() {
    context.drawImage(video, 0, 0, 640, 480);

    image = document.getElementById("photo");
    var imageDataURL = canvas.toDataURL('image/png');

  
  // Помещение изображения в элемент img.

    image.setAttribute('src', imageDataURL);
      var imageDataURL = canvas.toDataURL('image/png');
});



</script>


</body>
</html>

Но как сохранить на сервер эту картинку?


Ответы (0 шт):