Introduction to Custom Camera Overlays
Hey, my name's what's up? Welcome to a new quick win, and today we're talking about the camera preview overlay custom stuff. Because when you use the regular camera with Cordova or Capacitor, you usually get this standard dialogue you know from your iOS or Android phone. But if you want to add elements like perhaps a little box, a little icon of your company, anything like this, you need a custom plug-in. And that's exactly what we're gonna do today.
So we will use from the Capacitor community the camera preview plug-in. Actually, this plug-in has a few problems. Um, so for iOS there was something that still needs to be merged when I was using this. For Android there were also little problems, so I hope when the video comes out these problems will be resolved. But anyway, let's get started.
Um, first of all, you can start a blank new Ionic application with Capacitor enabled and then install the @capacitor-community/camera-preview package. Also, just go ahead, run the first ionic build and add the platforms because then you're good to go. And we can also tweak the MainActivity quickly. That's also, um, I might have said this in the past, the standard for Capacitor plug-ins. So you copy this little block the author of the plugin usually puts in there. In this case, I had to figure out the actual package of the um, camera preview. But if you want to, just check out the Android folder and dive into this and then you will in the end see the actual ideas. So that's what you need to import in the MainActivity, which you can find in android/app/src/main uh, your bundle ID MainActivity.
Setting Up and Opening the Camera Preview
Great. Once this is done, we can dive into the actual usage of this plugin. So first of all, we're gonna import a few things. Let's quickly go through it. As usual, we're gonna import the plugins from capacitor core and destructure it so we can access the cameraPreview object. Now these are just a few options that we can get from the camera preview and this block is really important. If you want to try this functionality on the web, you need to import plugins like this because only then they will be registered internally. And that's just what you need.
Um, let's get started. I added a few things like an image where we'll store our captured image and a little check if the camera is currently active. And actually torchActive is not used anymore. I wanted to use the torch, but there were a few problems as well. So I just skipped that part. So let's start with opening the camera. To open the camera, we can create a few options. If you want to check out the typing, but there's actually not too much. We don't really need the width or height. We need the position, the class name, and the parent. That's what we use for the position, so rear or front camera. Um, the parent and the class name are objects from our HTML page, so we will dive into this in a second as well. And then just call cameraPreview.start. And if you want to keep like track of the active state of the camera, then we can set this to true.
Now the interesting part in our HTML is well not this, this is just an image that we will display once we get an image captured. And also a button to open the camera. So we can actually test all of this in our browser, which is pretty nice. I'm going to show you the preview on the device later as well. So for now, we can open the camera and we cannot read property appendChild of null. This is actually correct because the camera plug-in um, looks in your page for a parent object with the ID camera-preview. So you should create a div somewhere in your page like this, and give it the ID camera-preview and I will also just use the class camera-preview. With that in place, um, the result is this. And I hope I didn't mess up my sound or anything now with this camera. Okay, I think we're good. So you can see uh, there's a nice little uh camera preview of myself on the screen. It looks kinda okay.
Adding UI Elements to the Overlay
But on a phone this will actually not work like this. We will need a lot of CSS to achieve this because, um, as far as I know the camera is hidden and where are my buttons? Um, didn't I remove the styling? That's really crazy. There, I can see something. But anyway, we need a few more buttons here. Of course, on the overlay you could also display an image. So let's go ahead and do this.
In terms of the buttons, I came up with a little check if the camera is active. And then I display a little image which I've stored in my asset folder. And then I've added three buttons to stop the camera, to click capture image, and to flip the camera between rear and front. All of them have an ID so we can just target them with the CSS a bit easier. And let's see how this will look now within our application. So they're hidden now. I know I look like this and why is my camera up here anyway? Interesting. Now I wanted to have them above the image, which means I need an absolute position for all of these three things and my image. I guess it's here, the Ionic logo is white. So if I would use something like background: red, we would see it. So there's the logo. It doesn't really look like a camera preview with icons above it, but a bit more CSS and we can do it.
Styling the Overlay with CSS and ::part
So um, first of all, for our image. As I said, this line is actually important for devices, I think so. Because in my tests, a lot of examples didn't work. A lot of things I tried didn't work. In the end, this is what's left, because I think we need to make the background um, transparent of the ion-content as the camera is basically displayed behind the content. Um, but actually it's displayed in the camera preview, so I'm not 100% sure. Maybe if we would give this an index as well, it could even work without this, but I currently fear to break my code. So the overlay has an absolute position on the camera preview as well, might not even be needed perhaps. And the image overlay is our Ionic image.
For the rest of the buttons, so the capture, the flip and the close, I also came up with an absolute position, which looks like this. So for capture, it's right in the middle, basically. Uh, the close button is more to the left, and the flip button is more to the right. And as a result of this, we should now see a little bit different picture. So, perhaps if I make this uh, device... no, doesn't really get better. Um, so the camera preview here is still really a bit limited, but we can see that we got a preview camera preview, at least. Um, that's the running. I really fear that it switches to a different camera and all my recording is gone. Uh, we got the buttons which should be above the recording once we check this out. We got the image overlay. Um, there's just one more thing I wanted to show you since in a recent article I saw CSS parts, and they now arrived with an Ionic element. So a quick learning in here as well.
If you check out the buttons, can I check out my button? Uh, you should see that some elements within the shadow component have a part. I actually can't find it. Okay, it's in here, of course. Um, so... yeah, that's really when I want to show you something cool, it's not going to happen. Okay, here. Here's the part native. And we can target this part and inject our CSS rules, although this is a web component and usually the style is encapsulated. And the way to do this is by using the name of the component, or ion-item, ion-button, whatever, but we got the ID anyway. And then part and the name of the part. And then you can write standard CSS rules and they will be injected into this. So I wanted to make these buttons round. And let's check it out, open the camera again, and now the buttons are round. I'm actually not sure if there was maybe a CSS property for this, but I think this wasn't possible in the past. So we got a kind of nice example here.
Implementing Camera Control Functions
Let's try to capture an image... ah, okay, we haven't implemented the function. That makes sense.
Um, okay maybe we get back to our implementation and add the stopCamera... it's too late today. And we add the captureImage and we add flipCamera. In fact, flipCamera didn't really work for me as I expected because usually you should be able to use cameraPreview.flip just like this. But if we check out cameraPreview um, the definition file, we see there's only start, stop, capture, flashModes, and the flashMode stuff. So right now, um, flip is not in the interface implementation. It is actually in the native implementation. So on a native iOS/Android device this will work nicely, but you might get an error on the web. But perhaps this is also already merged once this video goes live.
So to stop the camera, nothing really to do, just call cameraPreview.stop and if you want to keep track of your state. And then also to capture an image, basically the current image you see in the frame, you can use again some options, uh, which are pretty limited to only quality. And then you can get the result by calling capture on the camera preview with your options. Result needs this little addition if you directly want to display it in your view. Otherwise it's just the base64 string without this information. So let's one more time try to open the camera and capture an image. Capture an image... okay, capture. Okay, looks like the buttons on the web aren't really accessible because the video is actually above them. So that's kind of interesting. Let me quickly figure this out. Well, let's just add a little index to our three buttons uh, to fix this quickly. So flip, close, and capture, let's just give it 11 because I think the rest has 10. So then we should be finally able... okay, now it finally works. I'm glad that I could capture that image. It works on the web.
Final Demo on a Physical Device
Let's also quickly check it out on the device now. Okay, here's the epic application on my phone and there we go. Inception, I love videos like this. Oh, the inception is real in here. That's the best application tutorial I've ever made. So I can capture an image, there we go. Captured image. I can open the camera again. I can actually flip it as well, without breaking my camera. So I notice I just uh, messed up the camera settings again, sorry for the bad image. And we see that we got all the overlays, we got the um, image, the Ionic image we added. Uh, we got the capture button. So we got a fully customized overlay view and we can still snap images. So that's really awesome, it works great with Capacitor, and I really love this functionality.
Okay, let's quickly snap the final image. And of course we don't have an image. So I hope you enjoyed this quick win on creating a custom overlay for the camera preview. If you need anything like perhaps a little box around this or anything fancy, just go ahead with this plug-in. It won't work with the standard camera plug-in, so you're really a lot better off with a plug-in like this.
Outro & Ionic Academy
If you got any questions, as always leave a comment. Please like the video, um, and then I hope to catch you very soon for the next tutorial or another vlog episode. If you enjoyed this video, please hit the like button and stay subscribed so you get notified about all the new tutorials, quick wins, and other app development and web development videos on this channel. If you want to learn more about Ionic with in-depth courses, a community of like-minded developers so you can learn and build your apps faster, you should definitely check out the Ionic Academy, which is my code school to help you with everything Ionic with a huge library of courses, material and a supportive Slack channel so we can get your app out. I hope you enjoyed this video. I will see you inside the next video. Have a great day and happy coding.
