HarmonyOS H5打开原生相机

参考下：

import camera from '@ohos.multimedia.camera';
import image from '@ohos.multimedia.image';
import common from '@ohos.app.ability.common';
import fs from '@ohos.file.fs';
import { BusinessError } from '@kit.BasicServicesKit';
import PhotoAccessHelper from '@ohos.file.photoAccessHelper';
import { detectBarcode, scanBarcode, scanCore } from '@kit.ScanKit';

@Entry
@Component
struct Page{
  @State message: string = 'Hello World'
  @State imgUrl: PixelMap | undefined = undefined;
  private context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;
  private previewProfilesObj2: camera.Profile | undefined = undefined;
  private receiver: image.ImageReceiver | undefined = undefined;
  @State pixmap: PixelMap | undefined = undefined
  @State cameraWidth: number = 2772;
  @State cameraHeight: number = 1344;

  @State photoOutput: camera.PhotoOutput | undefined = undefined;

  @State captureSession: camera.CaptureSession | undefined = undefined;
  aboutToAppear() {

    this.createDualChannelPreview();
  }
  onPageShow(): void {
    this.createDualChannelPreview();

  }

  async createDualChannelPreview(): Promise<void> {
    let cameraManager: camera.CameraManager = camera.getCameraManager(this.context)
    let camerasDevices: Array<camera.CameraDevice> = cameraManager.getSupportedCameras(); // 获取支持的相机设备对象

    // 获取profile对象
    let profiles: camera.CameraOutputCapability = cameraManager.getSupportedOutputCapability(camerasDevices[0], camera.SceneMode.NORMAL_PHOTO);
    let previewProfiles: Array<camera.Profile> = profiles.previewProfiles;

    // 预览流2
    this.previewProfilesObj2 = previewProfiles[0];

    // this.receiver = image.createImageReceiver(this.previewProfilesObj2.size.width, this.previewProfilesObj2.size.height, 2000, 8);
    this.receiver = image.createImageReceiver(this.previewProfilesObj2.size, 2000, 8);

    // 创建 预览流2 输出对象
    let imageReceiverSurfaceId: string = await this.receiver.getReceivingSurfaceId();
    let previewOutput2: camera.PreviewOutput = cameraManager.createPreviewOutput(this.previewProfilesObj2, imageReceiverSurfaceId);
    // 创建拍照输出流
    let photoProfilesArray: Array<camera.Profile> = profiles.photoProfiles;


    try {
      this.photoOutput = cameraManager.createPhotoOutput(photoProfilesArray[0]);
    } catch (error) {
      let err = error as BusinessError;
      console.error('Failed to createPhotoOutput errorCode = ' + err.code);
    }
    if (this.photoOutput === undefined) {
      return;
    }

    // 创建cameraInput对象
    let cameraInput: camera.CameraInput = cameraManager.createCameraInput(camerasDevices[0]);

    // 打开相机
    await cameraInput.open();

    // 会话流程
    this.captureSession = cameraManager.createCaptureSession();

    // 开始配置会话
    this.captureSession.beginConfig();

    // 把CameraInput加入到会话
    this.captureSession.addInput(cameraInput);

    // 把 预览流2 加入到会话
    this.captureSession.addOutput(previewOutput2);

    try {
      this.captureSession.addOutput(this.photoOutput);
    } catch (error) {
      let err = error as BusinessError;
      console.error('Failed to addOutput(photoOutput). errorCode = ' + err.code);
    }
    // 提交配置信息
    await this.captureSession.commitConfig();

    // 会话开始
    await this.captureSession.start();

    this.onImageArrival(this.receiver);
    this.setPhotoOutputCb(this.photoOutput)

  }
  async savePicture(buffer: ArrayBuffer, img: image.Image) {
    const context = getContext(this);
    let photoAccessHelper: PhotoAccessHelper.PhotoAccessHelper = PhotoAccessHelper.getPhotoAccessHelper(context);
    let options: PhotoAccessHelper.CreateOptions = {
      title: Date.now().toString()
    };
    let photoUri: string = await photoAccessHelper.createAsset(PhotoAccessHelper.PhotoType.IMAGE, 'jpg', options);
    //createAsset的调用需要ohos.permission.READ_IMAGEVIDEO和ohos.permission.WRITE_IMAGEVIDEO的权限
    let file: fs.File = fs.openSync(photoUri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
    await fs.write(file.fd, buffer);
    fs.closeSync(file);
    img.release();
  }
  setPhotoOutputCb(photoOutput: camera.PhotoOutput) {
    //设置回调之后，调用photoOutput的capture方法，就会将拍照的buffer回传到回调中
    photoOutput.on('photoAvailable', (errCode: BusinessError, photo: camera.Photo): void => {
      console.info('photoAvailable photoOutput的capture方法执行了');
      console.info(`err: ${JSON.stringify(errCode)}`);
      if (errCode || photo === undefined) {
        console.error('getPhoto failed');
        return;
      }
      let imageObj = photo.main;
      imageObj.getComponent(image.ComponentType.JPEG, (errCode: BusinessError, component: image.Component): void => {
        console.info('getComponent start');
        if (errCode || component === undefined) {
          console.error('getComponent failed');
          return;
        }
        let buffer: ArrayBuffer;
        if (component.byteBuffer) {
          buffer = component.byteBuffer;
          console.log("buffer::"+buffer.byteLength)

          let opts: image.InitializationOptions = { editable: true, pixelFormat: 3, size: { height: 1344, width: (buffer.byteLength/4)/1344 } }
          image.createPixelMap(buffer, opts, (error: BusinessError, pixelMap: image.PixelMap) => {
            if (error) {
              console.info("error::: " + error)
              return;
            } else {
              console.info('Succeeded in creating pixelmap.');
            }
          })

          if (component.byteBuffer as ArrayBuffer) {
            let sourceOptions: image.SourceOptions = {
              sourceDensity: 120,
              sourcePixelFormat: 0, // NV21
              sourceSize: {
                height: 240,
                width: 320
              },
            }
            try {
              let imageResource = image.createImageSource(component.byteBuffer, sourceOptions);
              imageResource.createPixelMap({}).then((res)=>{
                this.pixmap = res;
              });
            }catch (error) {
              let err = error as BusinessError;
              console.error('Failed to addOutput(photoOutput). errorCode = ' + err.code);
            }
          } else {
            return;
          }
        } else {
          console.error('byteBuffer is null');
          return;
        }
        this.savePicture(buffer, imageObj);
      });
    });
  }
  async onImageArrival(receiver: image.ImageReceiver): Promise<void> {
    receiver.on('imageArrival', () => {
      console.error("imageArrival 接收图片触发");
      receiver.readLatestImage((err, nextImage: image.Image) => {
        if (err || nextImage === undefined) {
          return;
        }
        nextImage.getComponent(image.ComponentType.JPEG, (err, imgComponent: image.Component) => {
          if (err || imgComponent === undefined) {
            return;
          }
          this.saveImageToFile(imgComponent.byteBuffer);
          if (imgComponent.byteBuffer as ArrayBuffer) {

            let sourceOptions: image.SourceOptions = {
              sourceDensity: 120,
              sourcePixelFormat: 8, // NV21
              sourceSize: {
                height: this.previewProfilesObj2!.size.height,
                width: this.previewProfilesObj2!.size.width
              },
            }
            let imageResource = image.createImageSource(imgComponent.byteBuffer, sourceOptions);
            let decodingOptions : image.DecodingOptions = {
              editable: true,
              desiredPixelFormat: 3,
            }
            imageResource.createPixelMap(decodingOptions).then((res)=>{
              this.imgUrl = res;
            });

            let byteImg: detectBarcode.ByteImage = {
              byteBuffer: imgComponent.byteBuffer,
              // 相机预览流数据旋转90° //注意
              width: this.previewProfilesObj2!.size.width,
              height: this.previewProfilesObj2!.size.height,
              format: detectBarcode.ImageFormat.NV21
            };
            let options: scanBarcode.ScanOptions = {
              scanTypes: [scanCore.ScanType.ALL],
              enableMultiMode: true,
              enableAlbum: false
            };

            try {
              detectBarcode.decodeImage(byteImg, options).then((result: detectBarcode.DetectResult) => {
                console.info('[Scan Sample]', `Succeeded in getting DetectResult by promise with options, result is ${JSON.stringify(result)}`);
              }).catch((error: BusinessError) => {
                console.error('[Scan Sample]', `Failed to get DetectResult by promise with options. Code: ${error.code}, message: ${error.message}`);
              })
            }catch (e){
              console.log( ` ssss = ${e}`)
            }

          } else {
            return;
          }
          nextImage.release();
        })
      })
    })
  }
  saveImageToFile(data: ArrayBuffer) {
    const context = getContext(this);
    let filePath = context.tempDir + "/test.jpg";
    console.info("path is " + filePath);
    let file = fs.openSync(filePath, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
    fs.write(file.fd, data, (err, writeLen) => {
      if (err) {
        console.info("write failed with error message: " + err.message + ", error code: " + err.code);
      } else {
        console.info("write data to file succeed and size is:" + writeLen);
        fs.closeSync(file);
      }
    });

  }
  build() {
    Column() {
      Row() {
        // 将编辑好的pixelMap传递给状态变量imagePixelMap后，通过Image组件进行渲染
        Image(this.imgUrl).objectFit(ImageFit.Cover).width('100%').height('50%')
      }.backgroundColor('#F0F0F0')
      Row() {
        Button(){
          Text("触发一次对焦")
            .fontColor(Color.Black)
            .alignSelf(ItemAlign.Center)
            .onClick(() => {
              let flag = this.captureSession?.isFocusModeSupported(camera.FocusMode.FOCUS_MODE_AUTO)
              if (flag) {
                this.captureSession?.setFocusMode(camera.FocusMode.FOCUS_MODE_AUTO)
                this.captureSession?.setFocusPoint({x: 1, y: 1})
                console.log("success")
                return
              }
              console.log("failure")
            })
        }
        .width(100)
        .height(100)

        Button() {
          Text("拍照")
            .fontColor(Color.Black)
            .alignSelf(ItemAlign.Center)
            .onClick(() => {
              let settings: camera.PhotoCaptureSetting = {
                quality: camera.QualityLevel.QUALITY_LEVEL_HIGH, // 设置图片质量高
                rotation: camera.ImageRotation.ROTATION_0, // 设置图片旋转角度0
                mirror: false // 设置镜像使能开关(默认关)
              };
              if (this.photoOutput){
                this.photoOutput.capture(settings, (err: BusinessError) => {
                  if (err) {
                    console.error(`Failed to capture the photo. error: ${JSON.stringify(err)}`);
                    return;
                  }
                  console.info('Callback invoked to indicate the photo capture request success.');
                });
              }
            })
        }
        .width(100)
        .height(100)
        Image(this.pixmap)
          .width(200)
          .height(200)
      }
    }
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
238.
239.
240.
241.
242.
243.
244.
245.
246.
247.
248.
249.
250.
251.
252.
253.
254.
255.
256.
257.
258.
259.
260.
261.
262.
263.
264.
265.
266.
267.
268.
269.
270.
271.
272.
273.
274.
275.
276.
277.
278.
279.
280.
281.
282.
283.
284.
285.
286.
287.
288.
289.
290.
291.
292.
293.
294.
295.
296.
297.
298.
299.
300.
301.
302.