web-dev-qa-db-fra.com

Accès à la caméra mobile PWA

Ma condition est d'accéder à la caméra mobile dans iOS et Android en utilisant le navigateur mobile.

En utilisant Ionic PWA app, puis-je accéder à la caméra mobile dans iOS et Android navigateurs d'appareils? Vous recherchez une solution PWA en utilisant Cordova (pas une solution native).

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

Tout en travaillant sur un PWA. Je suis tombé sur la nécessité d'accéder à la caméra/aux images d'un appareil mobile (une application native était hors de question). Après avoir fait quelques recherches, je suis tombé sur cette petite pépite.

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

En ajoutant les attributs d'acceptation et de capture, j'ai pu accéder à la caméra et aux images de mon téléphone. Je dois également souligner que vous n'avez rien à faire de spécial côté serveur (Node ou PHP). Il agit comme une entrée de téléchargement de fichier standard dans un navigateur.

17
Gokul

Si vous souhaitez utiliser l'appareil photo dans une application Ionic PWA, vous pouvez utiliser Capacitor: https://capacitor.ionicframework.com/docs/apis/camera

J'ai implémenté la fonction caméra et cela fonctionne à 100%:

enter image description here

1
deanwilliammills

Vous pouvez ouvrir des appareils vidéo dans le navigateur 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
})

Si vous voulez juste une image, vous pouvez utiliser une entrée

<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

Comme il est évident, vous devez accéder à la caméra en utilisant [~ # ~] html [~ # ~] et javascript .

HTML5 introduit une nouvelle fonctionnalité que vous pouvez accéder à la caméra des utilisateurs une fois l'autorisation accordée en posant une question à l'utilisateur. Voici un lien que vous pouvez suivre l'étape d'accès à la caméra depuis le navigateur en utilisant HTML5 et javascript: serMedia

Voici une autre question de stackoverflow qui résoudra votre problème s'il y en a. accéder à la caméra depuis le navigateur

0
Mostafa Ghadimi

La solution donnée ci-dessus ne fait que sélectionner le fichier restitué à la catégorie i mages uniquement. Mais nous voulons accéder à la caméra ou au périphérique audio ici du navigateur. Donc, pour sauver ce problème, voici l'api du navigateur ("les navigateurs sont puissants maintenant ouais").

getUserMedia (: vrai/faux)

Ici <media_type> Est le type de média auquel vous souhaitez accéder comme l'audio, la vidéo. Vous pouvez le définir comme {audio: true/false} Et {video:true/false}. Mais l'erreur "NotFoundError" sera renvoyée si le média n'est pas trouvé.

Voici par exemple; :>

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

0
Himanshu Joshi

En plus des réponses ci-dessus, vous devrez l'ajouter dans votre fichier index.html, pour que la caméra fonctionne sur PWA

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