49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
export function useWebcamCapture() {
|
|
let stream: MediaStream | null = null;
|
|
|
|
async function startCamera(videoElement: HTMLVideoElement): Promise<void> {
|
|
stream = await navigator.mediaDevices.getUserMedia({
|
|
video: {
|
|
facingMode: 'user',
|
|
width: { ideal: 1280 },
|
|
height: { ideal: 720 },
|
|
},
|
|
audio: false,
|
|
});
|
|
|
|
videoElement.srcObject = stream;
|
|
await videoElement.play();
|
|
}
|
|
|
|
function stopCamera(): void {
|
|
stream?.getTracks().forEach((track) => track.stop());
|
|
stream = null;
|
|
}
|
|
|
|
function capture(videoElement: HTMLVideoElement): string {
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = videoElement.videoWidth;
|
|
canvas.height = videoElement.videoHeight;
|
|
|
|
const context = canvas.getContext('2d');
|
|
|
|
if (!context) {
|
|
throw new Error('Gagal menyiapkan kanvas foto.');
|
|
}
|
|
|
|
context.save();
|
|
context.translate(canvas.width, 0);
|
|
context.scale(-1, 1);
|
|
context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
|
|
context.restore();
|
|
|
|
return canvas.toDataURL('image/jpeg', 0.85);
|
|
}
|
|
|
|
return {
|
|
startCamera,
|
|
stopCamera,
|
|
capture,
|
|
};
|
|
}
|