Customizable camera library for Vue 3, within asking permission to user.
- Asking Permission to user
- Flip camera rear/front
- Result blob/b64
- Mirror Camera
npm i @malbuf/vue-snapster
To use it in your Vue app
First, import in your custom component for proxy camera
import VxCamera from "@malbuf/vue-snapster"
Second, create ref for canvas and video:
- video for camera places
- canvas for result after camera taken
const videoRef = ref<HTMLVideoElement>();
const canvasRef = ref<HTMLCanvasElement>();
Third, create variable to memoize your camera instance
const cameraRef = ref();
Fourth, create an function for starting camera
example:
const permissionDenied = ref(false);
const isCameraOpen = ref(false);
async function startCamera () {
const checkPermission = setInterval(() => {
if (isCameraOpen.value) {
clearInterval(checkPermission);
} else {
permissionDenied.value = true;
clearInterval(checkPermission);
}
}, 1000);
cameraRef.value = await new VxCamera(videoRef.value!, canvasRef.value!)
.setConstraint({
video: {
facingMode: "environment",
height: {
min: 480,
max: 480,
ideal: 480,
},
width: {
min: 480,
max: 480,
ideal: 480,
},
},
audio: false,
})
.requestPermission()
.then((camera) => camera)
.catch((err) => {
console.error(err);
});
cameraRef.value?.start().finally(() => (isCameraOpen.value = true));
}
- reference of constraint MDN MediaTrackConstraints
Fifth, taking a picture and save as blob/b64
const result = await cameraRef.value?.snapAsBlob().then((data: any) => data)
// or
const result = await cameraRef.value?.snapAsBase64().then((data: any) => data)
snapAsBase64 or snapAsBlob
That was example using the library to your project.
Contributions are always welcome! Feel free to fork the repository and submit pull requests.
If you find any bug or have a feature request, please file an issue on Github.
Happy Developing!