question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

I have given toback true. but still camera hide the html in android.

See original GitHub issue

Here is my code.

View .html

<ion-view title="Sell Your stuff" class="viewc">
	<ion-content scroll="false" class="viewc" has-bouncing="false" style="margin-bottom:0px;">
		<div id="maincamerasect">
			<a href="#/listing" style="text-decoration: none;color: white;font-size:28px;padding: 5%;float: left;">X</a>
			<a ng-click="switchcamera();" style="position:absolute;right:81px;font-size:32px;color:white;top:3%;"><img src="img/refresh.png" style="width:36px;height:36px;" /></a>
			<a style="position:absolute;right:22px;font-size:32px;color:white;top:3%;"><img src="img/flash-on-indicator.png" style="width:36px;height:36px;" /></a>
			<a ng-click="takepic();" style="position:absolute;font-size:32px;color:white;bottom:5%;text-align:center;width:100%;left:0;"><img src="img/takephoto.png" style="width:80px;height:80px;" /></a>
		</div>
	</ion-content>
</ion-view>

controller.js

      CameraPreview.startCamera({x: 0, y: 0, width: window.screen.width, height: window.screen.height, camera: "front", toBack: true, tapPhoto: true, previewDrag: false});

     $scope.switchcamera = function(){
		CameraPreview.switchCamera();
	}
	
	
	$scope.takepic = function(){
		CameraPreview.takePicture({width:200, height:200, quality: 85}, function(base64PictureData){
		  //$scope.inputPicture.content = 'data:image/jpeg;base64,'+base64PictureData;
		 
		});
	}

Issue Analytics

  • State:open
  • Created 6 years ago
  • Comments:14 (1 by maintainers)

github_iconTop GitHub Comments

3reactions
h-moralescommented, Mar 26, 2017

The idea of toBack=true is that the camera is at the back of your app. You have to make a hole in your app for you to show the camera. To do that you have to make every layer transparent.

aside from doing this:

html, body { background-color: transparent; }

you also need to make your ion-view and ion-content transparent.

body.camera-transparent, .camera-transparent ion-nav-view, .camera-transparent ion-view { background-color: transparent !important; }

I set .camera-transparent class to body element only when its in the page where i need to show the camera.

2reactions
nandanshanubhagcommented, Nov 14, 2017

I removed native transition plug-in and now it is working fine any workaround for this issue?? I need the native transition in my app 😦

thanks

Read more comments on GitHub >

github_iconTop Results From Across the Web

Ionic 4: Cordova Camera Preview is hiding html-elements ...
Ionic 4: Cordova Camera Preview is hiding html-elements, even though "toBack" is set to "true" Save this question. Show activity on this post. ......
Read more >
cordova-plugin-camera-preview-alwaysmkt - npm
This is a fork of cordova-plugin-camera-preview. Cordova plugin that allows camera interaction from Javascript and HTML.
Read more >
Camera.Parameters | Android Developers
To make camera parameters take effect, applications have to call ... Returns true if auto-exposure is currently locked, and false otherwise.
Read more >
10 handy hidden Android features you probably forget to use
Android is practically overflowing with options, and it's easy to lose track of some useful stuff along the way.
Read more >
Camera Preview - Ionic Native
switchCamera(). Switch from the rear camera and front camera, if available. Returns: Promise<any>. hide().
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found