Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] Webcam Picture speichern

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [Erledigt] Webcam Picture speichern

    Hallo,

    ich hab mir auf meiner Seite eingerichtet das ich meine Webcam starten kann und ein Foto schissen kann. Das geht auch soweit in Chrome, das Foto wird automatisch abgespeichert mit einem Php Script.
    Das Problem ist nur das ich das unter Firefox brauche und da wird zwar die Webcam ausgegeben aber nicht das Foto gemacht. ich sitze jetzt seid Tagen dran aber weiß immer noch nicht wieso.
    PHP-Code:
      <video id="video"></video>
        <
    canvas id="canvas"></canvas>
        <
    img src="" hidden id="photo">

        <
    script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>

            (function () {

                var streaming = false,
                        video = document.querySelector('#video'),
                        canvas = document.querySelector('#canvas'),
                        photo = document.querySelector('#photo'),
                        startbutton = document.querySelector('#startbutton'),
                        width = 1400,
                        height = 0;

                navigator.getMedia = ( navigator.getUserMedia ||
                        navigator.webkitGetUserMedia ||
                        navigator.mozGetUserMedia ||
                        navigator.msGetUserMedia);

                navigator.getMedia(
                        {
                            video: true,
                            audio: false
                        },
                        function (stream) {
                            if (navigator.mozGetUserMedia) {
                                video.mozSrcObject = stream;
                            } else {
                                var vendorURL = window.URL || window.webkitURL;
                                video.src = vendorURL.createObjectURL(stream);
                            }
                            video.play();
                        },
                        function (err) {
                            console.log("An error occured! " + err);
                        }
                );

                video.addEventListener('canplay', function (ev) {
                    if (!streaming) {
                        height = video.videoHeight / (video.videoWidth / width);
                        video.setAttribute('width', width);
                        video.setAttribute('height', height);
                        canvas.setAttribute('width', width);
                        canvas.setAttribute('height', height);
                        streaming = true;
                    }
                }, false);

                function takepicture() {
                    canvas.width = width;
                    canvas.height = height;
                    canvas.getContext('2d').drawImage(video, 0, 0, width, height);
                    var data = canvas.toDataURL();
                    photo.setAttribute('src', data);
                    $.ajax({
                        type: "POST",
                        url: "screenshot.php",
                        data: {
                            imgBase64: data
                        }
                    }).done(function (o) {
                        console.log('saved');
                    });
                }

                document.onkeydown = function (event) {
                    if (event.keyCode == 120) {
                        event.cancelBubble = true;
                        event.returnValue = false;
                        takepicture();
                        ev.preventDefault();
                    }
                    return event.returnValue;
                }
            })();
        </script> 
    und die PHP
    PHP-Code:
    <?php

    class PacketFoto
    {

        public function 
    machFoto()
        {

            
    define('UPLOAD_DIR''images/');
            
    $bImg $_POST['imgBase64'];
            
    $bImg str_replace('data:image/png;base64,'''$bImg);
            
    $bImg str_replace(' ''+'$bImg);
            
    $sData base64_decode($bImg);
            
    $sFile UPLOAD_DIR 'pic.png';
            
    $success file_put_contents($sFile$sData);


            return 
    $success;
        }
    }

    $takePic = new PacketFoto();
    $takePic->machFoto();
    Ich hoffe jemmand kann mir da ein Tipp geben weil ich bei google nichts gefunden habe.

  • #2
    An welchem Schritt scheitert der Firefox?
    Hast du dir mal die JS-Konsole angeschaut?
    Was genau ist am Ergebnis im Firefox falsch, geht nicht kann so vieles Bedeuten....
    [URL="http://php.net/manual/en/migration55.deprecated.php"]mysql ist veraltet[/URL] [URL="http://php-de.github.io/jumpto/mail-class/"]Mails senden: Ohne Probleme und ohne mail()[/URL]
    [PHP]echo 'PS: <b>Meine Antwort ist keine Lösung, sondern nur eine Hilfe zur Lösung.</b>';[/PHP]

    Kommentar


    • #3
      Also wenn ich ein Foto schisse wird die Datei pic.png zwar erstellt jedoch ist sie leer heißt kein foto. Die function geht es kommt eine Antwort zurück jedoch ist sie Leer.

      Kommentar


      • #4
        Schalte mal das error_reporting voll auf und lasse dir $_POST['imgBase64']; ausgeben.
        [URL="http://php.net/manual/en/migration55.deprecated.php"]mysql ist veraltet[/URL] [URL="http://php-de.github.io/jumpto/mail-class/"]Mails senden: Ohne Probleme und ohne mail()[/URL]
        [PHP]echo 'PS: <b>Meine Antwort ist keine Lösung, sondern nur eine Hilfe zur Lösung.</b>';[/PHP]

        Kommentar


        • #5
          Kann ich leider zurzeit nicht aber als ich das letzte ma reingeschaut hab bei Firefox console antwort war data leer. also "data;" bei Chrome waren da ziehmlich viele ziffern also "data..sehr viele ziffern;". leider komm ich grad von hier aus nicht an mein Projekt ran um genau was sagen zu können. villeicht sollten wir lieber das am Montag besprechen wenn ich nicht grad woanders bin.

          EDIT: also nochmal zum Problem, in Firefox wird die Datei zwar erstellt(heißt mein Ajax request so wie mein php script gehen) Das problem ist das nichts reingeschrieben wird. da ich das Foto aus dem feld <canvas> nehme (das Feld verschwindet sobald ich F9 drücke um die function zu aktivieren) und es leer zurück kommt denke ich das da irgendwo der fehler liegt mit Firefox. Jedoch hab ich keine ahnung wie ich das beheben könnte. Ein tipp in die richtige richtung wäre schon super.

          Kommentar


          • #6
            Dann wird
            $_POST['imgBase64'];
            wohl leer gewesen sein.

            Insgesamt auch übler Code. Zugriff auf superglobals in Funktionen sind ein no-go, benutz Funktionsparameter. define in Funktionen ebenfalls ein no-go, beim zweiten Aufruf gibts ne Fehlermeldung. Keinerlei Fehlerprüfung oder -behandlung.

            schisse
            Wollte eigentlich nicht den Grammarnazi rauskehren, aber den muss ich jetzt mal verbessern.
            Es heisst "schiessen". Ein Schiss ist was anderes
            Über 90% aller Gewaltverbrechen passieren innerhalb von 24 Stunden nach dem Konsum von Brot.

            Kommentar


            • #7
              Ja Tut mir leid wenn ich in Forum unterwegs bin versuche ich meine Beiträge schnell zu verfassen und lassen sowas dann aus dem Auge. Ich bin noch am Anfang meiner Programmier Laufbahn und werde versuchen meine Funktionen besser zu Gestalten. Ich werde auch am Montag als erstes eine Fehlerüberprüfung einbauen. ja $_POST['imgBase64'] sollte leer sein, was meint ihr wo kann ich da ansetzen mit meiner Fehler suche? Ich denke immernoch das es an dem Feld <canvas> liegt jedoch weiß ich keine Alternative zu dieser.

              PS: Ich weiß das meine Rechtschreibung schlecht ist und ich sogar wenn ich es versuche Fehler mache. Hab mich früher zu wenig angestrengt und nun fällt es mir schwer das nachzuholen.

              Kommentar


              • #8
                Fall $_POST wirklich leer ist und auch die Firefox-Konsole sagt, dass der Request wirklich leer ist, wird das Problem innerhalb vom JS liegen, was ja auch dazu passt, das es ein Browserabhängiges Problem ist.

                Schau dir also mal den Rückgabewert von canvas.toDataURL() genauer an.
                [URL="http://php.net/manual/en/migration55.deprecated.php"]mysql ist veraltet[/URL] [URL="http://php-de.github.io/jumpto/mail-class/"]Mails senden: Ohne Probleme und ohne mail()[/URL]
                [PHP]echo 'PS: <b>Meine Antwort ist keine Lösung, sondern nur eine Hilfe zur Lösung.</b>';[/PHP]

                Kommentar


                • #9
                  In Ordnung vielen dank soweit. Ich werde mir das dann am Montag ausgeben lassen und mich gegebenenfalls nochmal melden. Ein schönes Wochenende euch allen noch.

                  EDIT: Hab leider nur 5min zeit grad. Also $_POST und canvas.toDataURL() genau so (beide ausgaben sind data Ich Melde mich später nochmal wenn ich genaueres weiß und ein Ansatz hab

                  Kommentar


                  • #10
                    Falls das Problem noch aktuell sein sollte, eine Frage: Hast du wenn du im Firefox auf die Webcam zugreifen willst zufällig noch eine andere Anwendung offen die ebenfalls auf die Webcam zugreift? Z.B. die gleiche Seite parallel in Chrome noch geöffnet? Solange bereits eine Anwendung auf die Webcam zugreift kannst du nicht parallel mit einer anderen Anwendung auf die Webcam zugreifen.

                    Ansonsten läuft diese Library bei mir wunderbar: https://github.com/jhuckaby/webcamjs

                    Kommentar


                    • #11
                      Nein, sobald ich versuche bei beiden Browsern die Cam zu verbinden wird die 2 nicht ausgegeben. Also daran kann es nicht liegen. Sobald ich zeit hab werde ich mir denn Link anschauen vielen dank.

                      Kommentar


                      • #12
                        Hmm ich kriegs einfach nicht im Firefox zum laufen.

                        PHP-Code:
                           <video id="video"></video>
                            <
                        canvas id="canvas"></canvas>
                            <
                        img src="" hidden id="photo">

                        (function () {

                                    var 
                        streaming false,
                                            
                        video document.querySelector('#video'),
                                            
                        canvas document.querySelector('#canvas'),
                                            
                        photo document.querySelector('#photo'),
                                            
                        startbutton document.querySelector('#startbutton'),
                                            
                        width 1280,
                                            
                        height 720;

                                    
                        navigator.getMedia = ( navigator.getUserMedia ||
                                            
                        navigator.webkitGetUserMedia ||
                                            
                        navigator.mozGetUserMedia ||
                                            
                        navigator.msGetUserMedia);

                                    
                        navigator.getMedia(
                                            {
                                                
                        videotrue,
                                                
                        audiofalse
                                            
                        },
                                            function (
                        stream) {
                                                if (
                        navigator.mozGetUserMedia) {
                                                    
                        video.mozSrcObject stream;
                                                } else {
                                                    var 
                        vendorURL window.URL || window.webkitURL;
                                                    
                        video.src vendorURL.createObjectURL(stream);
                                                }
                                                
                        video.play();
                                            },
                                            function (
                        err) {
                                                
                        console.log("An error occured! " err);
                                            }
                                    );

                                    
                        video.addEventListener('canplay', function (ev) {
                                        if (!
                        streaming) {
                                            
                        height video.videoHeight / (video.videoWidth width);
                                            
                        video.setAttribute('width'width);
                                            
                        video.setAttribute('height'height);
                                            
                        canvas.setAttribute('width'width);
                                            
                        canvas.setAttribute('height'height);
                                            
                        streaming true;
                                        }
                                    }, 
                        false);

                                    function 
                        takepicture() {
                                        
                        canvas.width width;
                                        
                        canvas.height height;
                                        
                        canvas.getContext('2d').drawImage(video00widthheight);
                                        var 
                        data canvas.toDataURL();
                                        
                        photo.setAttribute('src'data);
                                        $.
                        ajax({
                                            
                        type"POST",
                                            
                        url"screenshot.php",
                                            
                        data: {
                                                
                        imgBase64data
                                            
                        }
                                        }).
                        done(function (o) {
                                            
                        console.log('saved');
                                        });
                                    }

                                    
                        document.onkeydown = function (event) {
                                        if (
                        event.keyCode == 120) {
                                            
                        event.cancelBubble true;
                                            
                        event.returnValue false;
                                            
                        takepicture();
                                            
                        ev.preventDefault();
                                        }
                                        return 
                        event.returnValue;
                                    }
                                })(); 
                        So sieht mein jetziger Code aus der aber im Firefox nicht geht, weil Data immer leer ist. Im Chrome hab ich keine Probleme.

                        Noch jemmand ein Tipp was ich da machen könnte? Die Webcam wird ausgegeben jedoch wird das Bild nicht gemacht und wenn ich ein alert(data) mache is die ausgabe immer data; was ja einfach nur das ist was ich da eingegeben hab (müsste sehr viel mehr sein)

                        Kommentar


                        • #13
                          Deine Aufgabe wird es jetzt wohl sein zu Debuggen und herauszufinden, wo genau die Daten verloren gehen.

                          Du weiß schon mal, dass sie in canvas.getContext höchstwahrscheinlich nicht mehr vorhanden sind. Also würde ich mir mal die Variable Video anschauen.


                          PS: Kann einer der Mods das mal in das JS Forum verschieben?
                          [URL="http://php.net/manual/en/migration55.deprecated.php"]mysql ist veraltet[/URL] [URL="http://php-de.github.io/jumpto/mail-class/"]Mails senden: Ohne Probleme und ohne mail()[/URL]
                          [PHP]echo 'PS: <b>Meine Antwort ist keine Lösung, sondern nur eine Hilfe zur Lösung.</b>';[/PHP]

                          Kommentar


                          • #14
                            Danke für den ansatz und ich dachte zuerst das der fehler im php liegt daher im falschen forum. falls ein mod verschieben könnte wäre das super, danke.
                            also egal wo ich canvas ausgeben lasse sie ist immer leer. Ich hab nur wenig erfahrung mit debuggen aber ich versuch mein bestes vielen dank.

                            Kommentar


                            • #15
                              Dann würde ich mal sagen, es liegt an fehlender Browserunterstützung bzw. einem Bug im Browser...
                              Über 90% aller Gewaltverbrechen passieren innerhalb von 24 Stunden nach dem Konsum von Brot.

                              Kommentar

                              Lädt...
                              X