Question

我的要求是使用移动浏览器访问iOS和Android中的移动摄像头。

使用Ionic PWA app我可以在iOS和Android设备浏览器中访问移动相机吗？使用Cordova（非原生解决方案）寻找PWA解决方案。

Answer 1

在制作PWA时。我遇到了访问移动设备的相机/图像的需要。（本机应用程序是不可能的）。在做了一些研究后，我偶然发现了这个小金块。

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

通过添加接受和捕获属性，我可以访问手机的相机和图像。我还应该指出，您不需要对服务器端（节点或PHP）执行任何特殊操作。它的作用就像浏览器中的标准文件上传输入一样。

Answer 2

如果要在Ionic PWA应用程序中使用相机，可以使用电容器： https://capacitor.ionicframework.com/docs/apis/camera

我实现了摄像头功能，并且可以100％工作：

Answer 3

通过Cordova访问相机（更具体地说，因为您在问题中标记了离子框架，因此无论您是否使用离子，都需要安装插件）。有几个相机插件，但离子推荐的插件可以在这里找到：

https://github.com/apache/cordova-plugin-camera

例如，要将插件添加到离子项目中，只需运行：

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/

Answer 4

除了上述答案外，您还必须将其添加到index.html文件中，以使相机可以在PWA上工作

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

Answer 5

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

<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)
}

Answer 6

以上给出的解决方案仅使选择的文件限制为i 仅法师类别。但是我们想在这里访问摄像机或音频设备浏览器。因此，要挽救这种挑战，请使用浏览器中的api（“浏览器功能强大，是的”）。

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}) }

Answer 7

它将在带有 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>

PWA移动摄像头访问

7 个答案: