13

JavaScript を使用して写真を撮る前に、html 内にライブ カメラ ビューを表示するビュー (たとえば、 div に埋め込まれたもの) はありますか? PhoneGap を試してみましたが、新しいカメラ アプリが完全に起動し、HTML Web アプリから完全に離れてから、それに戻ります。アプリに何かを埋め込む必要がある

ありがとう

4

4 に答える 4

13

mbppower /CordovaCameraPreviewプラグイン (android、ios 用)を Cordova/phonegap アプリケーションにインストールすると、HTML コードからのカメラ操作が可能になります。本当に素晴らしいプラグインです。次のような機能にアクセスできます。

HTML コードからカメラ プレビューを開始します。プレビュー ボックスをドラッグします。カメラの色効果を設定する (Android および iOS)、プレビュー ボックスを HTML コンテンツの背面に移動する、カメラ プレビュー ボックスのカスタム位置を設定する、プレビュー ボックスのカスタム サイズを設定する、HTML のインタラクティブ性を維持する。

または、要件に適合する場合は、アプリケーションにdonaldp24/CanvasCameraプラグインを使用することもできます。これは、Android と iOS の両方のプラットフォームでサポートされています。iOSでは正常に動作していますが、Androidでは動作していません。

オンライン PhoneGap からも CordovaCameraPreview プラグインをインストールできるようになりました。したがって、CLI を使用せずに、これを追加することで直接使用できます。

<gap:plugin name="com.mbppower.camerapreview" version="0.0.8" source="plugins.cordova.io" />

config.xml ファイルで、ApplicationTemplate.apk/.ipa を作成します。これに関する詳細については、私に尋ねることができます。お力になれて、嬉しいです。

更新: 2017 年 10 月 10 日当時はうまく機能していましたが、donaldp24/CanvasCamera はメンテナンスされなくなり、現在、最新の Cordova バージョンでのビルドに失敗しています。

于 2015-04-21T05:00:20.067 に答える
4

私は私のプロジェクトの1つのためにそれをしました。navigator.getUserMedia() を確認してください。AR ゲームなど、Web カメラとブラウザでできることはたくさんあります。以下は基本的な例です。

HTML:

    <html>
    <head>
    </head>

    <body>
       <form><input type='button' id='snapshot' value="snapshot"/></form> 
       <video autoplay></video>
       <canvas id='canvas' width='100' height='100'></canvas> 
       <script type="text/javascript" src="findit.js"></script>
    </body>

    </html>

findit.js

    var onFailSoHard = function(e)
    {
            console.log('failed',e);
    }

    window.URL = window.URL || window.webkitURL ;
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;

    var video = document.querySelector('video');

    if(navigator.getUserMedia)
    {
        navigator.getUserMedia({video: true},function(stream) {
        video.src = window.URL.createObjectURL(stream);
        },onFailSoHard);
    }

    document.getElementById('snapshot').onclick = function() { 
        var canvas = document.getElementById('canvas'); 
        var ctx = canvas.getContext('2d'); 
        ctx.drawImage(video,0,0); 
    }

ライブデモ:

個人的なプロジェクト

より多くのリソース、これは私が使用したものです：

ウェブカメラへのアクセス

アップデート：

このソリューションは、デバイスに前面カメラがある場合にのみ有効です。これは基本的に「ウェブカメラ」ソリューションです。あなたのケースでうまくいくかどうかはわかりません。念のため、リソースを確認してください。

于 2013-01-05T21:24:03.270 に答える
-1

JavaScript を使用してカメラ アプリに直接アクセスすることはできません。これを行うには、カスタムの PhoneGap (Cordova) プラグインを作成することもできます。

于 2013-01-05T21:07:38.677 に答える