• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 通过系统相机拍照和录像(CameraPicker)
2
3应用可调用CameraPicker拍摄照片或录制视频，无需申请相机权限。
4CameraPicker的相机交互界面由系统提供，在用户点击拍摄和确认按钮后，调用CameraPicker的应用获取对应的照片或者视频。
5
6应用开发者如果只是需要获取即时拍摄的照片或者视频，则可以使用CameraPicker能力来轻松实现。
7
8由于照片的拍摄和确认都是由用户进行主动确认，因此应用开发者可以不用申请操作相机的相关权限。
9
10## 开发步骤
11
12详细的API说明请参考[CameraPicker API参考](../../reference/apis-camera-kit/js-apis-cameraPicker.md)。
13
141. 导入相关接口，导入方法如下。
15   ```ts
16   import { camera, cameraPicker as picker } from '@kit.CameraKit';
17   import { fileIo, fileUri } from '@kit.CoreFileKit';
18   ```
19
202. 配置[PickerProfile](../../reference/apis-camera-kit/js-apis-cameraPicker.md#pickerprofile)。
21
22   > **说明：**
23   >
24   > PickerProfile的saveUri为可选参数，如果未配置该项，拍摄的照片和视频默认存入媒体库中。
25   >
26   > 如果不想将照片和视频存入媒体库，请自行配置应用沙箱内的文件路径。
27   > 应用沙箱内的这个文件必须是一个存在的、可写的文件。这个文件的uri传入picker接口之后，相当于应用给系统相机授权该文件的读写权限。系统相机在拍摄结束之后，会对此文件进行覆盖写入。
28
29   ```ts
30   function createPickerProfile(context: Context): picker.PickerProfile {
31     let pathDir = context.filesDir;
32     let fileName = `${new Date().getTime()}`;
33     let filePath = pathDir + `/${fileName}.tmp`;
34     fileIo.createRandomAccessFileSync(filePath, fileIo.OpenMode.CREATE);
35
36     let uri = fileUri.getUriFromPath(filePath);
37     let pickerProfile: picker.PickerProfile = {
38       cameraPosition: camera.CameraPosition.CAMERA_POSITION_BACK,
39       saveUri: uri
40     };
41     return pickerProfile;
42   }
43   ```
44
453. 调用picker拍摄接口获取拍摄的结果。
46   ```ts
47   async function getPickerResult(context: Context, pickerProfile: picker.PickerProfile): Promise<picker.PickerResult> {
48     let result: picker.PickerResult =
49       await picker.pick(context, [picker.PickerMediaType.PHOTO, picker.PickerMediaType.VIDEO],
50         pickerProfile);
51     console.info(`picker resultCode: ${result.resultCode},resultUri: ${result.resultUri},mediaType: ${result.mediaType}`);
52     return result;
53   }
54   ```
55
56## 完整示例
57   ```ts
58   import { camera, cameraPicker as picker } from '@kit.CameraKit';
59   import { fileIo, fileUri } from '@kit.CoreFileKit';
60
61   @Entry
62   @Component
63   struct Index {
64     @State imgSrc: string = '';
65     @State videoSrc: string = '';
66     createPickerProfile(context: Context): picker.PickerProfile {
67       let pathDir = context.filesDir;
68       let fileName = `${new Date().getTime()}`
69       let filePath = pathDir + `/${fileName}.tmp`
70       fileIo.createRandomAccessFileSync(filePath, fileIo.OpenMode.CREATE);
71
72       let uri = fileUri.getUriFromPath(filePath);
73       let pickerProfile: picker.PickerProfile = {
74         cameraPosition: camera.CameraPosition.CAMERA_POSITION_BACK,
75         saveUri: uri
76       };
77       return pickerProfile;
78     }
79
80     async getPickerResult(context: Context, pickerProfile: picker.PickerProfile): Promise<picker.PickerResult> {
81       let result: picker.PickerResult =
82         await picker.pick(context, [picker.PickerMediaType.PHOTO, picker.PickerMediaType.VIDEO],
83           pickerProfile);
84       console.info(`picker resultCode: ${result.resultCode},resultUri: ${result.resultUri},mediaType: ${result.mediaType}`);
85       return result;
86     }
87
88     getContext(): Context | undefined {
89       let uiContext: UIContext = this.getUIContext();
90       let context: Context | undefined = uiContext.getHostContext();
91       return context;
92     }
93
94     build() {
95       RelativeContainer() {
96         Column() {
97           Image(this.imgSrc).width(200).height(200).backgroundColor(Color.Black).margin(5);
98           Video({ src: this.videoSrc}).width(200).height(200).autoPlay(true);
99           Button("Test Picker Photo&Video").fontSize(20)
100             .fontWeight(FontWeight.Bold)
101             .onClick(async () => {
102               let context = this.getContext();
103               if (context === undefined) {
104                 return;
105               }
106               let pickerProfile = this.createPickerProfile(context);
107               let result = await this.getPickerResult(context, pickerProfile);
108               if (result.resultCode == 0) {
109                 if (result.mediaType === picker.PickerMediaType.PHOTO) {
110                   this.imgSrc = result.resultUri;
111                 } else {
112                   this.videoSrc = result.resultUri;
113                 }
114               }
115             }).margin(5);
116
117         }.alignRules({
118           center: { anchor: '__container__', align: VerticalAlign.Center },
119           middle: { anchor: '__container__', align: HorizontalAlign.Center }
120         });
121       }
122       .height('100%')
123       .width('100%')
124     }
125   }
126   ```