在开发PWA的时候，我遇到了访问移动的设备的摄像头/图像的需求。（原生应用程序是不可能的）。在做了一些研究之后，我遇到了这个小问题。

<input type="file" accept="image/*" capture="camera" />

通过添加accept和capture属性，我可以访问手机的摄像头和图片。我还应该指出，你不需要对服务器端（Node或PHP）做任何特殊的操作。它就像浏览器中的标准文件上传输入一样。

您可以在Web浏览器中打开视频设备...

<video id="cameraPlayer"></video>

// find the video devices (font/back cameras etc)
navigator.mediaDevices.enumerateDevices().then(function (devices) {
    // https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices
    devices.forEach(function (device) {
        if (device.kind === 'videoinput') {
            cameraDeviceIds.push(device.deviceId)
        }
    })
})

// attach camera output to video tag
navigator.mediaDevices.getUserMedia({
    video: { deviceId: { exact: cameraDeviceIds[currentCameraIndex] } }
}).then(function (stream) {
    document.getElementById("cameraPlayer").srcObject = stream
})

如果只需要图像，可以使用输入

<input type="file" accept="image/*" id="inputPhoto" class="hidden" capture="environment" />

   // trigger capture
   document.getElementById('inputPhoto').click()

  // event handler for change
    function onInputPhotoChange() {
    if (document.getElementById('inputPhoto').files.length === 0) {
        return
    }

    var reader = new window.FileReader()
    reader.onloadend = function (event) {
        event.target.result
        // image data
        // note you may need to rotate using EXIF data on a canvas
    }

    // Read the file into memory as dataurl
    var blob = document.getElementById('inputPhoto').files[0]
    reader.readAsDataURL(blob)
}

如果您想要在Ionic PWA应用程序中使用相机，您可以使用电容器：https://capacitor.ionicframework.com/docs/apis/camera
我实现了摄像头功能，它100%工作：

除了上面的答案，您还必须将其添加到index.html文件中，以便摄像头能够处理PWA

<script nomodule="" src="https://unpkg.com/@ionic/pwa-elements@1.3.0/dist/ionicpwaelements/ionicpwaelements.js"></script>

上面给出的解决方案只使选择的文件restricted到i图像类别只。但我们想访问相机或音频设备在这里的浏览器。所以，拯救这个挑战在这里API从浏览器的api（“浏览器是强大的现在耶”）。
getUserMedia（：真/假）
这里的<media_type>是你想要访问的媒体类型，如音频、视频。你可以将其设置为{audio: true/false}和{video:true/false}。但如果找不到媒体，将返回错误“NotFoundError”。
这里是eg;：〉
if('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices){ const stream = await navigator.mediaDevices.getUserMedia({video: true}) }

它将在Android和IOS平台上运行，带有PWA和浏览器

主页.page.ts文件

import { Component } from '@angular/core';
import { Plugins, CameraResultType, Capacitor, FilesystemDirectory, 
CameraPhoto, CameraSource } from '@capacitor/core';
const { Camera, Filesystem, Storage } = Plugins;

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor() {}
  async capturedImage(){
    const image = await Camera.getPhoto({
      resultType: CameraResultType.DataUrl, 
      source: CameraSource.Camera, 
      quality: 90 
    });
    console.log('image',image)
  }
}

home.page.html

<ion-button expand="full" (click)="capturedImage()"> Captured Image</ion-button>

通过Cordova（更具体地说是ionic，因为你在问题中标记了ionic-framework）访问相机是一个安装插件的问题，无论你是否使用ionic。有几个相机插件，但ionic推荐的一个可以在这里找到：
https://github.com/apache/cordova-plugin-camera
例如，要将插件添加到您的ionic项目，只需运行：

ionic Cordova plugin add cordova-plugin-camera

您可以在元件的.ts档中像这样使用它（例如）：

import { Camera, CameraOptions } from '@ionic-native/camera';

constructor(private camera: Camera) { }

...

const options: CameraOptions = {
  quality: 100,
  destinationType: this.camera.DestinationType.DATA_URL,
  encodingType: this.camera.EncodingType.JPEG,
  mediaType: this.camera.MediaType.PICTURE
}

this.camera.getPicture(options).then((imageData) => {
 // imageData is either a base64 encoded string or a file URI
 // If it's base64:
 let base64Image = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
 // Handle error
});

以上实现取自此处，在此处还可以找到更多详细信息：
https://ionicframework.com/docs/native/camera/