Question

我目前正在制作一个允许在用户单击“发送”按钮之前拍照的网络应用程序。拍摄的照片显示在屏幕右上角的小缩略图中。

它可以正常工作，但是存在一个问题：相机启动并且用户单击“拍照”按钮时，相机立即冻结。我的目标是让用户根据需要拍摄尽可能多的图片，并放大查看缩略图，直到对特定快照感到满意并决定发送为止。这是我当前的代码：

# A tibble: 3 x 2
  TableName Index    
  <fct>     <list>   
1 A         <int [2]>
2 B         <int [2]>
3 C         <int [1]>

到目前为止，我尝试过的解决方案之一是再次将cameraStart（）函数作为回调函数进行调用，例如：

// 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");
            });
        };

但不起作用。我只是JavaScript的初学者，我不知道如何解决这个问题。

拍照后如何重新启动相机流？

0 个答案: