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## How to Develop 12 13Read [CameraPicker](../../reference/apis-camera-kit/js-apis-cameraPicker.md) for the API reference. 14 151. Import the module. 16 ```ts 17 import { camera, cameraPicker as picker } from '@kit.CameraKit' 18 import { fileIo, fileUri } from '@kit.CoreFileKit' 19 ``` 20 212. Configure [PickerProfile](../../reference/apis-camera-kit/js-apis-cameraPicker.md#pickerprofile). 22 23 > **NOTE** 24 > 25 > The **saveUri** parameter of **PickerProfile** is optional. If this parameter is not set, photos and videos are stored in the media library by default. 26 > 27 > 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. 28 29 ```ts 30 let pathDir = getContext().filesDir; 31 let fileName = `${new Date().getTime()}` 32 let filePath = pathDir + `/${fileName}.tmp` 33 fileIo.createRandomAccessFileSync(filePath, fileIo.OpenMode.CREATE); 34 35 let uri = fileUri.getUriFromPath(filePath); 36 let pickerProfile: picker.PickerProfile = { 37 cameraPosition: camera.CameraPosition.CAMERA_POSITION_BACK, 38 saveUri: uri 39 }; 40 ``` 41 423. Call the **picker** API to obtain the photo or video capture result. 43 ```ts 44 let result: picker.PickerResult = 45 await picker.pick(getContext(), [picker.PickerMediaType.PHOTO, picker.PickerMediaType.VIDEO], 46 pickerProfile); 47 console.info(`picker resultCode: ${result.resultCode},resultUri: ${result.resultUri},mediaType: ${result.mediaType}`); 48 ``` 49 50## Example 51 ```ts 52 import { camera, cameraPicker as picker } from '@kit.CameraKit' 53 import { fileIo, fileUri } from '@kit.CoreFileKit' 54 55 @Entry 56 @Component 57 struct Index { 58 @State imgSrc: string = ''; 59 @State videoSrc: string = ''; 60 61 build() { 62 RelativeContainer() { 63 Column() { 64 Image(this.imgSrc).width(200).height(200).backgroundColor(Color.Black).margin(5); 65 Video({ src: this.videoSrc}).width(200).height(200).autoPlay(true); 66 Button("Test Picker Photo&Video").fontSize(20) 67 .fontWeight(FontWeight.Bold) 68 .onClick(async () => { 69 let pathDir = getContext().filesDir; 70 let fileName = `${new Date().getTime()}` 71 let filePath = pathDir + `/${fileName}.tmp` 72 fileIo.createRandomAccessFileSync(filePath, fileIo.OpenMode.CREATE); 73 74 let uri = fileUri.getUriFromPath(filePath); 75 let pickerProfile: picker.PickerProfile = { 76 cameraPosition: camera.CameraPosition.CAMERA_POSITION_BACK, 77 saveUri: uri 78 }; 79 let result: picker.PickerResult = 80 await picker.pick(getContext(), [picker.PickerMediaType.PHOTO, picker.PickerMediaType.VIDEO], 81 pickerProfile); 82 console.info(`picker resultCode: ${result.resultCode},resultUri: ${result.resultUri},mediaType: ${result.mediaType}`); 83 if (result.resultCode == 0) { 84 if (result.mediaType === picker.PickerMediaType.PHOTO) { 85 this.imgSrc = result.resultUri; 86 } else { 87 this.videoSrc = result.resultUri; 88 } 89 } 90 }).margin(5); 91 92 }.alignRules({ 93 center: { anchor: '__container__', align: VerticalAlign.Center }, 94 middle: { anchor: '__container__', align: HorizontalAlign.Center } 95 }); 96 } 97 .height('100%') 98 .width('100%') 99 } 100 } 101 ``` 102