web-dev-qa-db-fra.com

HTML5: accès à la caméra

Je suis assez nouveau pour HTML5. J'essaie ce qui suit HTML5 code pour accéder à la caméra sur mon téléphone portable. Il affiche toujours "Caméra Web native non prise en charge". Il semble que mon navigateur mobile (safari et Android 2.1) ne prend pas en charge la caméra.

Pourriez-vous me dire quel navigateur dois-je utiliser pour accéder à la caméra?

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, maximum-scale=1.0">
    <style>
        body {width: 100%;}
        canvas {display: none;}
    </style>
    <script>
        var video, canvas, msg;
        var load = function () {
            video  = document.getElementById('video');
            canvas = document.getElementById('canvas');
            msg    = document.getElementById('error');
            if( navigator.getUserMedia ) {
                video.onclick = function () {
                    var context = canvas.getContext("2d");
                    context.drawImage(video, 0, 0, 240, 320);
                    var image = {"demo" : {
                        "type"  : "device",
                        "image" : canvas.toDataURL("image/png")
                    }};
                };

                var success = function ( stream ) {
                    video.src = stream;
                };

                var error = function ( err ) {
                    msg.innerHTML = "Error: " + err.code;
                };

                navigator.getUserMedia('video', success, error);

            } else {
                msg.innerHTML = "Native web camera not supported :(";
            }

        };

        window.addEventListener('DOMContentLoaded', load, false);
    </script>
</head>
<body>
    <video  id="video" width="240" height="320" autoplay> </video>
    <p      id="error">Click on the video to send a snapshot to the receiving screen</p>
    <canvas id="canvas" width="240" height="320"> </canvas>
</body>
</html>
html5cameranative
38
love sunset

La méthode getUserMedia est désormais prise en charge sur Firefox 17+, Chrome 23+ et Opera 12+. (Voir caniuse.com )

Screenshot of the CanIUse.com support grid as of 2/24/12

40
Anthony Faull

Cela fonctionne sur Firefox mobile, Chrome mobile, iPhone et Android:

<input type="file" id="mypic" accept="image/*">
14
Jez D
<input type="file" accept="image/*;capture=camera">

Voir Capture audio et vidéo en HTML5

Soutien:

  • Navigateur Android 3.0 - l'une des premières implémentations. Regardez cette vidéo pour la voir en action.
  • Chrome pour Android (0,16)
  • Firefox Mobile 10.0
  • iOS6 Safari et Chrome (prise en charge partielle)
5
user3475960

Nous avons eu un certain succès avec cette approche de base bricolée à travers le Web:

<form method="post" action="takephoto.php" enctype="multipart/form-data">
<input type="file" accept="image/*" name="file">
<input type="submit">
</form>

Ensuite, dans le fichier PHP nous générons des noms de fichiers uniques en utilisant now () ou quelque chose de similaire pour le stockage.

5
Dave Kanter

J'ai récemment commencé à travailler avec un outil appelé Bridgeit.

Il s'agit d'une combinaison de javascript dans le navigateur et d'une application sur le téléphone. Cela semble assez bien fonctionner jusqu'à présent.

http://bridgeit.mobi/

3
OrangeKing89

Je pense que Opera est le seul navigateur mobile qui prend en charge cette extension HTML5.

Voir la note de l'auteur sur ce sujet;

http://francisshanahan.com/index.php/2011/stream-a-webcam-using-javascript-nodejs-Android-opera-mobile-web-sockets-and-html5/

3
Roger

Opera Desktop, Opera mobile et Chrome (après avoir modifié une configuration)) prend en charge l'accès à la caméra/au microphone HTML5 jusqu'à présent.

1
Hasanavi

HTML5 a ajouté la prise en charge de l'accès à la caméra, vous pouvez l'utiliser comme ceci:

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

Où user est pour la caméra avant et environment est pour la caméra arrière.

0
Parth Choudhary