easy-camera-svelte
Introducing a user-friendly library for camera features in Svelte! This library provides a hassle-free way to capture both images and videos. With its intuitive controls such as start, stop, play, pause, captureImage, startVideoRecording, stopVideoRecording, autoOpen camera, mirrorDisplay, you can effortlessly customize your camera settings. The best part? This library does not require any additional dependencies.
Screenshot
Demo
Install
npm install @cloudparker/easy-camera-svelte --save-dev
Sample
<script lang="ts">
import EasyCamera from '$lib';
let width = 600;
let camera: EasyCamera;
let mirrorDisplay = true;
const handleImage = async () => {
let imageData = await camera.captureImage();
console.log(imageData);
};
const handleVideo = async () => {
let blob = await camera.startVideoRecording();
if (blob) {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'video.mp4';
document.body.appendChild(a);
a.click();
}
};
</script>
<div>
<EasyCamera bind:width style="border-radius:5px;" bind:this={camera} autoOpen bind:mirrorDisplay />
</div>
<button class="" type="button" on:click={() => camera.open()}>Start Camera</button>
<button class="" type="button" on:click={() => camera.close()}>Stop Camera</button>
<button class="" type="button" on:click={() => camera.pause()}>Pause</button>
<button class="" type="button" on:click={() => camera.resume()}>Resume</button>
<button class="" type="button" on:click={() => (mirrorDisplay = !mirrorDisplay)}>
{mirrorDisplay ? 'Disbale' : 'Enable'} Mirror Display
</button>
<button class="" type="button" on:click={handleImage}>Capture Image</button>
<button class="" type="button" on:click={handleVideo}>Start Video recording</button>
<button class="" type="button" on:click={()=> camera.stopVideoRecording()}>Stop Video recording</button>Props
width: number
Default: 340
Set width of the camera view, it automatically adjust the height of camra view based on the camera aspect ratio.
style: string
Style of the video view or camra view
mirrorDisplay: boolean
Default: true
Enable or Disable mirror display of the video
useFrontCamra: boolean
Default: true
Use front camera while lunching the camera view
useAudio: boolean
Default : true
User audio in video recording.
needFrames: boolean
Default : false
Incase you need all video frame data in the form of ImageData enable this option. The frame data will be publish on:frame event.
Events
on:init
Trigger when camra init, return all camera devide infos array.
on:video
Trigger when video recording stop, it return a video Blob data.
on:startVideoRecording
Trigger whhen video recording start
on:stopVideoRecording
Trigger when video Recording Stopped.
on:image
Triggered when image captured done, retrun with ImageData object or base64 image data, based on user request.
on:open
Trigger when camera oppend.
on:close
Trigger when camra closed/stopped.
on:pause
Trigger when camera paused.
on:resume
Trigger when camera resumed.
on:frame
Trigger everytime a frame rendered, it will call very frequently with ImageData object. Use the frame data for your external use.
Methods
open(): void
Open camera.
close(): void
Close camera.
pause(): void
Pause camera.
resume(): void
Resume camra.
startVideoRecording(): Promise
Start video recording and return video data Blob format.
stopVideoRecording(): video
Stop video recording
captureImage(isImageData?: boolean): Promise<ImageData | string | null>
Capture Image using camera. Pass isImageData when required ImageData instead of base64.
isRecording(): boolean
Check is recording .
switchCamera(deviceId?: string): void
Request to switch camera.
getCamraDevices(): Promise<MediaDeviceInfo[]>
Get all camera devices array