web-dev-qa-db-ja.com

ブラウザを介したカメラアクセス

モバイル用のHTML5 Webサイトを作成しており、ネイティブアプリではなく、Webブラウザーを介してカメラにアクセスする必要があります。 iOSでこの作業を行うのに問題があります。誰もこれの解決策を知っていますか？

ioshtml5camera
150
Julia

これを試すことができます：

<input type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput">

ただし、動作するためには、iOS 6 +でなければなりません。写真を撮るか、アルバムからアップロードするかを選択するための素敵なダイアログが表示されます。

Screenhot

例はここにあります： PhoneGapなしでカメラ/画像データをキャプチャする

122
Xeroxoid

2015年現在、正常に動作します。

<input type="file">

これにより、ユーザーはファイルのアップロードを求められます。 iOS 8.xでは、これはカメラビデオ、カメラ写真、またはフォトライブラリの写真/ビデオです。

iOS/iPhone photo/video/file upload

<input type="file" accept="image/*">

これは上記のとおりですが、アップロードできるのはカメラまたはライブラリからの動画のみではなくphotosに制限されます。

30
Simon East

IOS6では、Appleは<input type="file">タグを介してこれをサポートします。 Appleの開発者向けドキュメントには有用なリンクが見つかりませんでしたが、例があります here 。

オーバーレイのように見え、より高度な機能はまだ利用できませんが、これは多くのユースケースで機能するはずです。

編集： w3cには、iOS6 Safariのサブセットを実装しているように見える仕様があります。capture属性が特に欠落しています。

25
user295691

これは機能していると思います。ビデオまたはオーディオの記録。

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

または（新しい方法）

<device type="media" onchange="update(this.data)"></device>
<video autoplay></video>
<script>
  function update(stream) {
    document.querySelector('video').src = stream.url;
  }
</script>

そうでない場合、おそらくios6で動作します。詳細は get user media で見つけることができます。

10
siniradam

Picup アプリは、HTML5ページから写真を撮り、サーバーにアップロードする方法です。サーバー上で追加のプログラミングが必要になりますが、PhoneGapとは別に、別の方法は見つかりませんでした。

4
rakensi

この質問はすでに数年前のものですが、その間に、カメラに直接アクセスする、プレビューを表示する、スナップショットをキャプチャする（QRコードスキャンなど）など、いくつかの追加の可能性が進化しました。

この Google Developers の記事では、「どこでも動作する」（デスクトップブラウザーであっても）から「動作する」まで、画像/カメラデータをWebアプリケーションに取り込む方法（？）カメラ付きの最新のモバイルデバイスでのみ」。多くの便利なヒントとともに。

説明された方法：

  • URLを尋ねる
  • ファイル入力（他のほとんどの投稿でカバーされています）
  • ドラッグアンドドロップ（デスクトップブラウザーに便利）
  • クリップボードから貼り付け
  • インタラクティブにカメラにアクセスします（QRコードなど、アプリケーションが「見る」ものについて即座にフィードバックする必要がある場合に必要）
1
Christoph