web-dev-qa-db-ja.com

PWAモバイルカメラアクセス

私の要件は、iOSおよびAndroid=モバイルブラウザを使用して）でモバイルカメラにアクセスすることです。

Ionic PWAアプリを使用すると、iOSのモバイルカメラにアクセスできますか？Androidデバイスブラウザー？Cordovaを使用したPWAソリューション（ネイティブソリューションではありません）を探しています）。

ionic-frameworkcordova-pluginsprogressive-web-apps
13
jinu S

PWAの作業中。モバイルデバイスのカメラ/画像にアクセスする必要性に遭遇しました（ネイティブアプリは問題外でした）。いくつかの調査を行った後、私はこの小さなナゲットに出くわしました。

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

受け入れ属性とキャプチャ属性を追加することで、電話のカメラと画像にアクセスできました。また、サーバー側（ノードまたはPHP）で特別なことを行う必要がないことも指摘しておきます。ブラウザでの標準のファイルアップロード入力と同じように機能します。

17
Gokul

Ionic PWAアプリでカメラを使用する場合は、コンデンサを使用できます： https://capacitor.ionicframework.com/docs/apis/camera

カメラ機能を実装しましたが、100％機能します。

enter image description here

1
deanwilliammills

Webブラウザーでビデオデバイスを開くことができます...

<video id="cameraPlayer"></video>

// find the video devices (font/back cameras etc)
navigator.mediaDevices.enumerateDevices().then(function (devices) {
    // https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices
    devices.forEach(function (device) {
        if (device.kind === 'videoinput') {
            cameraDeviceIds.Push(device.deviceId)
        }
    })
})

// attach camera output to video tag
navigator.mediaDevices.getUserMedia({
    video: { deviceId: { exact: cameraDeviceIds[currentCameraIndex] } }
}).then(function (stream) {
    document.getElementById("cameraPlayer").srcObject = stream
})

画像だけが必要な場合は、入力を使用できます

<input type="file" accept="image/*" id="inputPhoto" class="hidden" capture="environment" />

   // trigger capture
   document.getElementById('inputPhoto').click()

  // event handler for change
    function onInputPhotoChange() {
    if (document.getElementById('inputPhoto').files.length === 0) {
        return
    }


    var reader = new window.FileReader()
    reader.onloadend = function (event) {
        event.target.result
        // image data
        // note you may need to rotate using EXIF data on a canvas
    }

    // Read the file into memory as dataurl
    var blob = document.getElementById('inputPhoto').files[0]
    reader.readAsDataURL(blob)
}
1
KillerKiwi

明らかなように、[〜＃〜] html [〜＃〜]とを使用してカメラにアクセスする必要がありますjavascript。

HTML5には、ユーザーから質問することで許可が与えられた後にユーザーのカメラにアクセスできる新機能が導入されています。 HTML5とJavaScriptを使用してブラウザからカメラにアクセスする手順を実行できるリンクは次のとおりです。 serMedia

ここにあなたの問題があればそれを解決する別のスタックオーバーフローの質問があります。 ブラウザからカメラにアクセス

0
Mostafa Ghadimi

上記の解決策では、ファイルの選択はi magesカテゴリのみに限定されます。ただし、ここではブラウザのカメラまたはオーディオデバイスにアクセスしたいと考えています。したがって、この挑戦​​を救うために、ブラウザーからAPIが来ます（「ブラウザーは今や強力です」）。

getUserMedia（：true/false）

ここで_<media_type>_は、オーディオ、ビデオなど、アクセスしたいメディアのタイプです__{audio: true/false}_および_{video:true/false}_として設定できます。ただし、メディアが見つからない場合、エラー「NotFoundError」が返されます。

ここに例があります。 ：>

if('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices){ const stream = await navigator.mediaDevices.getUserMedia({video: true}) }

0
Himanshu Joshi

上記の回答に加えて、カメラをPWAで機能させるには、index.htmlファイルにこれを追加する必要があります

<script nomodule="" src="https://unpkg.com/@ionic/[email protected]/dist/ionicpwaelements/ionicpwaelements.js"></script>
0
Chetan Bansal