Javascript: сохранение изображений getUserMedia () - PullRequest
Новая
       137

Javascript: сохранение изображений getUserMedia ()

0 голосов
/ 01 апреля 2019

Я хочу загрузить веб-камеру пользователя на холст, а затем сохранить изображение с этого холста в виде большого двоичного объекта.Надеюсь, я получу 1 изображение каждую 1 секунду.

К сожалению, я получаю только 1 изображение, сохраненное 5 раз, а не 5 разных изображений.Мой код довольно прост, но я подозреваю, что проблема связана с моей takeASnap() функцией.Что происходит не так?

Редактировать: Это наблюдается в Safari на iPad / iPhone, но не в настольном 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
        });

    }
...