web-dev-qa-db-ja.com

HTML5：カメラアクセス

私はHTML5。私は次のHTML5携帯電話でカメラにアクセスするためのコード。常に"サポートされていないネイティブWebカメラ"と表示されます。私のモバイルブラウザ（safariおよびAndroid 2.1 web browser）はカメラをサポートしていないようです。

カメラへのアクセスに使用するブラウザを教えてください。

<!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

getUserMediaメソッドは、Firefox 17以降、Chrome 23以降、およびOpera 12+でサポートされています。（ caniuse.com を参照）

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

40
Anthony Faull

これはFirefoxモバイルで動作します。Chromeモバイル、iPhone、Android：

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

HTML5でのオーディオとビデオのキャプチャ を参照してください

サポート：

  • Android 3.0ブラウザ-最初の実装の1つ。このビデオで実際の動作を確認してください。
  • Chrome for Android（0.16）
  • Firefox Mobile 10.0
  • iOS6 SafariおよびChrome（部分サポート）
5
user3475960

この基本的なアプローチをWeb全体から組み合わせることで、いくつかの成功を収めました。

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

次に、PHPファイルで、now（）またはストレージに類似したものを使用して一意のファイル名を生成します。

5
Dave Kanter

私は最近、Bridgeitと呼ばれるツールの使用を開始しました。

これは、ブラウザーのjavascriptと電話のアプリの組み合わせです。これまでのところ、かなりうまく機能しているようです。

http://bridgeit.mobi/

3
OrangeKing89

Operaは、このHTML5拡張機能をサポートする唯一のモバイルブラウザです。

著者からこのスレッドへのメモを参照してください。

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およびChrome（設定を変更した後）は、これまでHTML5カメラ/マイクアクセスをサポートしています。

1
Hasanavi

HTML5はカメラアクセスのサポートを追加しました。次のように使用できます。

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

userは前面カメラ用、environmentは背面カメラ用です。

0
Parth Choudhary