Question

我想将用户的网络摄像头加载到画布上，然后将来自该画布的图像另存为blob。希望我每1秒钟能收到1张图片。

不幸的是，我只得到1张保存5次的图像，而不是5张不同的图像。我的代码非常简单，但是我怀疑问题出在我的takeASnap()函数上。怎么了？

编辑：这是在iPad / iPhone的Safari上看到的，但在台式机Chrome浏览器中没有。

var NUM_IMAGES = 5;
    const vid = document.querySelector('video');
    navigator.mediaDevices.getUserMedia({ video: true }) // request cam
        .then(stream => {
            vid.srcObject = stream; // don't use createObjectURL(MediaStream)
            return vid.play(); // returns a Promise
        })
        .then(() => { // enable the button
            const btn = document.getElementById('download-button');
            btn.disabled = false;
            btn.onclick = e => {
                imageId = 0;
                userId = Math.floor(Math.random() * 10000);
                recursiveDelay(kickOff, NUM_IMAGES, 1000)

            };
        });

    function kickOff() {
        takeASnap().then(saveBlob); // saveBlob out of scope of this question.
    }

    function recursiveDelay(functionToCall, executionsNumber, timeoutInMilliseconds) {
        if (executionsNumber) { //exit condition
            functionToCall(); // external function execution
            setTimeout(
                () => {
                    recursiveDelay(functionToCall, executionsNumber - 1, timeoutInMilliseconds); //recursive call
                }, timeoutInMilliseconds);
        }
    }

    function takeASnap() {
        const canvas = document.createElement('canvas'); // create a canvas
        const ctx = canvas.getContext('2d'); // get its context
        canvas.width = vid.videoWidth; // set its size to the one of the video
        canvas.height = vid.videoHeight;
        ctx.drawImage(vid, 0, 0); // the video

        return new Promise((res, rej) => {
            canvas.toBlob(res, 'image/jpeg'); // request a Blob from the canvas
        });

    }

Javascript：保存getUserMedia（）图像

0 个答案: