WEBVTT 00:00.120 --> 00:01.000 Welcome back. 00:01.040 --> 00:07.560 We created this data class called Detection result and this interface detection listener. 00:07.600 --> 00:10.640 Now let's create a new package. 00:10.640 --> 00:12.400 Name it as screens. 00:12.400 --> 00:16.200 And inside the screens create a new Kotlin file. 00:16.440 --> 00:19.880 Name it as box detection. 00:19.880 --> 00:27.080 And inside this box detection file let me create a new composable function. 00:27.320 --> 00:31.080 Name it as box with detection overlay. 00:31.280 --> 00:38.400 This box with detection overlay takes camera controller. 00:38.600 --> 00:46.480 It's of type, life cycle, camera controller and detection results. 00:46.600 --> 00:49.960 It's a list of detection result. 00:50.040 --> 00:59.800 The purpose of using camera controller is the high level controller that manages the camera lifecycle 01:00.040 --> 01:05.980 and the provides easy to use camera functionality with minimal code. 01:06.020 --> 01:10.460 Okay, so this is the main purpose of using the camera controller. 01:10.700 --> 01:19.660 It automatically handles camera, start up, resume pose, stop ties, camera, life cycle to your activity 01:19.660 --> 01:23.860 or fragment life cycle or composable lifecycle. 01:24.060 --> 01:27.420 No manual camera resource management needed. 01:27.420 --> 01:35.700 And this is very useful because we are not, uh, handling the camera and displaying cameras as and 01:35.740 --> 01:43.500 this is not the aim as much as adding and uh, and detecting object using ML. 01:43.660 --> 01:47.260 So this is the camera controller that we're going to use. 01:47.460 --> 01:54.660 And this component makes it much easier to integrate camera functionality with your TensorFlow object 01:54.660 --> 01:59.500 detection compared to manual managing camera sessions and lifecycle. 01:59.820 --> 02:03.560 So this is a very important a very important. 02:03.560 --> 02:10.440 And we've added from the lifecycle camera controller and from camera X okay. 02:10.560 --> 02:16.200 Inside this composable start with Android View. 02:16.480 --> 02:24.600 And this factory equals to that context preview view apply fill center. 02:24.680 --> 02:26.960 Why we use Android View. 02:26.960 --> 02:30.280 And uh, what is Android View? 02:30.520 --> 02:38.560 Android view allows you to use traditional Android views with Jetpack Compose. 02:38.840 --> 02:46.880 But why we use the traditional Android views instead of using Composables and Jetpack Composables? 02:46.960 --> 02:56.560 Because camera X, which is the library that we've added before for the camera, uses only views, so 02:56.720 --> 03:01.250 we need to include it inside an Android view. 03:01.570 --> 03:09.650 Android view allows you to use a traditional Android views with Jetpack Compose, and the Camerax uses 03:09.650 --> 03:12.610 the views in Jetpack Compose app. 03:12.770 --> 03:21.130 Android view is a very good solution for using camera X in Jetpack Compose. 03:21.210 --> 03:23.770 Factory equals to context. 03:23.810 --> 03:33.570 This lambda that creates the preview view instance and set the context in Android provided by compose. 03:33.730 --> 03:41.850 Called once, when the composable is first composed and the preview view creates the camera x camera 03:41.850 --> 03:44.970 preview view that displays camera feed. 03:45.010 --> 03:50.930 This is the actual view that shows the camera preview and apply is. 03:53.210 --> 03:55.650 Used to configure the preview view. 03:56.050 --> 04:05.390 The controller camera controller connects the view to your lifecycle, camera controller and scale type. 04:05.710 --> 04:06.310 Sets. 04:06.310 --> 04:10.870 The camera preview is scaled within the view. 04:11.030 --> 04:18.670 We use the fill center means the preview container maintains aspect ratio, fills the entire preview 04:18.710 --> 04:25.590 view while centering the content, and may crop the preview slightly to fill the view. 04:25.630 --> 04:28.870 Okay, and let me remove this. 04:29.070 --> 04:30.070 And here we go. 04:30.110 --> 04:30.630 Okay. 04:30.910 --> 04:38.110 So this is the camera preview view the camera view that we're going to use with camera X. 04:38.110 --> 04:42.950 So again guys we use the Android View with with camera X. 04:43.150 --> 04:47.030 Because camera X only uses views in Jetpack Compose. 04:47.030 --> 04:52.590 And we need to use the Android View to allow the camera preview. 04:52.830 --> 04:53.310 Okay. 04:53.470 --> 04:56.230 I want from you to remember this point.