Jetpack Compose + CameraX

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:
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:
higherQualityOrLowerThan
— Select 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 qualityhigherQualityThan
— Select the standard that’s closest to and better than the enter high qualitylowerQualityOrHigherThan
— Select 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 qualitylowerQualityThan
— Select 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
Portfolio web site