Xtykutl

When the user is prompted for a permission on Safari, the video element is shown as a black rectangle with a strikethrough play button. How do I change this element's styling? Does it have a specific ID / class / tag?

I'm using Quagga JS as a barcode scanner. AFAIK Quagga creates a video element, then asks for camera permission. The optimal result would be to hide the element using display:none;, but I can't think of any way to accomplish this. I need the element to display the camera feed once the scanner has its permission, but before that it should either paint the screen black or be hidden.

I've fixed it by hiding it via JavaScript and showing it once the Quagga Feedback has finished. Note that a pure CSS solution would be much prettier.

// 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();

    });