Camera preview in tabs (ionic 3)
See original GitHub issuehi i’m making an app using ionic and cordova. especially cordova camera preview plugin. my app has 3 tabs and i want to put camera preview one of 3 tabs.
my camera tab,
export class CameraPage {
constructor(private platform : Platform, public navCtrl: NavController, public navParams: NavParams, private cameraPreview: CameraPreview) {
this.platform.ready().then(()=> {
let options = {
x: 0,
y: 0,
width: window.screen.width,
height: window.screen.height,
camera: 'rear',
tapPhoto: true,
previewDrag: true,
toBack: true,
}
this.cameraPreview.startCamera(options).then(
(res)=> {
console.log(res)
},
(err) => {
console.log(err)
});
})
}
ionViewDidLoad() {
console.log('ionViewDidLoad CameraPage');
}
and at the bottom of the “src/theme/variables.scss” file
$background-color: transparent;
“src/app/app/scss” file
html, body, .ion-app, .ion-content {
background-color: transparent;
}
when i text the app in my iphone, console says
ionViewDidLoad MainTabsPage ionViewDidLoad CameraPage Ionic Native: deviceready event fired after 1396 ms Camera already started!
my info : cli packages:
@ionic/cli-utils : 1.6.0
ionic (Ionic CLI) : 3.6.0
global packages:
Cordova CLI : 7.0.1
local packages:
@ionic/app-scripts : 2.1.4
@ionic/cli-plugin-cordova : 1.4.1
@ionic/cli-plugin-ionic-angular : 1.3.2
Cordova Platforms : android 6.2.3 ios 4.4.0
Ionic Framework : ionic-angular 3.5.3
System:
Node : v8.1.3
OS : macOS Sierra
Xcode : Xcode 8.3.3 Build version 8E3004b
ios-deploy : 1.9.2
npm : 5.4.1
- i don’t figure out why my console says “Camera already started”
- i don’t know why the screen is black. I made my background-color transparent
Issue Analytics
- State:
- Created 6 years ago
- Comments:6
Top Results From Across the Web
Camera Preview - Ionic Native
startCamera(options). Starts the camera preview instance. Param, Type, Details. options, CameraPreviewOptions ; stopCamera(). Stops the camera preview instance.
Read more >Ionic Camera Preview not visible - Stack Overflow
I have a tabs layout and in my first tab I placed a fab with a click event called 'takePicture()'. In this method...
Read more >Ionic 5 Camera Preview on Screen Floating Camera View In ...
1) Install/ Update Ionic CLI · 2) Create an Ionic 5 Angular Application · 3) Install Camera Preview Plugin · 4) Update App...
Read more >How to create a live broadcasting app using Cordova and ...
ionic start bambuser-examplebroadcaster-ionic tabs --cordova --no-link --bundle-id com.example.bambuserbroadcaster. To preview the app skeleton in a browser ...
Read more >@ionic-native/camera-preview 4.5.3 vulnerabilities | Snyk
Learn more about known @ionic-native/camera-preview 4.5.3 vulnerabilities and licenses detected.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Does this css help?
html, body, ion-app, div.nav-decor, .ion-content, .app-root { background-color: transparent !important; }
@hyoungbin Please close this issue. It’s resolved.