从html5相机保存图像

Question

我的问题是，如何从HTML5摄像机实时流中保存完整图像？

在这里您可以找到我当前的代码（我是JavaScript初学者）：

    const video = document.getElementById('video');
    const canvas = document.getElementById('faceImage');


    const hdConstraints = {
        audio: false,
        video: { width: { min: 1280 }, height: { min: 720 } }
    };

    var options = { mimeType: 'video/webm' };
    navigator.mediaDevices.getUserMedia(hdConstraints, options)
        .then(
            (stream) => {
                video.srcObject = stream;
                video.play();

            setInterval(function() {
                    var context = canvas.getContext('2d');
                    context.drawImage(video, 0, 0, 1280, 720);
                    var data = canvas.toDataURL('image/jpeg');

                    ws.send(data);
            }, 1000);

            }
        );

在服务器端使用此代码，我收到的不是完整的jpeg图像（图片中只有10％的画布位于画布上，其他部分为空白）。

所以我的问题是，如何纠正此代码以仅将完整的图像发送到服务器？

谢谢