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
Du musst angemeldet sein, um einen Kommentar abzugeben.
Können Sie canvas.toDataUrl zu bekommen, die eine base64-codierte Zeichenfolge, die Sie buchen können als parameter an ein Skript auf Ihrem server zum Lesen und speichern als Bild-Datei.
Hier ist eine verkürzte version von einer tatsächlichen Umsetzung dieses Ansatzes:
und hier ist eine Beispiel-PHP-script nimmt die base64-Zeichenfolge konvertiert in einem .png, gibt es einen zufälligen Dateinamen, und speichert:
function getBase(){ var imgBase = canvas.toDataUrl(); document.getElementByID("textArea").value=imgBase; }
Dies sollte die Ausgabe Base64-string in eine textarea die ich angelegt habe. Irgendwelche Hinweise, warum es nicht?.toDataURL("image/png");
vielleicht?getElementByID
stattgetElementById
in ein paar Werbespots, die gegen das Ende...aber auch, wenn ich habe versucht mit diesem zu Debuggen, bekomme ich nichts, weder video, noch nichts in der KonsoleKönnen Sie getUserMedia.js oder anderen ähnlichen Bibliotheken enthalten einen Flash-fallback zu decken, DH. Obwohl Flash hat sich Wild unpopulär, vor kurzem.
CanIUse.com's stream Seite Informationen über die Unterstützung für dieses feature.
Wie gesagt wurde in der Roboter-Woods-Antwort
canvas.toDataUrl
greifen, das Bild für Sie.