Zugriff auf die Kamera des mobilen Geräts mit Javascript?

Question

Ich möchte eine Web-App schreiben (html + css + javaScript), die, wenn sie auf einem Gerät mit einer Kamera (wie einem Mobiltelefon) läuft, diese Kamera als Barcodescanner verwenden kann. Ich weiß, dass es Barcodeleser-Bibliotheken gibt, aber ich möchte versuchen, meinen eigenen Scanner zu schreiben. (Denn ich möchte lernen, wie das im Detail funktioniert.)

Nach dem Laden der Web-App sollte der Benutzer zulassen, dass die App die Cam verwendet. Aber dann sollte alles andere ohne die Benutzerinteraktion funktionieren, d. H. Es darf keine Notwendigkeit bestehen, nach der Verwendung der Kamera auf irgendeinen Knopf zu tippen. Die nächste Aufgabe des Benutzers ist es, die Kamera auf Barcodes zu halten, bis er den fertigen Knopf drückt oder bis er den Browser schließt. Aber während des Scannens sollte kein Antippen erforderlich sein.

Meine App sollte häufig Saphots aus dem Videostream der Kameras machen. Solch ein Schnappschuss ist nicht dazu gedacht, angezeigt zu werden (der Benutzer kann direkt den Video-Stream von der Kamera sehen) und es ist nicht dazu gedacht, irgendwo gespeichert zu werden. Es muss in JavaScript als eine Bitmap verfügbar sein, d. H. Als ein zweidimensionales Array, wobei jedes Element in diesem Array die RGB-Werte eines einzelnen Pixels enthält.

Wenn das Skript ein solches Array empfängt, analysiert es es und versucht, einen Barcode zu identifizieren. Wenn ein Code erfolgreich identifiziert wurde, wird dieser Code an einen Server gesendet. Dann sollte der nächste Schnappschuss gemacht werden. Wenn kein Code gefunden werden kann, sollte ein neuer Snapshot erstellt werden. Dies wiederholt sich endlos, bis der Benutzer das Scannen beendet.

Schön zu haben:
Ich brauche nicht den gesamten Bildschirmbereich, den die Kamera sehen kann. Ich brauche nur einen kleinen rechteckigen Ausschnitt (zum Beispiel 640x320 Pixel).

Ich weiß, dass Sie diesen HTML-Snippet verwenden können ein Video an einen Server haben

<form action="server.cgi" method="post" enctype="multipart/form-data"> 
    <input type="file" name="video" accept="video/*" capture> 
    <input type="submit" value="Upload"> 
</form> 

Aber ich habe keine Ahnung zu laden, wie das mir mein Problem zu lösen helfen kann. Kannst du mir helfen?

(ich weiß nicht, ob dies einen Unterschied macht, aber ich benutze jQuery.)

Answer 1

Werfen Sie einen Blick auf die getUserMedia API ermöglicht es Ihnen, die Benutzer aufzufordern, für die Erlaubnis, ihr Gerät der Kamera im Web zu verwenden rein durch JS. Sie können die Eingabe dann als Stream bearbeiten.

Beachten Sie, dass iOS immer noch keine Unterstützung dafür bietet und die einzige echte Alternative ist, den Benutzer zu bitten, ein Bild mit einem Dateiupload/Blob zu erstellen und dann dieses Bild nach einem Barcode zu durchsuchen.

bearbeiten: Link zu none deprecated method