• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Image Receiving
2<!--Kit: Image Kit-->
3<!--Subsystem: Multimedia-->
4<!--Owner: @aulight02-->
5<!--SE: @liyang_bryan-->
6<!--TSE: @xchaosioda-->
7
8You can use the **ImageReceiver** class to obtain the surface ID of a component, read the latest image or the next image, and release ImageReceiver instances.
9
10## How to Develop
11
12### Adding Dependencies
13
14Open the **src/main/cpp/CMakeLists.txt** file of the native project, add **libace_napi.z.so**, **libimage_ndk.z.so**, **libimage_receiver_ndk.z.so**, **libnative_image.so**, and **libhilog_ndk.z.so** (on which the native log APIs depend) to the **target_link_libraries** dependency.
15
16```txt
17target_link_libraries(entry PUBLIC libace_napi.z.so libhilog_ndk.z.so libimage_ndk.z.so libimage_receiver_ndk.z.so libnative_image.so)
18```
19
20### Adding API Mappings
21
22Open the **src/main/cpp/hello.cpp** file and add the following API mappings to the **Init** function:
23
24```c++
25EXTERN_C_START
26static napi_value Init(napi_env env, napi_value exports)
27{
28    napi_property_descriptor desc[] = {
29        { "createFromReceiver", nullptr, createFromReceiver, nullptr, nullptr, nullptr, napi_default, nullptr },
30    };
31
32    napi_define_properties(env, exports, sizeof(desc) / sizeof(desc[0]), desc);
33    return exports;
34}
35EXTERN_C_END
36```
37
38### Requesting Permissions
39
40To obtain input data of an image from a camera, you must request the **ohos.permission.CAMERA** permission. For details, see [Requesting User Authorization](../../security/AccessToken/request-user-authorization.md).
41
42### Calling APIs on the JS Side
43
441. Open **src\main\cpp\types\*libentry*\index.d.ts** (where **libentry** varies according to the project name), and import the following files:
45
46    ```js
47    import { image } from '@kit.ImageKit';
48
49    export const createFromReceiver: (a: image.ImageReceiver) => image.Image;
50    ```
51
522. Open **src\main\ets\pages\index.ets**, import ***libentry*.so** (where **libentry** varies according to the project name), call the native APIs, and pass in the JS resource object. The following is an example:
53
54    ```js
55    import testNapi from 'libentry.so';
56    import { image } from '@kit.ImageKit';
57    import { common, abilityAccessCtrl } from '@kit.AbilityKit';
58    import { camera } from '@kit.CameraKit';
59
60    @Entry
61    @Component
62    struct Index {
63      private receiver: image.ImageReceiver | undefined = undefined;
64      func (){
65         let context = this.getUIContext().getHostContext() as common.UIAbilityContext;
66         abilityAccessCtrl.createAtManager().requestPermissionsFromUser(context,['ohos.permission.CAMERA']).then(async () => {
67            let cameraManager = await camera.getCameraManager(context);
68            // Obtain the supported camera devices.
69            let cameraDevices: Array<camera.CameraDevice> = cameraManager.getSupportedCameras();
70            if (cameraDevices.length <= 0) {
71            return;
72            }
73            // Obtain the profiles of the cameras.
74            let profiles: camera.CameraOutputCapability = cameraManager.getSupportedOutputCapability(cameraDevices[0], camera.SceneMode.NORMAL_PHOTO);
75            let previewProfiles: Array<camera.Profile> = profiles.previewProfiles;
76            if (previewProfiles.length <= 0) {
77            return;
78            }
79            let profileObj = previewProfiles[0];
80            this.receiver = image.createImageReceiver({width:profileObj.size.width, height:profileObj.size.height}, image.ImageFormat.JPEG, 8);
81            let receiverSurfaceId: string = await this.receiver.getReceivingSurfaceId();
82            // Create an output object for the preview stream.
83            let previewOutput: camera.PreviewOutput = cameraManager.createPreviewOutput(profileObj,receiverSurfaceId);
84            let cameraInput : camera.CameraInput = cameraManager.createCameraInput(cameraDevices[0]);
85            // Open the camera.
86            await cameraInput.open();
87            // Create a session.
88            let session : camera.PhotoSession = cameraManager.createSession(camera.SceneMode.NORMAL_PHOTO) as camera.PhotoSession;
89            // Configure the session.
90            session.beginConfig();
91            // Add a CameraInput instance to the session.
92            session.addInput(cameraInput);
93            // Add the preview stream to the session.
94            session.addOutput(previewOutput);
95            // Commit the configuration.
96            await session.commitConfig();
97            // Start the session.
98            await session.start();
99
100            this.receiver.on('imageArrival', () => {
101               let img : image.Image = testNapi.createFromReceiver(this.receiver);
102               img.release();
103            })
104
105         });
106      }
107
108      build() {
109         Row() {
110            Column() {
111            Button("start")
112               .width(100)
113               .height(100)
114               .onClick(() => {
115                  console.info("button click in");
116                  if (this.receiver == undefined) {
117                     this.func();
118                  }
119               })
120            }
121            .width('100%')
122         }
123         .height('100%')
124      }
125    }
126    ```
127
128### Calling the Native APIs
129
130For details about the APIs, see [Image](../../reference/apis-image-kit/capi-image.md).
131
132Obtain the JS resource object from the **hello.cpp** file and convert it to a native resource object. Then you can call native APIs.
133
134**Adding Reference Files**
135
136```c++
137#include <multimedia/image_framework/image_mdk.h>
138#include <multimedia/image_framework/image_receiver_mdk.h>
139#include <malloc.h>
140#include <hilog/log.h>
141
142static napi_value createFromReceiver(napi_env env, napi_callback_info info)
143{
144   size_t argc = 1;
145   napi_value args[2] = {nullptr};
146   napi_get_cb_info(env, info, &argc, args , nullptr, nullptr);
147   napi_valuetype valuetype0;
148   napi_typeof(env, args[0], &valuetype0);
149   napi_ref reference;
150   napi_create_reference(env, args[0], 1 ,&reference);
151   napi_value imgReceiver_js;
152   napi_get_reference_value(env, reference, &imgReceiver_js);
153
154   ImageReceiverNative * imgReceiver_c = OH_Image_Receiver_InitImageReceiverNative(env, imgReceiver_js);
155
156   int32_t capacity;
157   OH_Image_Receiver_GetCapacity(imgReceiver_c, &capacity);
158   OH_LOG_Print(LOG_APP, LOG_INFO, 0xFF00, "[receiver]", "capacity: %{public}d", capacity);
159   int32_t format;
160   OH_Image_Receiver_GetFormat(imgReceiver_c, &format);
161   OH_LOG_Print(LOG_APP, LOG_INFO, 0xFF00, "[receiver]", "format: %{public}d", format);
162   char * surfaceId = static_cast<char *>(malloc(sizeof(char)));
163   OH_Image_Receiver_GetReceivingSurfaceId(imgReceiver_c, surfaceId, sizeof(char));
164   OH_LOG_Print(LOG_APP, LOG_INFO, 0xFF00, "[receiver]", "surfaceId: %{public}c", surfaceId[0]);
165   OhosImageSize size;
166   OH_Image_Receiver_GetSize(imgReceiver_c, &size);
167   OH_LOG_Print(LOG_APP, LOG_INFO, 0xFF00, "[receiver]", "OH_Image_Receiver_GetSize  width: %{public}d, height:%{public}d", size.width, size.height);
168
169   int32_t ret;
170   napi_value nextImage;
171   // Alternatively, call OH_Image_Receiver_ReadNextImage(imgReceiver_c, &nextImage).
172   ret = OH_Image_Receiver_ReadLatestImage(imgReceiver_c, &nextImage);
173
174   ImageNative * nextImage_native = OH_Image_InitImageNative(env, nextImage);
175
176   OhosImageSize imageSize;
177   OH_Image_Size(nextImage_native, &imageSize);
178   OH_LOG_Print(LOG_APP, LOG_INFO, 0xFF00, "[receiver]", "OH_Image_Size  width: %{public}d, height:%{public}d", imageSize.width, imageSize.height);
179
180   OhosImageComponent imgComponent;
181   ret = OH_Image_GetComponent(nextImage_native, 4, &imgComponent); // 4=jpeg
182
183   uint8_t *img_buffer = imgComponent.byteBuffer;
184
185   ret = OH_Image_Release(nextImage_native);
186   ret = OH_Image_Receiver_Release(imgReceiver_c);
187   return nextImage;
188}
189```
190