Aufnehmen eines Bildes von einer webcam

Ich bin versucht, nach dem Zufallsprinzip aufnehmen eines Bildes von einer webcam und speichern Sie Sie dann auf meinem server, im Moment bin ich mit getUserMedia zum streamen von webcam-video-element, dann kann ich das aufzeichnen eines Bildes auf eine Leinwand, mit einer Schaltfläche, aber ich bin mir nicht sicher, wie Sie Sie zu speichern, das Bild von der Leinwand auf meinem server.

Weiteres Problem ist die getUserMedia funktioniert nur in Chrome, Opera und Firefox, gibt es keine alternative zum IE?

Dies ist, was ich arbeite aktuell mit:

    <video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
<button id="getBase" onclick="getBase()">Get Base64</button>
<textarea id="textArea"></textarea>

<script>

    //Put event listeners into place
    window.addEventListener("DOMContentLoaded", function() {
        //Grab elements, create settings, etc.
        var canvas = document.getElementById("canvas"),         
        context = canvas.getContext("2d"),
        video = document.getElementById("video"),
        videoObj = { "video": true },
        errBack = function(error) {
        console.log("Video capture error: ", error.code); 
        };

        //Put video listeners into place
        if(navigator.getUserMedia) { //Standard
            navigator.getUserMedia(videoObj, function(stream) {
                video.src = stream;
                video.play();
            }, errBack);
        } else if(navigator.webkitGetUserMedia) { //WebKit-prefixed
            navigator.webkitGetUserMedia(videoObj, function(stream){
                video.src = window.webkitURL.createObjectURL(stream);
                video.play();
            }, errBack);
        }

        //Trigger photo take
        document.getElementById("snap").addEventListener("click", function() {
            context.drawImage(video, 0, 0, 640, 480);
        });

        document.getElementByID("getBase").addEventListener("click", getBase());

    }, false);                  

    function getBase(){
        var imgBase = canvas.toDataURL("image/png");

        document.getElementByID("textArea").value=imgBase;
    }
</script>`

Dank Haufen

Schreibe einen Kommentar