样式默认 "No video source" / "No video permissions" 黑色矩形

Question

当提示用户在 Safari 上获得权限时，视频元素显示为带有删除线播放按钮的黑色矩形。如何更改此元素的样式？它有特定的 ID / class / 标签吗？

我正在使用 Quagga JS 作为条码扫描器。 AFAIK Quagga 创建了一个 video 元素，然后请求相机许可。最佳结果是使用 display:none; 隐藏元素，但我想不出任何方法来实现这一点。我需要该元素在扫描仪获得许可后显示相机画面，但在此之前它应该将屏幕涂黑或隐藏。

Answer 1

我已通过 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();
    });

样式默认 "No video source" / "No video permissions" 黑色矩形

Style the default "No video source" / "No video permissions" black rectangle

css

safari

ios

quaggajs