Ionic 5 Camera App Tutorial
Vložit
- čas přidán 8. 09. 2024
- Looking for FAST, SECURE & RELIABLE web hosting? Try Siteground - www.siteground...
Download the source code for this app - www.codeswag.c...
This tutorial is a step-by-step guide on how to implement camera functionality in Ionic 5 using the Capacitor Camera plugin. We will explore how to use the device camera to take photos on Android, iOS as well as the Web platform using any connected webcam.
We start off by creating a new Ionic 5 project and integrating the capacitor core & capacitor CLI libraries. We proceed by creating the UI for the Camera app. Then we implement the code that allows us to take photos and display them in-app using the Capacitor Camera Plugin. Finally, we then test our app in the browser as a web app/PWA and then in the Android emulator. The same code can also be used in iOS.
Ionic 5 Development Environment full setup - • How to install Ionic 5...
Support codeswag on Patreon - / codeswag
Social Media Links
-------------------------------
Facebook - / codeswag.co.uk
Twitter - / charisthecoder
Instagram - / codeswag.co.uk
Support codeswag on Patreon - / codeswag
Please support this channel by buying some awesome tech gadgets for yourself or a loved one from our online store at www.codeswag.co.uk/shop
From today morning onwards i watched all ur videos...Im getting interest in Ionic...i want to make app like u
You can do it! Just practice, practice, practice!
@@CodeSwag hola saludos muy buen tuto. Una preguntilla hay manera de descargar una app desde su raíz.? Resulta que elimine una app ionic y me enviaron un link por correo con esta misma app y la visualizo en chrome devtool consola. La raíz entera y me gustaría volver a descargarla para tener en mi escritorio y seguir actualizandola. Hay forma de hacer esto? Saludos y gracia por la tu respuesta
Nice tutorial.. it will be helpfull to know how to capture multiple photos at once without the need to confirm and exit from camera in every shot
Thx , I had a problem using ionic camera but thanks to you I was able to advance in my project 👏
this is real swag, you know how to teach best!
Thank you Golden! Glad you liked it. Please like, share & subscribe 😃
You make it look easy, Amazing, Simple and on point Good job Man!
Glad you like it! Please subscribe
Thank you bro that code is awesome and you explain very well ! I had to do a little course to my classmates about Ionic and you helped me a lot !
Glad I could help!
Amazing combo! Instant mobile and web.
Thanks dude... really appreciate your tutorial
My pleasure bro 👍
Nice content...keep posting videos on ionic5 and also with Ionic-react tutorials..will love that Thanks for the tutorial✋✋
Nice tutorial man. Its on point cant wait for the next one
Thanks bro
@@CodeSwag If you taking tutorial requests can the next please be on recording audio and playing it back?
Life saver! Thank you
Glad it helped! Please share, subscribe and click the bell icon for more great content.
good video
Glad you enjoyed
thank you very much
You are welcome
Thanks for your video man. Very clear explanation. Keep rocking waiting for more videos. I want to learn ionic with vue.js. can you help me pls
You are most welcome! I have an Ionic Vue tutorial coming soon. Please subscribe and click the bell icon to get notified when that video comes out. Cheers.
I'v tired to see on google and youtube about "IONIC 5 - Camera using capacitor", by using below commands...
npm install cordova-plugin-camera
npm install @ionic-native/camera
ionic cap sync
URL: ionicframework.com/docs/native/camera
Everything was good but I fond android build error. Somehow I can't resolve that issue. I spent 5 hours more times.
But finally i found this video tutorial and I'm really surprised that my expectation is fulfill now that should expected. Thank you so much Code Swag!
Thank you so much man! You are great!
Great video! Is it possible to take several pictures without the need to confirm each picture you take?
Thanx it worked! great!!! The link to your source code didn't work for me (dead end?) But I wrote it from your video! I'm curious to find out where and how the camera can save the photo.
Hey hai... Can we work with ionic 5 with Cordova plugins for opening camera and get pictures??
yes you can use Cordova plugins with ionic 5 but capacitor is recommended over Cordova.
Thank you!!!!
Hii!! What video recording platform are you using? I'd love to make a quick Ionic video on Camera and taking videos!!
OBS Studio
@@CodeSwag Thank you!! Can this also Record Video too??
@@CodeSwag We'd like to use this to have Tiktok-like functionality, so cross device compat is important!!
@@errinwright The Camera plugin used in this tutorial does NOT support video.
@@CodeSwag Dang, thanks for the help, would you recommend anything else for video record capability like TikTok??
please help me, my camera opens normal, but when confirming the capture is not shown the img that I have the doom, but it opens an alert to me to select an image. I'm using capacitor v3, are you working alone on v2?, excuse my English, I'm using a translator, I hope your prompt help, greetings
great video!
Hey hi....good tutorial...why dont u make ecommerce app like shopping cart like that....
Yes I'm going to make that tutorial very soon. Please subscribe & click the bell icon so that you get notified each time I upload a new video.
I want to ask . I do My camera when shooting horizontally it is upside down. Can you help me. ?
Hi, very nice tutorial! However iam getting an error: et::ERR_CONNECTION_RESET 431 (Request Header Fields Too Large). Do you know how to fix it?
Please share your code on Github and I can help you to debug
Hello Code Swag, thanks for this tutorial.
How can I take multiple images with the camera and possibly upload it to a RESTFUl API?
Thanks for watching Sasha! Yes you can, perhaps I'll cover this in a future tutorial.
@@CodeSwag Thank you. 🙏 I would be waiting for that tutorial
Do you know a way using a command line without opening the android studio to build the apk?
You can use cordova. First install cordova using the command "npm i cordova" then run "ionic cordova build android"
wow
How to put some html element in front of the camera?
Great video 👍👍
Glad you enjoyed it Please do subscribe for more
Dear sir, THe image is not displaying
is it just me or is the link to the source not working?
What language is this application written in?
Typescript
hey, this its perfecto for me, im starting in ionic and i think this its the best way of
get use to with this function.
i have an error, GET localhost:8100/photo 404 (Not Found), and i declare the poto in de ts like you say photo: SafeResourceUrl. :c u know what would be the problem?
forget it xD i download your code for see the difference and i miss put the [] in the [src]="photo" xD
Glad you figured it out Juliana. Please do subscribe 😃
I had error; ‘typeError object doesn’t support this action’.
email me shop@codeswag.co.uk, show me your code and I will help you to debug 😃
@@CodeSwag ok
@@CodeSwagsent you on your given mail.
will this work if i use cordova?
No it won't, cordona requires different code and a different plugin installation process.
uri homeboy ka iwe???
Wadii
Why is the documentation so bleh, why go through the trouble of making a whole middleware then make bad documentation for it