我的要求是使用移动浏览器访问iOS和android中的移动相机。
使用 Ionic PWA 应用程序可以在 iOS 和 android 设备浏览器中访问移动相机吗？寻找使用 Cordova 的 PWA 解决方案（不是本机解决方案）。
【问题讨论】：
标签： ionic-framework cordova-plugins progressive-web-apps
在开发 PWA 时。我遇到了访问移动设备的相机/图像的需求。（本机应用程序是不可能的）。在做了一些研究之后，我发现了这个小金块。
<input type="file" accept="image/*" capture="camera" />
通过添加接受和捕获属性，我能够访问手机的摄像头和图像。我还应该指出，您不需要对服务器端（Node 或 PHP）做任何特别的事情。它就像浏览器中的标准文件上传输入一样。
【讨论】：
您可以在网络浏览器中打开视频设备...
<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 应用中使用相机，你可以使用 Capacitor： 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>
【讨论】：
上面给出的解决方案只选择限制为 i 的文件 仅限法师类别。但是我们想在这里访问相机或音频设备 的浏览器。 所以，为了解决这个挑战，来自浏览器的 api("browsers are 现在很强大，是的”）。
getUserMedia(:true/false)
这里<media_type> 是您要访问的媒体类型，例如
音频视频
您可以将其设置为{audio: true/false} 和{video:true/false}。
但是如果找不到媒体，则会返回错误“NotFoundError”。
这里是例如； :>
if('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices){ const stream = await navigator.mediaDevices.getUserMedia({video: true}) }
【讨论】：
它将在带有 PWA 和浏览器的 Android 和 Ios 平台上运行
home.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
});
上述实现取自此处，还可以在此处找到更多详细信息：
【讨论】：