Canvas gaat automatisch full screen in Safari

dinsdag 31 juli 2018 01:34

Acties:

0 Henk 'm!

Topicstarter

Mijn vraag
Ik ben een *snip* link verwijderd online ticketsysteem aan het maken voor kleine lokale evenementen (fuifjes, festivals,...). En daarbij hoort een *snip* link verwijderd ticket-scanner.

Deze ticket-scanner werkt a.d.h.v een GSM-camera die dan de QR-code op de tickets van gebruikers kan controleren op geldigheid.

Ik gebruik een HTML-canvas om de content van de camera weer te geven, het probleem is dat dit canvas automatisch op full screen gaat in Safari (iPhone).
En wanneer ik het full-screen gedeelte sluit, loopt het vast...

Op Android zou het perfect moeten werken.

Relevante software en hardware die ik gebruik
Ik gebruik deze library voor het scannen van de QR-codes via camera:
https://atandrastoth.co.uk/main/pages/plugins/webcodecamjs/
https://github.com/andrastoth/WebCodeCamJS

Dit probleem is na te bootsen in Safari voor iPhone.

Wat ik al gevonden of geprobeerd heb
Ik heb al op Google naar dit probleem gezocht maar zonder resultaat. Ik heb geprobeerd een video-element te gebruiken zodat ik playsinline als mogelijkheid had, maar dat ondersteund de gebruikte library niet, ik heb ook een soort playsinline voor canvas-elementen gezocht, maar dat bestaat ook niet... Vervolgens heb ik geprobeerd om zowel via CSS als via het video-argument van de library een max-width en max-height in te stellen, maar dat werkte ook niet...

Wat ik ook al geprobeerd heb is de functie 'document.exitFullscreen();' en allerlei variaties daarop...

Ideale oplossing
De ideale oplossing zou zijn als het canvas niet automatisch full screen zou gaan, en het gewoon zou werken zoals op de Android devices.
Indien het misschien een instelling is van Safari om canvassen full-screen te maken is het ookal voldoende om te weten hoe dit uit te zetten in de Safari-instellingen (maar heb hier ook niks over gevonden).

De andere oplossing die ook goed zou zijn, is dat het mogelijk full-screen modus te verlaten zonder dat de applicatie bevriest...

Code

