在离子应用程序中使用相机

Question

我有以下问题：

我需要用 ionic 拍摄一些东西，但我需要在应用程序中实时显示相机...我尝试使用 ng cordova capture 插件，就像他们在他们的网站上使用的那样：

 var options = { limit: 3, duration: 15 };

$cordovaCapture.captureVideo(options).then(function(videoData) {
  // Success! Video data is here
}, function(err) {
  // An error occurred. Show a message to the user
});

但不幸的是，当它加载应用程序时会落后并调用本机相机应用程序：/

用 ionic 有什么优惠吗？

Answer 1

The answer is no

Cordova 插件调用本机应用程序 "behind" 您的应用程序。这意味着您将无法在同一页面中拥有： - HTML5 内容 - 调用原生相机

如果您同时需要两者，我建议您： - 开发一个 cordova 插件，这意味着编码 Android / iOS ... - 开发一个本地应用程序，这意味着编码 Android / iOS ..

Answer 2

看看这个： https://github.com/donaldp24/CanvasCameraPlugin

"The purpose of the plugin is to capture video to preview camera on web page(canvas tag) and to take photos with user defined quality / dimension."

这是来自 link 的完整示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <meta name="msapplication-tap-highlight" content="no" />
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">
            <h1>Apache Cordova</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>

            <h2> Camera Position </h2>
            <input type="radio" name="deviceposition" id="deviceposition_back" value="Back" onclick="onChangeDevicePosition();"/>
            <label for="deviceposition_back">Back</label>
            <br/>
            <input type="radio" name="deviceposition" id="deviceposition_front" value="Front" onclick="onChangeDevicePosition();"/>
            <label for="deviceposition_front">Front</label>


            <h2> Flash Mode </h2>
            <input type="radio" name="flashmode" id="flashmode_off" value="Off" onclick="onChangeFlashMode();"/>
            <label for="flashmode_off">Off</label>
            <br/>
            <input type="radio" name="flashmode" id="flashmode_on" value="On" onclick="onChangeFlashMode();"/>
            <label for="flashmode_on">On</label>
            <br/>
            <input type="radio" name="flashmode" id="flashmode_auto" value="Auto" onclick="onChangeFlashMode();"/>
            <label for="flashmode_auto">Auto</label>
            <br/>

            <input type="button" value="Take a picture" onclick="onTakePicture();" />


        </div>

    <!— camera preview canvas —>
        <canvas id="camera" width="352" height="288" style="border:2px"></canvas>

        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>

        <script>
            document.addEventListener("deviceready", function() {
                                          canvasMain = document.getElementById("camera");
                                          CanvasCamera.initialize(canvasMain);
                                          // define options
                                          var opt = {
                                              quality: 75,
                                              destinationType: CanvasCamera.DestinationType.DATA_URL,
                                              encodingType: CanvasCamera.EncodingType.JPEG,
                                              saveToPhotoAlbum:true,
                                              correctOrientation:true,
                                              width:640,
                                              height:480
                                          };
                                          CanvasCamera.start(opt);
                                      });

            function onChangeDevicePosition() {

                var newDevicePosition = CanvasCamera.CameraPosition.BACK;
                if (document.getElementById("deviceposition_back").checked)
                {
                    newDevicePosition = CanvasCamera.CameraPosition.BACK;
                }
                else if (document.getElementById("deviceposition_front").checked)
                {
                    newDevicePosition = CanvasCamera.CameraPosition.FRONT;
                }
                //
                CanvasCamera.setCameraPosition(newDevicePosition);
            }

            function onChangeFlashMode() {

                var newFlashMode = CanvasCamera.FlashMode.OFF;
                if (document.getElementById("flashmode_off").checked)
                {
                    newFlashMode = CanvasCamera.FlashMode.OFF;
                }
                else if (document.getElementById("flashmode_on").checked)
                {
                    newFlashMode = CanvasCamera.FlashMode.ON;
                }
                else if (document.getElementById("flashmode_auto").checked)
                {
                    newFlashMode = CanvasCamera.FlashMode.AUTO;
                }

                CanvasCamera.setFlashMode(newFlashMode);
            }

            function onTakePicture() {
                CanvasCamera.takePicture(onTakeSuccess);
            }

            function onTakeSuccess(data) {
                //
            }
        </script>
    </body>
</html>

Answer 3

ionic cordova platform add browser

ionic cordova build browser 或者直接使用 ionic cordova browser

ionic 将构建自动重建

在离子应用程序中使用相机

Using camera inside an ionic app

ionic-framework

cordova-plugins