It just driving me crazy why it is not working. It should be very simple.
I added the plugin using the CLI command. I am sure it is a beginner question, but I just don't get it.
Then I have a "button" called "prendrephoto1". When click it should take a picture. But when button click, just nothing happen on the Xcode Ios Simulator.
I use JqueryMobile and Cordova.
$(document).ready(function(){
var photo1;
var photo2;
$("#prendrephoto1").bind("click",prendrephoto);
function prendrephoto(){
navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
destinationType: Camera.DestinationType.DATA_URL
});
function onSuccess(imageData) {
var image = document.getElementById('myImage');
image.src = "data:image/jpeg;base64," + imageData;
}
function onFail(message) {
alert('ca ne marche pas');
alert('Failed because: ' + message);
}
};
//DERNIERE BALISE JQUERY
});
The iOS simulator does not provide capture simulation, you'll need to run your app on an actual device to retrieve a picture from the camera.
Related
I've search and tried these plugins:
qr_bar_code_scanner_dialog: ^0.0.5
ai_barcode_scanner: ^0.0.1+1
But none of these works when I tried to open my Web app in my phones browser. The screen turns black when I press my Button that should have started the scanner.
I've seen that many others have problems with this. So I hope there is a solution out there that works for me.
The whole reason I use Flutter is that it seems to be the easiest way to develope an app for both Android and iOS, using Web.
In debug mode everything works fine with desktop browser and phone.
But not when I have deployed my app with Firebase Hosting and use the phone browser.
IconButton(
onPressed: (){
//scanQR();
_qrBarCodeScannerDialogPlugin.getScannedQrBarCode(
context: context,
onCode: (code) {
print(code);
setState(() {
this.code = code;
});
});
},
icon: const Icon(Icons.qr_code_scanner),
iconSize: 130,
tooltip: 'Scan',
color: const Color.fromRGBO(28,37,44,1),
),
You can combine two plugins - camera and flutter_barcode_sdk - to implement a web QR scanner app.
flutter_barcode_sdk: provide API to decode barcode and Qr code from byte array, supporting Windows, Linux, macOS, Android, iOS and Web:
List<BarcodeResult> results =
await _barcodeReader.decodeImageBuffer(
byteData.buffer.asUint8List(),
image. Width,
image. Height,
byteData.lengthInBytes ~/ image.height,
ImagePixelFormat.IPF_ARGB_8888.index);
camera: the official camera plugin that can return camera frame in real-time:
await _controller.startImageStream((CameraImage availableImage) async {
int format = ImagePixelFormat.IPF_NV21.index;
switch (availableImage.format.group) {
case ImageFormatGroup.yuv420:
format = ImagePixelFormat.IPF_NV21.index;
break;
case ImageFormatGroup.bgra8888:
format = ImagePixelFormat.IPF_ARGB_8888.index;
break;
default:
format = ImagePixelFormat.IPF_RGB_888.index;
}
_barcodeReader
.decodeImageBuffer(
availableImage.planes[0].bytes,
availableImage.width,
availableImage.height,
availableImage.planes[0].bytesPerRow,
format)
.then((results) {
// TODO
}).catchError((error) {
});
});
I need some cordova plugin or function, which can stream video from device camera on ios. GetUserMedia is not supported on iOS.
I tryied Crosswalk project, it should support WebRTC (getUserMedia), but it doesnt work on phonegap build.
So I tryied cordova-camera-preview, but I am not able to make it fullscreen, because camera stream is shrinked.
Is there anybody, who used fullscreen video in cordova application?
<script>
document.addEventListener("deviceready", function () {
app_ready();
}, false);
function app_ready() {
var vw = window.innerWidth;
var vh = window.innerHeight;
var tapEnabled = true; //enable tap take picture
var dragEnabled = true; //enable preview box drag across the screen
var toBack = true; //send preview box to the back of the webview
var rect = {x: 0, y: 0, width: vw, height: vh};
cordova.plugins.camerapreview.startCamera(rect, "front", tapEnabled, dragEnabled, toBack);
}
</script>
After deep searching I found out some augmented reality plugin called "ezAR videooverlay", check out npm -> https://www.npmjs.com/package/com.ezartech.ezar.videooverlay
Hope it helps someone
I am working on a phonegap (versino -4.0) application and we have a functionality to get image either from camera or from photo library.
the code we are using for getting image from photolibrary is
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: navigator.camera.DestinationType.FILE_URI,
sourceType: source });
This is the example from here
By this code photolibrary is loading in iphone but not working on iPad.
Can you please guide us if anything wrong is here?
Thank you so much for any hint or solution.
Try
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
destinationType: destinationType.DATA_URL
});
Also I think popover must be involved for iPad. Check examples again from your link.
setTimeout(function() {
// do your thing here!
}, 0);
Have been testing a Cordova app on iPhone 4S and iPad Mini and it has this weird behavior, that when I launch the camera functonality with this code:
$(document).on('click', '.camera', function() {
if (!navigator.camera) {
alert("Camera API not supported", "Error");
return;
}
var options = {
quality: 65,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: 1,
// 0:Photo Library, 1=Camera, 2=Saved Album
encodingType: 0,
// 0=JPG 1=PNG
correctOrientation: true,
targetWidth: 700,
targetHeight: 700
};
function addHiddenElement(elementId, imgData) {
$("<input>", {
type: "hidden",
name: "imagedata" + elementId,
id: "imagedata" + elementId,
value: "data:image/jpeg;base64," + imgData
}).insertAfter("#" + elementId);
}
function imageData(elementId) {
navigator.camera.getPicture(function(imgData) {
addHiddenElement(elementId, imgData);
//return imgData;
}, function() {
alert('Error, camera functionality not working');
}, options);
}
imageData(this.id);
});
Half the time it works fine, but the other half nothing happens. But if I go back to the iOS home screen and then go back the app again (i.e. not restarting the app, just switching back and forth) then the camera works.
I suspect this could be a memory problem but not sure what to do about it.
Any ideas?
I have odd problem, I can't get any answer when I search anywhere.
I develop Windows Phone 8 with phonegap-2.9.0 ,
Here is my code:
navigator.camera.getPicture(picSuccess, picFail, {
quality: 50,
destinationType: navigator.camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM
});
function picSuccess(imageURI) {
var image = document.getElementById('upimage');
alert(imageURI);
image.src = imageURI;
$('#camera_status').html("OK");
}
function picFail(message) {
//alert('Failed because: ' + message);
$('#camera_status').html("error" + message);
}
In HTML5, I also have
after getPicture, It was success and alert show: ///CapturedImagesCache/wp_20131205_001.jpg
$('#camera_status').html("OK"); <------ this one also show no problem.
but <img> tag always doesn't show picture on screen!!!!!!
I think problem with where is HTML page,I put HTML5 page in local,It is work,but when I put HTML5 page on my server that it doesn't work, because img src="///capturedImagescache/wp_20131205_001.jpg" not in my web server.
Anyone can help me ?
Thanks.