1# Using the Camera Picker (ArkTS)
2
3Applications can invoke the camera picker to take photos or record videos without applying for the camera permission.
4
5The camera interaction UI of the camera picker is provided by the system. After a user touches the **PHOTO** and **OK** buttons, the application that invokes the camera picker obtains a photo or video.
6
7If your application only needs to obtain photos or videos taken in real time, it can invoke the camera picker.
8
9Given that users are the ones who actively take and confirm the photos, your application does not need to request the permission to operate the camera.
10
11## Constraints
12
13During application debugging, you must call the camera picker in release mode. If it is called in debug mode, an exception occurs.
14
15## How to Develop
16
17Read [CameraPicker](../../reference/apis-camera-kit/js-apis-cameraPicker.md) for the API reference.
18
191. Import the module.
20   ```ts
21   import { camera, cameraPicker as picker } from '@kit.CameraKit'
22   import { fileIo, fileUri } from '@kit.CoreFileKit'
23   ```
24
252. Configure [PickerProfile](../../reference/apis-camera-kit/js-apis-cameraPicker.md#pickerprofile).
26
27   > **NOTE**
28   >
29   > The **saveUri** parameter of **PickerProfile** is optional. If this parameter is not set, photos and videos are stored in the media library by default.
30   >
31   > If you do not want to save photos and videos to the media library, configure a file path in the application sandbox. Ensure that this file is already present and writable. By passing the file's URI into the **picker** API, you are effectively giving the camera picker permission to read from and write to this file. Upon completion of a photo or video capture, the camera picker will replace the contents of this file.
32
33```ts
34   let pathDir = getContext().filesDir;
35   let fileName = `${new Date().getTime()}`
36   let filePath = pathDir + `/${fileName}.tmp`
37   fileIo.createRandomAccessFileSync(filePath, fileIo.OpenMode.CREATE);
38
39   let uri = fileUri.getUriFromPath(filePath);
40   let pickerProfile: picker.PickerProfile = {
41     cameraPosition: camera.CameraPosition.CAMERA_POSITION_BACK,
42     saveUri: uri
43   };
44   ```
45
463. Call the **picker** API to obtain the photo or video capture result.
47   ```ts
48   let result: picker.PickerResult =
49     await picker.pick(getContext(), [picker.PickerMediaType.PHOTO, picker.PickerMediaType.VIDEO],
50       pickerProfile);
51   console.info(`picker resultCode: ${result.resultCode},resultUri: ${result.resultUri},mediaType: ${result.mediaType}`);
52   ```
53
54## Example
55   ```ts
56   import { camera, cameraPicker as picker } from '@kit.CameraKit'
57   import { fileIo, fileUri } from '@kit.CoreFileKit'
58
59   @Entry
60   @Component
61   struct Index {
62     @State imgSrc: string = '';
63     @State videoSrc: string = '';
64
65     build() {
66       RelativeContainer() {
67         Column() {
68           Image(this.imgSrc).width(200).height(200).backgroundColor(Color.Black).margin(5);
69           Video({ src: this.videoSrc}).width(200).height(200).autoPlay(true);
70           Button("Test Picker Photo&Video").fontSize(20)
71             .fontWeight(FontWeight.Bold)
72             .onClick(async () => {
73               let pathDir = getContext().filesDir;
74               let fileName = `${new Date().getTime()}`
75               let filePath = pathDir + `/${fileName}.tmp`
76               fileIo.createRandomAccessFileSync(filePath, fileIo.OpenMode.CREATE);
77
78               let uri = fileUri.getUriFromPath(filePath);
79               let pickerProfile: picker.PickerProfile = {
80                 cameraPosition: camera.CameraPosition.CAMERA_POSITION_BACK,
81                 saveUri: uri
82               };
83               let result: picker.PickerResult =
84                 await picker.pick(getContext(), [picker.PickerMediaType.PHOTO, picker.PickerMediaType.VIDEO],
85                   pickerProfile);
86               console.info(`picker resultCode: ${result.resultCode},resultUri: ${result.resultUri},mediaType: ${result.mediaType}`);
87               if (result.resultCode == 0) {
88                 if (result.mediaType === picker.PickerMediaType.PHOTO) {
89                   this.imgSrc = result.resultUri;
90                 } else {
91                   this.videoSrc = result.resultUri;
92                 }
93               }
94             }).margin(5);
95
96         }.alignRules({
97           center: { anchor: '__container__', align: VerticalAlign.Center },
98           middle: { anchor: '__container__', align: HorizontalAlign.Center }
99         });
100       }
101       .height('100%')
102       .width('100%')
103     }
104   }
105   ```
106
107