Ich versuche zufällig ein Bild von einer Webcam zu erfassen und es dann auf meinem Server zu speichern. Im Moment verwende ich getUserMedia, um die Webcam zum Videoelement zu streamen. Dann kann ich ein Bild auf einer Leinwand mit einer Schaltfläche erfassen, aber ich bin es Ich bin mir nicht sicher, wie ich das Bild von der Leinwand auf meinem Server speichern soll.

Ein weiteres Problem ist, dass getUserMedia nur in Chrome, Opera und Firefox funktioniert. Gibt es eine Alternative für den IE?

Damit arbeite ich gerade:

    <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>`

Tausend Dank