HarmonyOS H5打开原生相机

使用navigator.mediaDevices.getUserMedia打开摄像头,失败,该如何实现此功能。

HarmonyOS
2024-12-25 15:34:11
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
fox280

参考下:

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)
      }
    }
  }
}
分享
微博
QQ
微信
回复
2024-12-25 18:40:14
相关问题
HarmonyOS H5原生交互
415浏览 • 1回复 待解决
HarmonyOS H5调用原生扫码功能
381浏览 • 1回复 待解决
HarmonyOS web原生H5如何交互?
1002浏览 • 1回复 待解决
HarmonyOS h5原生交互、页面状态机
373浏览 • 1回复 待解决
HarmonyOS h5调用系统相机进行拍照
328浏览 • 1回复 待解决
H5原生调JSbrige的demo示例
612浏览 • 1回复 待解决
HarmonyOS 原生H5页面交互
301浏览 • 1回复 待解决
HarmonyOS 原生怎么主动触发消息给h5
401浏览 • 1回复 待解决
HarmonyOS 原生与webview中的H5消息通信
326浏览 • 1回复 待解决
HarmonyOS H5拉起系统相机的样例代码
608浏览 • 1回复 待解决
HarmonyOS web组件加载h5h5拉起摄像头
985浏览 • 1回复 待解决
HarmonyOS 本地H5加载
428浏览 • 1回复 待解决