javascript - Cordova Camera & Capture -
i have tried many questions cordova camera here still camera not launching. using cordova , plain html css , javascript. added platform android.
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git this command modify platform-specific configuration settings
(in app/res/xml/config.xml)
<feature name="camera"> <param name="android-package" value="org.apache.cordova.cameralauncher" /> (in app/androidmanifest)
<uses-permission android:name="android.permission.write_external_storage" /> then wrote index.html follows
<!doctype html>
<meta http-equiv="content-security-policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> <link rel="stylesheet" type="text/css" href="css/index.css"> <title>hello world</title> </head> <body> <div class="app"> <h1>apache cordova</h1> <div id="deviceready" class="blink"> <p class="event listening">connecting device</p> <p class="event received">device ready</p> </div> <h1>apache cordova test zone</h1> <div class="test-zone" id="test-zone"> <image id="image" width="100%" height="100%" /> </div> </div> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> and index.js follows-
var app = { initialize: function() { this.bindevents(); this.testzone = {}; }, // bind event listeners // // bind events required on startup. common events are: // 'load', 'deviceready', 'offline', , 'online'. bindevents: function() { document.addeventlistener('deviceready', this.ondeviceready, false); }, // deviceready event handler // // scope of 'this' event. in order call 'receivedevent' // function, must explicitly call 'app.receivedevent(...);' ondeviceready: function() { app.receivedevent('deviceready'); app.testzone = document.getelementbyid("test-zone"); app.usegetpicture(); }, usegetpicture: function(){ navigator.camera.getpicture( app.onphotosuccess, app.onfail, { quality : 75, destinationtype : camera.destinationtype.data_url, sourcetype : camera.picturesourcetype.camera, encodingtype : camera.encodingtype.jpeg, correctorientation : true } ); }, onphotosuccess: function(imagedata){ var image = document.getelementbyid("image"); image.src = "data:image/jpeg;base64," + imagedata; }, onfail: function(message){ alert('failed: '+message); } // update dom on received event receivedevent: function(id) { var parentelement = document.getelementbyid(id); var listeningelement = parentelement.queryselector('.listening'); var receivedelement = parentelement.queryselector('.received'); listeningelement.setattribute('style', 'display:none;'); receivedelement.setattribute('style', 'display:block;'); console.log('received event: ' + id); } }; app.initialize(); after build camera doesn't appear. not getting making wrong or right way of doing this.
Comments
Post a Comment