• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Using the System Camera to Take Photos and Record Videos (CameraPicker)
2<!--Kit: Camera Kit-->
3<!--Subsystem: Multimedia-->
4<!--Owner: @qano-->
5<!--SE: @leo_ysl-->
6<!--TSE: @xchaosioda-->
7
8Applications can invoke the camera picker to take photos or record videos without applying for the camera permission.
9The 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.
10
11If your application only needs to obtain photos or videos taken in real time, it can invoke the camera picker.
12
13Given 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.
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   function createPickerProfile(context: Context): picker.PickerProfile {
35     let pathDir = context.filesDir;
36     let fileName = `${new Date().getTime()}`;
37     let filePath = pathDir + `/${fileName}.tmp`;
38     fileIo.createRandomAccessFileSync(filePath, fileIo.OpenMode.CREATE);
39
40     let uri = fileUri.getUriFromPath(filePath);
41     let pickerProfile: picker.PickerProfile = {
42       cameraPosition: camera.CameraPosition.CAMERA_POSITION_BACK,
43       saveUri: uri
44     };
45     return pickerProfile;
46   }
47   ```
48
493. Call the **picker** API to obtain the photo or video capture result.
50   ```ts
51   async function getPickerResult(context: Context, pickerProfile: picker.PickerProfile): Promise<picker.PickerResult> {
52     let result: picker.PickerResult =
53       await picker.pick(context, [picker.PickerMediaType.PHOTO, picker.PickerMediaType.VIDEO],
54         pickerProfile);
55     console.info(`picker resultCode: ${result.resultCode},resultUri: ${result.resultUri},mediaType: ${result.mediaType}`);
56     return result;
57   }
58   ```
59
60## Example
61   ```ts
62   import { camera, cameraPicker as picker } from '@kit.CameraKit';
63   import { fileIo, fileUri } from '@kit.CoreFileKit';
64
65   @Entry
66   @Component
67   struct Index {
68     @State imgSrc: string = '';
69     @State videoSrc: string = '';
70     createPickerProfile(context: Context): picker.PickerProfile {
71       let pathDir = context.filesDir;
72       let fileName = `${new Date().getTime()}`;
73       let filePath = pathDir + `/${fileName}.tmp`;
74       fileIo.createRandomAccessFileSync(filePath, fileIo.OpenMode.CREATE);
75
76       let uri = fileUri.getUriFromPath(filePath);
77       let pickerProfile: picker.PickerProfile = {
78         cameraPosition: camera.CameraPosition.CAMERA_POSITION_BACK,
79         saveUri: uri
80       };
81       return pickerProfile;
82     }
83
84     async getPickerResult(context: Context, pickerProfile: picker.PickerProfile): Promise<picker.PickerResult> {
85       let result: picker.PickerResult =
86         await picker.pick(context, [picker.PickerMediaType.PHOTO, picker.PickerMediaType.VIDEO],
87           pickerProfile);
88       console.info(`picker resultCode: ${result.resultCode},resultUri: ${result.resultUri},mediaType: ${result.mediaType}`);
89       return result;
90     }
91
92     getContext(): Context | undefined {
93       let uiContext: UIContext = this.getUIContext();
94       let context: Context | undefined = uiContext.getHostContext();
95       return context;
96     }
97
98     build() {
99       RelativeContainer() {
100         Column() {
101           Image(this.imgSrc).width(200).height(200).backgroundColor(Color.Black).margin(5);
102           Video({ src: this.videoSrc}).width(200).height(200).autoPlay(true);
103           Button("Test Picker Photo&Video").fontSize(20)
104             .fontWeight(FontWeight.Bold)
105             .onClick(async () => {
106               let context = this.getContext();
107               if (context === undefined) {
108                 return;
109               }
110               let pickerProfile = this.createPickerProfile(context);
111               let result = await this.getPickerResult(context, pickerProfile);
112               if (result.resultCode == 0) {
113                 if (result.mediaType === picker.PickerMediaType.PHOTO) {
114                   this.imgSrc = result.resultUri;
115                 } else {
116                   this.videoSrc = result.resultUri;
117                 }
118               }
119             }).margin(5);
120
121         }.alignRules({
122           center: { anchor: '__container__', align: VerticalAlign.Center },
123           middle: { anchor: '__container__', align: HorizontalAlign.Center }
124         });
125       }
126       .height('100%')
127       .width('100%')
128     }
129   }
130   ```
131