Стиль по умолчанию черный прямоугольник "Нет источника видео" / "Нет разрешений на видео"

Question

Когда у пользователя запрашивается разрешение на Safari, элемент видео отображается в виде черного прямоугольника с зачеркнутой кнопкой воспроизведения. Как изменить стиль этого элемента? У него есть конкретный идентификатор / класс / тег?

Я использую Quagga JS в качестве сканера штрих-кода. AFAIK Quagga создает элемент video, а затем запрашивает разрешение камеры. Оптимальным результатом было бы скрыть элемент, используя display:none;, но я не могу придумать, как это сделать. Мне нужен элемент для отображения канала камеры, как только у сканера есть разрешение, но перед этим он должен либо закрасить экран в черный цвет, либо скрыться.

Answer 1

Я исправил это, скрыв его с помощью JavaScript и показав его после завершения Quagga Feedback. Обратите внимание, что чистое решение 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();
    });