web-dev-qa-db-ja.com

Androidでhtml内のカメラビューを表示してから、写真を撮る

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

ありがとう

androidioscordovaphonegap-pluginscordova-plugins
13
Imran Omar Bukhsh

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

HTMLコードからカメラプレビューを開始します。プレビューボックスをドラッグします。カメラの色の効果を設定する（AndroidおよびiOS）、プレビューボックスをHTMLコンテンツの後ろに送信する、カメラのプレビューボックスのカスタム位置を設定する、プレビューボックスのカスタムサイズを設定する、HTMLのインタラクティブ機能を維持する

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

これで、CordovaCameraPreviewプラグインをOnlinePhoneGapからもインストールできます。したがって、CLIを使用せずに、CLIを追加することで、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バージョンでのビルドに失敗しています。

13
Ekta Jayswal

私は自分のプロジェクトの1つでそれを行いました。 navigator.getUserMedia（）を確認してください。 ARゲームなど、ウェブカメラやブラウザでできることはたくさんあります。基本的な例を次に示します。

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); 
    }

ライブデモ：

個人プロジェクト

その他のリソース、これは私が使用したものです：

ウェブカメラアクセス

更新：

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

4
sanjeev mk

camera.getPictureからcordova-plugin-cameraを使用するか、navigator.device.capture.captureVideoからcordova-plugin-media-captureを使用できます。

var getUserMedia = navigator.getUserMedia 
        || navigator.webkitGetUserMedia 
        || navigator.mozGetUserMedia 
        || navigator.msGetUserMedia 
        || navigator.device.capture.captureVideo 
        || navigator.camera 
        || camera.getPicture;

それが役に立てば幸い。

0
SamYah