web-dev-qa-db-ja.com

javascriptでモバイルデバイスのカメラにアクセスする方法は？

カメラ付きのデバイス（携帯電話など）で実行すると、このカメラをバーコードスキャナーとして使用できるWebアプリ（html + css + javaScript）を作成したいと思います。バーコードリーダーライブラリがあることは知っていますが、自分でスキャナーを書いてみたいと思います。 （これがどのように機能するかを詳しく知りたいからです。）

Webアプリを読み込んだ後、ユーザーはアプリがカムを使用することを許可する必要があります。ただし、他のすべてはユーザーの操作なしで機能するはずです。つまり、カメラの使用を許可した後、ボタンをタップする必要はありません。ユーザーの次の仕事は、終了ボタンを押すまで、またはブラウザーを閉じるまで、カメラをバーコードにかざすことです。ただし、スキャン中はタップする必要はありません。

私のアプリは、カメラのビデオストリームから頻繁にサップショットを作成する必要があります。このようなスナップショットは表示されることを意図しておらず（ユーザーはカムからビデオストリームを直接見ることができます）、どこにでも保存することを意図していません。 javaScriptでビットマップ、つまり2次元配列として使用できる必要があります。この配列の各項目は、単一ピクセルのRGB値を保持します。

スクリプトはそのような配列を受け取ると、それを分析してバーコードを識別しようとします。コードが正常に識別された場合、このコードはサーバーに送信されます。次に、次のスナップショットを作成する必要があります。また、コードが見つからなかった場合は、新しいスナップショットを作成する必要があります。これは、ユーザーがスキャンを終了するまで無限に繰り返されます。

あった方がよい：
カメラが見ることができる全画面領域は必要ありません。必要なのは小さな長方形のクリッピング（たとえば、640x320ピクセル）だけです。

このhtmlスニペットを使用して動画をサーバーにアップロードできることを知っています

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

しかし、これが私の問題の解決にどのように役立つのかわかりません。手伝って頂けますか？

（これが違いを生むかどうかはわかりませんが、jQueryを使用しています。）

javascriptweb-applicationscamera
6
Hubert Schölnast

getUserMedia API を見てください。これにより、純粋にJSを介してWeb上でデバイスのカメラを使用する許可をユーザーに求めることができます。その後、入力をストリームとして操作できます。

IOSはまだこれをサポートしていないことに注意してください。唯一の実際の代替手段は、fileupload/blobを使用して写真を撮ってから、その画像でバーコードを検索するようにユーザーに依頼することです。

編集：リンク先 非推奨のメソッドなし

1
Pabs123