Wednesday, October 5, 2022
HomeProgrammingDigital camera App Jetpack Compose | by Igor Stevanovic | Medium

Digital camera App Jetpack Compose | by Igor Stevanovic | Medium


Jetpack Compose + CameraX

The Jetpack Compose emblem used on this picture is the official emblem created by Google

Enthusiastic about making a Digital camera app or do that you must report video in your app? The CameraX library is a good way to do it. Right this moment, I’m gonna clarify to you the best way to create a Digital camera app utilizing the CameraX library as it’s endorsed method by Google.

“CameraX is a Jetpack library, constructed to assist make digicam app improvement simpler.” In line with the CameraX official documentation

There are a few use circumstances the place you should use the CameraX:

On this article, we’re going to undergo the Video Seize as it isn’t that much-treated matter.

Video Seize

First, let’s add some dependencies:

Word: Test if there’s a newer model of those dependencies.

Now, our predominant display screen will report the video, however first, we have to ask for digicam and audio permissions. Gained’t go into that intimately as I already defined in one in every of my earlier articles, have a look in the event you want extra clarification.

Now we’re gonna create a few objects which we’re going to must report the video.

A Recording is an object that enables us to manage present energetic recording. It’s going to enable us to cease, pause and resume the present recording. We create that object once we begin recording.
PreviewView is a customized view that may show the digicam feed. We are going to bind it to the lifecycle, add it to the AndroidView and it’ll present us what we’re at the moment recording.
VideoCapture is a generic class that gives a digicam stream appropriate for video functions. Right here we move the Recorder class which is an implementation of the VideoOutput interface and it permits us to start out recording.
The recordingStarted and the audioEnabled are helper variables that we are going to use on this display screen and I feel they’re just about self-explanatory.
CameraSelector is a set of necessities and priorities used to pick a digicam or return a filtered set of cameras. Right here we are going to simply use the default back and front digicam.
Within the LaunchedEffect we’re calling a operate that may create us a video seize use case. The operate seems like this:

First, we create a Preview which is a use case that gives a digicam preview stream for displaying on-screen. We will set a number of issues right here like facet ratio, seize processor, picture information processor, and so forth. We received’t want them so we create plain Preview object.
Subsequent is to decide on the standard of our video. For that, we use QualitySelector which defines the specified high quality setting. We wish Full HD high quality so we are going to move High quality.FHD. Some telephones could not have desired high quality so it is best to all the time have a backup plan as we did it right here by passing FallbackStrategy. There are a few methods:

  • higherQualityOrLowerThanSelect the standard that’s closest to and better than the enter high quality. If that may not end in a supported high quality, select the standard that’s closest to and decrease than the enter high quality
  • higherQualityThan — Select the standard that’s closest to and better than the enter high quality
  • lowerQualityOrHigherThanSelect the standard that’s closest to and decrease than the enter high quality. If that may not end in a supported high quality, select the standard that’s closest to and better than the enter high quality
  • lowerQualityThanSelect the standard that’s closest to and better than the enter high quality

Yet another solution to do it’s to only move High quality.LOWEST or High quality.HIGHEST, which might be the easier method however I wished additionally to indicate this one.
Now we create an Recorder and use it to get the VideoCapture object by calling VideoCapture.withOutput(recorder).
A digicam supplier is an object of ProcessCameraProvider singleton that enables us to bind the lifecycle of cameras to any LifecycleOwner inside an utility’s course of. The operate that we’re utilizing to get a digicam supplier is:

ProcessCameraProvider.getInstance(this) is returning future that we have to wait to complete to get an occasion.
Subsequent, we have to bind the whole lot to the lifecycle and we move lifecycleOwner, cameraSelector, preview, and videoCapture.

Now it’s time to end the remainder of the compose code, I hope you’re nonetheless with me!

Inside PermissionsRequired content material block, we add AndroidView and button for recording. Like this:

AndroidView will show our preview.
As for the button, we are going to use it to start out and cease recording. After we need to begin recording we first get the media listing the place we are going to put the video, if the listing doesn’t exist, we simply create it. Subsequent is to name startRecordingVideo operate that appears like this:

A easy operate that creates a file, prepares a recording, and begins it. If audio is enabled we can even begin recording with audio enabled. An object that this operate returns, we are going to use to cease the recording. The shopper parameter is a callback that shall be known as on every occasion. You should utilize it to get the URI of the file after the video recording is completed.

Let’s simply add the logic for the audio and digicam selector.

They’re two buttons that may enable-disable audio and change between the back and front digicam. After we change between cameras we have to create a brand new videoCapture object to alter what’s our preview displaying.

That’s it for this display screen, however now it might be good to see what have we recorded proper? In fact, for that, we’re gonna create one other display screen and use ExoPlayer to show the video.

Let’s simply first add logic in our shopper callback:

if (occasion is VideoRecordEvent.Finalize) {
val uri = occasion.outputResults.outputUri
if (uri != Uri.EMPTY) {
val uriEncoded = URLEncoder.encode(
uri.toString(),
StandardCharsets.UTF_8.toString()
)
navController.navigate("${Route.VIDEO_PREVIEW}/$uriEncoded")
}
}

If occasion is VideoRecordEvent.Finalize, that implies that the recording is completed and we will get the URI of the video. There are a few video report occasions, you should use any of them however right here we simply want Finalize:

  • Begin
  • Finalize
  • Standing
  • Pause
  • Resume

URI might be empty if the video is simply too brief, like beneath half of the second or one thing like that and that’s why we want that if assertion.
URI ought to be encoded to move it because the navigation argument.

Our closing code for this display screen seems like this:

ExoPlayer

ExoPlayer is an alternative choice to Android’s MediaPlayer API for taking part in audio and video each regionally and over the Web. It’s simpler to make use of and gives extra options. Additionally, it’s straightforward to customise and lengthen.

Now once we know what’s the ExoPlayer, let’s create our subsequent display screen. Add dependency:

//ExoPlayer Library
exoPlayerVersion = '2.18.1'
implementation "com.google.android.exoplayer:exoplayer:$exoPlayerVersion"

Our display screen ought to seem like this:

We are going to use a builder to create ExoPlayer, set the URI of the video which shall be loaded, after which put together the participant.

We use AndroidView to indicate our video and we are going to connect StyledPlayerView to it.

StyledPlayerView is a high-level view for Participant media playbacks. It shows video, subtitles, and album artwork throughout playback, and shows playback controls utilizing a StyledPlayerControlView.
The StyledPlayerView might be personalized by setting attributes (or calling corresponding strategies), or overriding drawable.

That’s it for our video recorder, I hope you discovered one thing new on this article and that you just prefer it.

You will discover the entire supply code in my GitHub repo.

Wish to Join?GitHub
Twitter
Portfolio web site



RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments