PWA手机摄像头访问

Question

我的要求是使用移动浏览器访问iOS和android中的移动相机。

使用Ionic PWA应用程序，我可以在iOS和android设备浏览器中访问移动相机吗？寻找使用Cordova的PWA解决方案（不是本机解决方案）。

Answer 1

在PWA上工作时。我遇到了访问移动设备的相机/图像的需求。（没有本地应用程序）。经过研究，我发现了这个小块。

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

通过添加accept和capture属性，我可以访问手机的相机和图像。我还应该指出，您不需要在服务器端（Node或PHP）做任何特别的事情。它的行为就像浏览器中的标准文件上传输入一样。

Answer 2

通过 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/