将默认的“无视频源”/“无视频权限”设置为黑色矩形

我通过JavaScript隐藏它并在Quagga反馈完成后显示它来修复它。请注意,纯CSS解决方案会更漂亮。

// Hide the preview before it's fully initialised.
    $('#videoBoundingBox').hide();
    Quagga.init({
        inputStream: {
            name: "Live",
            type: "LiveStream",
            target: document.querySelector('#videoBoundingBox')
        },
        decoder: {
            readers: [
                "code_128_reader",
                "ean_reader"
            ]
        }
    }, function (err) {
        if (err) {
            console.log(err);
            setResult(err);
            err = err.toString();
            if (err.search("NotFoundError")) {
                // No camera found. The user is probably in an office environment.
                // Redirect to previous orders or show a background image of sorts.
            } else if (err.search("NotAllowedError")) {
                // The user has blocked the permission request.
                // We should ask them again just to be sure or redirect them.
            } else {
                // Some other error.
            }


            return;
        }
        // Hide the preview before it's fully initialised.
        $('#videoBoundingBox').show();
        setResult("Initialization finished. Ready to start");
        console.log("Initialization finished. Ready to start");
        Quagga.start();
        initializeQuaggaFeedback();
    });