Implementierungsideen und HTML5-Code zum Aufrufen von Mobiltelefonkameras zum Aufnehmen von Bildern_HTML5-Tutorialfähigkeiten

Der Herausgeber hat jedem Ideen gegeben. Das Wichtigste beim Erlernen des Programmierens ist die Übung. Obwohl ich über perfekten Code verfüge, hoffe ich, dass jeder seinen eigenen Code schreiben kann.
HTML5 Die Media Capture-API bietet Unterstützung für den programmierbaren Zugriff Sie können getUserMedia direkt verwenden, um den von der Kamera bereitgestellten Videostream abzurufen. Tatsächlich gibt es jedoch viele Probleme bei der Verwendung von HTML5 zum Aufrufen der Handykamera:
1) Google hat Chrome erst veröffentlicht, nachdem mit Version 21 eine neue getUserMedia-API für hochwertige Video- und Audiokommunikation hinzugefügt wurde, die Webanwendungen ermöglicht Um auf Kamera und Mikrofon zuzugreifen, unterstützt neben anderen mobilen Browsern nur Opera HTML5 zum Aufrufen der lokalen Kamerafunktion
2) Keiner der Browser unterstützt den Zugriff auf mehrere Kameras: Chrome unterstützt keinen Zugriff auf die Rückkamera, während Pera den Zugriff auf die unterstützt Rückfahrkamera

Android-Mobiltelefon, unter der Browser-Chrome32-Version kann der Browser die Gerätekamera aufrufen, um Bilder aufzunehmen. Es erfolgt hauptsächlich in 3 Schritten:

1) Holen Sie sich den Videostream
Fügen Sie ein HTML5-Video-Tag hinzu und verwenden Sie das von der Kamera erhaltene Video als Eingabequelle für dieses Tag

Code kopieren

Der Code lautet wie folgt:

var video = document.getElementByIdx_x_x( "video");
navigator.getUserMedia({video:true}, function (stream) {
video.src = window.webkitURL.createObjectURL(stream);
}, function (error) { warning (Fehler); } ; 🎜>

Code kopieren

Der Code lautet wie folgt:

Funktion scamera() { var videoElement = document.getElementByIdx_x_x('video'); var canvasObj = document.getElementByIdx_x('canvas1'); var context1 = canvasObj.getContext('2d'); .fillStyle = "#ffffff"; context1.fillRect(0, 0, 320, 240); 🎜>

3 ) Bilderfassung

Um Bilddaten von Canvas zu erhalten, besteht die Kernidee darin, die toDataURL von Canvas zu verwenden, um die Canvas-Daten in ein Base64-Bit-codiertes PNG-Bild umzuwandeln





Code kopieren

Der Code lautet wie folgt:
var imgData=canvas.toDataURL(“image/ png“);


Das Format von imgData ist wie folgt: „data:image/png;base64,xxxxx“

Die tatsächlichen Bilddaten sind der Teil nach dem Base64-codierten Komma