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