Question

Showing camera preview in HTML

Requires Cordova plugin: https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git. For more info, please see the Cordova Camera Preview docs.

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

Ionic Camera Preview插件的安装(Installation)

Community(社区版)Enterprise(企业版)

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

Ionic EE comes with fully supported and maintained plugins from the Ionic Team. Learn More or Contact Us

ionic enterprise register --key=YOURPRODUCTKEY npm install @ionic-enterprise/camera-preview 

Ionic Camera Preview插件支持的平台(Supported Platforms)

• Android
• iOS

Ionic Camera Preview插件的用法(Usage)

import { CameraPreview, CameraPreviewPictureOptions, CameraPreviewOptions, CameraPreviewDimensions } from '@ionic-native/camera-preview/ngx';

constructor(private cameraPreview: CameraPreview) { }

...

// camera options (Size and location). In the following example, the preview uses the rear camera and display the preview in the back of the webview
const cameraPreviewOpts: CameraPreviewOptions = {
  x: 0,
  y: 0,
  width: window.screen.width,
  height: window.screen.height,
  camera: 'rear',
  tapPhoto: true,
  previewDrag: true,
  toBack: true,
  alpha: 1
}

// start camera
this.cameraPreview.startCamera(cameraPreviewOpts).then(
  (res) => {
    console.log(res)
  },
  (err) => {
    console.log(err)
  });

// Set the handler to run every time we take a picture
this.cameraPreview.setOnPictureTakenHandler().subscribe((result) => {
  console.log(result);
  // do something with the result
});


// picture options
const pictureOpts: CameraPreviewPictureOptions = {
  width: 1280,
  height: 1280,
  quality: 85
}

// take a picture
this.cameraPreview.takePicture(this.pictureOpts).then((imageData) => {
  this.picture = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
  console.log(err);
  this.picture = 'assets/img/test.jpg';
});

// take a snap shot
this.cameraPreview.takeSnapshot(this.pictureOpts).then((imageData) => {
  this.picture = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
  console.log(err);
  this.picture = 'assets/img/test.jpg';
});


// Switch camera
this.cameraPreview.switchCamera();

// set color effect to negative
this.cameraPreview.setColorEffect('negative');

// Stop the camera preview
this.cameraPreview.stopCamera();