Question

我有以下问题：

我需要用离子拍摄一些东西，但我需要在应用程序内实时显示相机......我已经尝试过使用他们在网站上使用的ng cordova捕获插件：

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

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

是否有任何一个与离子一起使用？

Answer 1

答案是否

Cordova插件调用本机应用程序＆＃34;后面＆＃34;你的应用。这意味着您将无法拥有相同的页面： - HTML5内容 - 致电原生相机

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

Answer 2

ionic cordova platform add browser

ionic cordova build browser或仅使用ionic cordova browser

ionic将建立自动重建

Answer 3

检查一下： https://github.com/donaldp24/CanvasCameraPlugin

“该插件的目的是捕获视频以预览网页上的相机（画布标签），并拍摄具有用户定义质量/尺寸的照片。”

以下是链接的完整示例：

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

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

3 个答案: