拍摄用户网络摄像头的快照

Question

当用户点击提交按钮时，我正在寻找用户网络摄像头的快照。

之后，我想将其发送到同一页面。

但是，我的代码产生400错误。有人可以帮我一把吗？谢谢！

这是我的代码：

<div id="container">
    <video autoplay="true" id="video"></video>
</div>

<form method="post" accept-charset="utf-8" name="form" onsubmit="snapshot()">
    <input name="image" id='image' type="hidden"/>
    </br></br>
    <center><input type="submit" value="Recycler"/></center>
</form>


<script>
    var video = document.getElementById('video');
    if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        console.log('testVideo');
        navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
            video.src = window.URL.createObjectURL(stream);
            video.play();
        });
    };

    function snapshot(){

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

            // Context object for working with the canvas.
            context = canvas.getContext('2d');

            // Set the canvas to the same dimensions as the video.
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;

            // Draw a copy of the current frame from the video on the canvas.
            context.drawImage(video, 0, 0, canvas.width, canvas.height);

        var canvas = document.getElementById("canvas");
        var dataURL = canvas.toDataURL("image/jpg");
        document.getElementById('image').value = dataURL;
        var image = new FormData(document.forms["form"]);

        var xhr = new XMLHttpRequest();
        xhr.open('POST', './', true);
        xhr.send(image);

        window.location.href = "./"

    };

</script>