Как перезапустить поток с камеры после съемки? - PullRequest
Новая
       15

Как перезапустить поток с камеры после съемки?

0 голосов
/ 20 декабря 2018

В настоящее время я делаю веб-приложение, которое позволяет делать снимки, пока пользователь не нажмет кнопку «отправить».Сделанный снимок отображается в виде миниатюры в верхнем правом углу экрана.

Работает нормально, но есть одна проблема: когда камера запускается и пользователь нажимает кнопку «сделать снимок», камера сразу же зависает.Моя цель - позволить пользователям делать столько фотографий, сколько они хотят, и проверять их масштабирование в уменьшенном изображении, пока они не будут удовлетворены определенным снимком и решат отправить его.Вот мой текущий код: 

// Define constants
const cameraView = document.getElementById("camera--view"),
        cameraOutput = document.getElementById("camera--output"),
        cameraSensor = document.getElementById("camera--sensor"),
        cameraTrigger = document.getElementById("camera--trigger");

// Access the device camera and stream to cameraView
function cameraStart() {
        navigator.mediaDevices.getUserMedia(constraints)
            .then(function success(stream) {
                cameraView.srcObject = stream;
            })
            .catch(function (error) {
                console.error("No camera.", error);
                document.write("getUserMedia error: No camera detected.")
            });
    }

// Take a picture when cameraTrigger is tapped
cameraTrigger.onclick = function () {
            cameraSensor.width = cameraView.videoWidth;
            cameraSensor.height = cameraView.videoHeight;
            cameraSensor.getContext("2d").drawImage(cameraView, 0, 0);
            cameraOutput.src = cameraSensor.toDataURL("image/jpeg", 1.0);
            cameraOutput.classList.add("taken");
            $('#submit--photo').prop("disabled", false);

            //Zoom function
            $('#camera--output').click(function () {
                let options = {'max-width': '80%', 'max-height': '80%'};
                let myImage = $(".taken");
                if (myImage.hasClass("zoomed")) {
                    options = {'max-width': '10%', 'max-height': '10%'};
                }

                myImage.stop().animate(options, "fast");
                myImage.toggleClass("zoomed");
            });
        };

Одно из решений, которое я до сих пор пробовал, - это снова вызвать функцию cameraStart () в качестве функции обратного вызова, например: 

cameraTrigger.onclick = function () { (### code ###) }.then(cameraStart())

Но это не работает.Я только начинающий в JavaScript, и я не знаю, как это решить.

...