Last Cam is a Cordova Plugin that brings to the table what other camera plugins lack: Video Capture capabilities within a custom Camera view.
Releases are being kept up to date when appropriate. However, this plugin is under constant development. As such it is recommended to use master to always have the latest fixes & features.
PR's are greatly appreciated. Maintainer(s) wanted.
- Start a camera preview from HTML code.
- Maintain HTML interactivity.
- Set a custom position for the camera preview box.
- Set a custom size for the preview box.
Use any one of the installation methods listed below depending on which framework you use.
To install the master version with latest fixes and features
cordova plugin add https://github.com/bengejd/cordova-plugin-last-cam.git
ionic cordova plugin add https://github.com/bengejd/cordova-plugin-last-cam.git
And Ionic-Native inclusion.
npm install @ionic-native/LastCam
Import LastCam into your constructor.
import {LastCam} from '@ionic-native/last-cam';
...
constructor(private lastCam: LastCam) {
}
...
It is not possible to test in a simulator. You must use a real device for all testing.
If you are developing for iOS 10+ you must also add the following to your config.xml
<config-file platform="ios" target="*-Info.plist" parent="NSCameraUsageDescription" overwrite="true">
<string>Allow the app to use your camera</string>
</config-file><config-file platform="ios" target="*-Info.plist" parent="NSPhotoLibraryUsageDescription" overwrite="true">
<string>Allow the app to save media to your camera roll</string>
</config-file><config-file platform="ios" target="*-Info.plist" parent="NSMicrophoneUsageDescription" overwrite="true">
<string>Allow access to your microphone to record video with audio</string>
</config-file>Be sure to include the following in your app.scss, or else the camera-preview will not display.
html, body, .ion-app, .ion-content {
background-color: transparent !important;
}LastCam will build and link the underlying framework on it's own, but it will display a few errors within your XCode project on run-time. This is purely a cosmetic error, and will not affect the functioning of the plugin. I am working on a solution for this in the meantime, but do not worry. The plugin will compile and run without issue.
Starts the camera preview instance.
Options: All options stated are optional and will default to values here
x- Defaults to 0y- Defaults to 0width- Defaults to window.screen.widthheight- Defaults to window.screen.heightcamera- Defaults to back camera
let options = {
x: 0,
y: 0,
width: window.screen.width,
height: window.screen.height,
camera: ".Back",
};
CameraPreview.startCamera(options)
.then(() => { })
.catch(error => console.log(error));Stops the camera preview instance.
CameraPreview.stopCamera();Returns a string containing the camera direction ('front' or 'back')
CameraPreview.switchCamera()
.then(direction => {
console.log('New camera direction: ', direction)
})
.catch(err => {
console.log(err);
});Switches the flash mode between 0 (off), 1 (on) and 2(auto).
Returns an int containing the flash mode: 0, 1, or 2
CameraPreview.switchFlash()
.then(mode => {
console.log('New flash mode: ', mode)
})
.catch(err => {
console.log(err);
});Takes a picture
CameraPreview.takePicture().then(base64PictureData) {
/*
base64PictureData is base64 encoded jpeg image. Use this data to store to a file or upload.
Its up to the you to figure out the best way to save it to disk or whatever for your application.
*/
}; imageSrcData = 'data:image/jpeg;base64,' + base64PictureData;Now it can be put into a regular <img src="imageSrcData"> tag.
In your component.ts file
import {DomSanitizer} from '@angular/platform-browser';
...
constructor(private DomSanitizer: DomSanitizer){
...
}In your component.html file
<img [src]="DomSanitizer.bypassSecurityTrustResourceUrl(imageSrcData)">Starts the video recording session. You will see a brief flicker. This is not a bug.
CameraPreview.startVideoCapture().then(() => {
console.log('Video Capture started');
})
.catch(err => {
console.log(err);
});Stops the video recording session. You will see a brief flicker. This is not a bug.
Example fileURI that is returned: /var/mobile/Containers/Data/Application/.../filename.mp4
CameraPreview.startVideoCapture().then(fileURI => {
/*
fileURI is a local path to the video recording on the user's device.
Its up to the you to figure out the best way display and upload the video source.
*/
})
.catch(err => {
console.log(err);
});This returns the current recording time, while actively recording.
CameraPreview.recordingTimer().then(time => {
console.log('Recording length: ', time);
})
.catch(err => {
console.log(err);
});cordova-plugin-camera-preview - Custom Preview, but does not allow video capture & has high processing usage.
cordova-background-video - Custom preview, only allows video capture.
cordova-plugin-camera - Native camera interface. Allows for Video & Photo capture. Limited customization.
cordova-plugin-video-capture-plus - No longer maintained. Limited customizations.
cordova-plugin-media-capture - Last time I checked, this had some processing issues & bugs that had not been addressed.
MIT License
Copyright (c) 2018 Jordan Benge
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
LastCam was Created by Jordan Benge @bengejd
CameraManager, which LastCam utilizes was created by imaginary-cloud @imaginary-cloud
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent