40 votes

HTML5: accès à la caméra

Je suis assez nouveau pour HTML5 . J'essaie le code HTML5 suivant 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 (navigateur Web 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>
 

40voto

Anthony Faull Points 6490

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

Capture d'écran de la grille de support CanIUse.com au 24/02/12

14voto

Jez D Points 333

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

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

5voto

Dave Kaye Points 355

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.

3voto

Roger Points 11711

Je pense qu'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/

3voto

OrangeKing89 Points 67

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 fonctionner assez bien jusqu'à présent.

http://bridgeit.mobi/

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X