如何在 Angular 17 上从前置摄像头上传照片？

Question

我正在使用 Angular 17 开发一个 Web 应用程序。我希望用户上传图像，但只能从相机上传图像。我使用上传文件：

async compressFile(flag: boolean) {
    this.imageCompress.uploadFile().then(({ image, orientation }) => {
      this.takeExifData(image, flag, orientation) // fun to get exif-data
    });
  }

<button class="button" (click)="compressFile(true)"> Upload</button>

我正在尝试使用

<input capture='camera'>

，但此方法使用户可以在相机、图库和文件之间进行选择。我如何才能将此选择仅限于相机？

Answer 1

您可以使用 MediaDevices 中的 getUserMedia 方法，查看 Mozilla 文档：https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#syntax

你可以试试这个：

navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' } })
  .then((stream) => {
    const videoElement = document.getElementById('video');
    videoElement.srcObject = stream;
  })
  .catch((error) => {
    console.error('Error accessing camera:', error);
  });