code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Scanner</title>
        
        <style>
            body {
                font-family: Arial;
                background-color: #424242;
            }
            #webcodecam-canvas {
                width: 100%;
                height: 75vh;
                display: none;
            }
            #start-btn {
                width: 100%;
                height: 80vh;
                background-color: #000000;
                color: #FF6600;
                font-weight: bold;
                margin-top: 20px;
                position: relative;
            }
            #start-btn span {
                text-align: center;
                width: 100%;
                font-size: 80px;
                font-weight: bold;
                margin: auto;
                position: absolute;
                top: 50%;
                transform: translate(0, -50%);
            }
            #camera-select {
                width: 100%;
                background-color: #000000;
                color: #FF6600;
                padding: 10px;
                font-size: 30px;
            }
            
            #result {
                width: 100%;
                padding-left: 50px;
                padding-right: 50px;
                box-sizing: border-box;
                font-size: 50px;
                text-align: center;
                margin-top: 50px;
                color: #FFFFFF;
            }
            #result .ID {
                font-weight: bold;
            }
            #result-img {
                width: 150px;
                height: 150px;
                margin: auto;
                margin-top: 50px;
                display: none;
            }
        </style>
    </head>
    <body>
        
        <canvas id="webcodecam-canvas"></canvas>
        <select id="camera-select"></select>
        
        <div id="start-btn" onclick="start()">
            <span>Start</span>
        </div>
        
        <div id="result"></div>
        <img id="result-img" src="media/images/image-placeholder.png" />
        
        <script src="js/jquery.js"></script>
        <script type="text/javascript" src="js/qrcodelib.js"></script>
        <script type="text/javascript" src="js/webcodecamjs.js"></script>
        <script type="text/javascript">
            
            //Variable to hold variable of prevously scanned QRCode to prevent double-scans
            prev = "";
            
            //Defining all the arguments for the scanner
            var args = {
            
                //Function launched when QR-Code is scanned
                resultFunction: function(result) {
                    if (result.code != prev) {
                            
                        //Split ID and hash
                        var parts = result.code.split(',');
                        
                        //Filter ID to prevent XSS
                        if (!isInt(parts[0])) {
                            return;
                        }
                        
                        //Sending AJAX request to server to check if hash is valid  
                        $.get( "https://nietrelevant/ticketvalidation.php", {id: parts[0],hash: parts[1]} , function( response ) {  
                        
                                if (response == "true") {
                                    $("#result").html("<span style='color:#00FF00;' class='ID'>" + parts[0] + "</span> is toegelaten...");
                                    $("#result-img").attr("src", "media/images/accepted.png");
                                    window.navigator.vibrate([200]);
                                } else {
                                    $("#result").html("<span style='color:#FF0000;' class='ID'>" + parts[0] + "</span> is geweigerd...");
                                    $("#result-img").attr("src", "media/images/declined.png");
                                    window.navigator.vibrate([1000, 200, 1000]);
                                }
                                    
                        });
                    }
                    
                    prev = result.code;
                },
                codeRepetition: false,
                tryVertical: true,
                constraints: {                          
                    video: {
                        mandatory: {
                        // maxWidth: 1280,
                            //maxHeight: 720
                        }
                    },
                    audio: true
                },
                zoom: 3,
                contrast: 10,
                grayscale: true,
                successTimeout: 0,
                beep: "media/audio/beep.mp3"
            };
            
            
            //Make WebCodeCamJS-object
            decoder = new WebCodeCamJS("#webcodecam-canvas").buildSelectMenu("#camera-select", "environment|back").init(args);
            
            //Function to start the camera and decorder on-click
            function start() {            
                //Change UI
                $("#webcodecam-canvas").fadeIn();
                $("#camera-select").fadeOut();
                $("#start-btn").fadeOut();
                $("#result-img").fadeIn();
                $("#result-img").css('display', 'block');
                
                //Start decoder
                decoder.play();
            }
            
            //Function to check if a given value is an integer
            //:param value: Value to check for integer
            //:return bool: Returns true if int
            function isInt(value) {
                return !isNaN(value) && (function(x) { return (x | 0) === x; })(parseFloat(value))
            }
        </script>
    </body>
</html>

Werkende versie hier:
*snip*

Mercikes!

Ik heb een bak links verwijderd; dit valt gewoon onder spam.

[ Voor 0% gewijzigd door RobIII op 31-07-2018 10:21 ]

dinsdag 31 juli 2018 08:22

Acties:

0 Henk 'm!

Anoniem: 159174

Volgens de maker van de library werkt het selectmenu niet op ios... Verder is dit niet het meest minimale code example met die fades en prev en zo.

dinsdag 31 juli 2018 10:24

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Hoe is 't posten van 142 regels code voldoen aan:

RobIII schreef op zondag 29 juli 2018 @ 18:16:
En post gewoon relevante(!) code-stukjes i.p.v. een link naar een pagina die verdwijnt zodra je je oplossing hebt.

Daarbij post je ettelijke keren een link naar je site wat ook, nadrukkelijk, niet de bedoeling is. Nogmaals: relevante(!) code kun je prima in je topic plaatsen, eventueel met een linkje naar een jsfiddle om je probleem te reproduceren en demonstreren maar daarmee houdt het op. Ik laat het topic voor nu open maar ik verzoek je vriendelijk de lap code te reduceren tot een handvol regels die relevant zijn voor je probleem en de rest achterwege te laten.

Verder is, zoals @Anoniem: 159174 hierboven al aanhaalt, vrij duidelijk aangegeven op de pagina's die je linkt dat iOS niet ondersteund wordt, dus ik vraag me af wat je precies verwacht

Afbeeldingslocatie: https://tweakers.net/ext/f/HH34iXepJX1vfh72gGpOitos/full.png

Ook zijn er diverse issues over geopend...

[ Voor 21% gewijzigd door RobIII op 31-07-2018 10:31 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

Vraag

Alle reacties