CODEWITHSUNDEEP
ionic-frameworkcordova-plugins
Thiago Ramires
Thiago Ramires

Reputation: 55

Using camera inside an ionic app

I have the following problem:

I need to film something with ionic but i need the camera been displayed in real time inside the app... I've tryied to use the ng cordova capture plugin like they use in their web site:

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

but unfortunatelly when it loads the app goes behind and calls the native camera app:/

is there any one off duing this with ionic?

Upvotes: 1

Views: 1950

Answers (3)

Ryu
Ryu

Reputation: 25

ionic cordova platform add browser

ionic cordova build browser or just use ionic cordova browser

ionic will build auto rebuild

Upvotes: 0

h3n
h3n

Reputation: 5248

Check this out: 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."

Here's a full example from the 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>

Upvotes: 1

aorfevre
aorfevre

Reputation: 5064

The answer is no

Cordova plugins calls native application "behind" your app. This means that you will not be able to have in the same page : - HTML5 content - Call to native camera

If you need both at the same time, I suggest you to either : - develop a cordova plugin , this means coding for Android / iOS ... - develop a native app , this means coding for Android / iOS ..

Upvotes: 2

Related Questions