对于 Web 应用程序，有没有更好的方法从相机中提取图像？-解网

问：

我想从相机中提取图像，使用自定义代码更改/过滤它们，并在浏览器中实时显示它们。我想知道从相机流中检索图像的最佳方法，以便我可以处理它们。现在，我已经获取了示例代码并拼凑了一些东西，这些内容将获取图像并在我单击按钮时显示它。我确信我可以修改它以更实时地更新图像。但这似乎非常低效。这是我正在做的

我使用视频标签来创建一个绘制视频的地方。我将显示样式设置为无，因此它实际上不会显示在屏幕上
我使用画布按需将图像从视频中复制出来。同样，我将显示设置为无，因为我实际上并不想看到图像
单击按钮后，我从画布上复制图像并创建一个包含图像字节的图像 URL。我显示这个图像。

这是代码

<html lang=”en”>

<body>
    <!-- Camera -->
    <main id="camera">

        <!-- Camera view -->
        <video id="camera--view" autoplay playsinline style="display: none;"></video>

        <!-- Camera sensor -->
        <canvas id="camera--sensor" style="display: none;"></canvas>

        <!-- Camera output -->
        <img src="//:0" alt="" id="camera--output">

        <!-- Camera trigger -->
        <button id="camera--trigger">Take a picture</button>

        <!-- Reference to your JavaScript file -->
        <script>
            // Define constants
            const cameraView = document.querySelector("#camera--view"),
                cameraOutput = document.querySelector("#camera--output"),
                cameraSensor = document.querySelector("#camera--sensor"),
                cameraTrigger = document.querySelector("#camera--trigger")

            // Access the device camera and stream to cameraView
            function cameraStart() {
                if (navigator.mediaDevices.getUserMedia) {
                    navigator.mediaDevices.getUserMedia({ video: true })
                        .then(function (stream) {
                            cameraView.srcObject = stream;
                        })
                        .catch(function (err0r) {
                            console.log("Something went wrong!");
                        });
                }

            }

            // 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/webp");
                cameraOutput.classList.add("taken");
            };
            // Start the video stream when the window loads
            window.addEventListener("load", cameraStart, false);            
        </script>

    </main>
</body>

</html>

似乎我应该能够获取视频流，以某个间隔直接拉出图像，或者在单击按钮时显示该图像。此时，我可以编写代码来修改图像，然后再显示图像。

有什么想法吗？

JavaScript HTML 视频流摄像机

对于 Web 应用程序，有没有更好的方法从相机中提取图像？

For Web App is there a better way to pull an image from the camera?

评论