ionic 3支持在WKWebView中访问摄像头和麦克风_在浏览器上运行的Ionic 3应用程序中访问摄像头 - 腾讯云开发者社区

Ionic 3 默认使用 UIWebView，但从 Ionic 4 开始，它切换到了 WKWebView

要在 Ionic 3 中启用 WKWebView 并访问摄像头和麦克风，请按照以下步骤操作：

首先，确保您的设备或模拟器支持 WKWebView。对于 iOS 设备，WKWebView 是默认的 WebView。对于 Android 设备，您需要安装 Crosswalk 插件。
安装 Crosswalk 插件：

ionic cordova plugin add cordova-plugin-crosswalk-webview
npm install --save @ionic-native/crosswalk-webview

在 config.xml 文件中添加以下内容以启用 WKWebView：

<preference name="WKWebViewOnly" value="true" />
<preference name="SuppressesIncrementalRendering" value="false" />
<preference name="android-minSdkVersion" value="19" />
<preference name="BackupWebStorage" value="none" />

在 app.module.ts 文件中导入 CrosswalkWebView 并将其添加到 providers 数组中：

import { CrosswalkWebView } from '@ionic-native/crosswalk-webview/ngx';

@NgModule({
  ...
  providers: [
    ...
    CrosswalkWebView
  ]
})
export class AppModule { }

现在，您可以在您的应用程序中使用 WKWebView。要访问摄像头和麦克风，请使用 Cordova 插件，如 cordova-plugin-camera 和 cordova-plugin-media。

例如，要使用摄像头，请安装 cordova-plugin-camera 插件：

ionic cordova plugin add cordova-plugin-camera
npm install --save @ionic-native/camera

然后，在您的组件中使用它：

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

constructor(private camera: Camera) {}

takePicture() {
  const options: CameraOptions = {
    quality: 100,
    destinationType: this.camera.DestinationType.FILE_URI,
    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 (DATA_URL):
    let base64Image = 'data:image/jpeg;base64,' + imageData;
  }, (err) => {
    // Handle error
  });
}

对于麦克风，您可以使用类似的方法，使用 cordova-plugin-media 插件。

请注意，访问摄像头和麦克风需要用户授权。确保在应用程序中请求相应的权限，并在 config.xml 文件中添加以下内容：

<platform name="android">
  <config-file parent="/manifest" target="AndroidManifest.xml">
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
  </config-file>
</platform>

<platform name="ios">
  <config-file parent="NSCameraUsageDescription" target="*-Info.plist">
    <string>We need access to your camera to take pictures.</string>
  </config-file>
  <config-file parent="NSMicrophoneUsageDescription" target="*-Info.plist">
    <string>We need access to your microphone to record audio.</string>