- {cameraMode ? 'Scanning from camera' : 'Connect with Camera'}
+ {cameraMode ? 'Camera is running' : 'Connect with Camera'}
{cameraMode
diff --git a/src/components/features/WebCamera.tsx b/src/components/features/WebCamera.tsx
index da0d360..54b95d0 100644
--- a/src/components/features/WebCamera.tsx
+++ b/src/components/features/WebCamera.tsx
@@ -1,22 +1,61 @@
import { useCallback, useEffect, useRef, useState } from 'react';
import Dropdown from '../common/Dropdown';
import Webcam from 'react-webcam';
+import { FILTERS } from '../../utils/camera.utils';
type WebCameraPropsTypes = {
cameraMode: boolean;
setImgSrc: any;
};
function WebCamera({ cameraMode, setImgSrc }: WebCameraPropsTypes) {
- const webcamRef = useRef(null);
+ const webcamRef = useRef(null);
const [deviceId, setDeviceId] = useState({});
const [devices, setDevices] = useState<[]>([]);
const [activeDevice, setActiveDevice] = useState(null);
+ const [mirrored, setMirrored] = useState(false);
+ const [filter, setFilter] = useState("none");
+ const [thumbnail, setThumbnail] = useState("none");
+
const videoConstraints = {
facingMode: 'user',
deviceId: deviceId,
};
+ // Prefer camera resolution nearest to 1280x720.
+ // const constraints = {
+ // audio: true,
+ // video: { width: 1280, height: 720 },
+ // };
+
+ // async function getMedia(constraints: any) {
+ // let stream = null;
+
+ // try {
+ // stream = await navigator.mediaDevices.getUserMedia(constraints);
+ // /* use the stream */
+ // } catch (err) {
+ // /* handle the error */
+ // }
+ // }
+
+ // navigator.mediaDevices
+ // .getUserMedia(constraints)
+ // .then((mediaStream) => {
+ // const video: any = document.querySelector("video");
+ // video.srcObject = mediaStream;
+ // video.onloadedmetadata = () => {
+ // video.play();
+ // };
+
+
+ // })
+ // .catch((err) => {
+ // // always check for errors at the end.
+ // console.error(`${err.name}: ${err.message}`);
+ // });
+
+
const onChangeAction = (device: any) => {
setDeviceId(device.deviceId);
setActiveDevice(device);
@@ -24,10 +63,16 @@ function WebCamera({ cameraMode, setImgSrc }: WebCameraPropsTypes) {
const capture = useCallback(() => {
// @ts-ignore
- const imageSrc = webcamRef.current.getScreenshot();
+ const imageSrc = webcamRef.current?.getScreenshot();
setImgSrc(imageSrc);
}, [webcamRef, setImgSrc]);
+ const captureThumbnail = useCallback(() => {
+ // @ts-ignore
+ const imageSrc = webcamRef.current?.getScreenshot();
+ setThumbnail(imageSrc);
+ }, [webcamRef, setImgSrc]);
+
const handleDevices = useCallback(
// @ts-ignore
(mediaDevices) =>
@@ -38,10 +83,12 @@ function WebCamera({ cameraMode, setImgSrc }: WebCameraPropsTypes) {
[setDevices]
);
+
useEffect(() => {
navigator.mediaDevices.enumerateDevices().then(handleDevices);
}, [handleDevices]);
+
return (
{cameraMode ? (
@@ -61,10 +108,40 @@ function WebCamera({ cameraMode, setImgSrc }: WebCameraPropsTypes) {
audio={false}
ref={webcamRef}
videoConstraints={videoConstraints}
+ style={{
+ // transform: mirrored ? "scaleX(-1)" : "none"
+ filter: filter
+ }}
+ mirrored={mirrored}
/>
+
+
+ Apply Filters
+
+ {
+ FILTERS.map((_filter, index) =>
+ setFilter(_filter)}
+ alt={_filter}
+ title={_filter}
+ style={{
+ filter: _filter
+ }}
+ />
+ )
+ }
+
-
+
+ {" "}
>
) : (
Switch on the camera
diff --git a/src/utils/camera.utils.ts b/src/utils/camera.utils.ts
new file mode 100644
index 0000000..5ddcc4f
--- /dev/null
+++ b/src/utils/camera.utils.ts
@@ -0,0 +1 @@
+export const FILTERS = ["grayscale(1)", "invert(1)", "sepia(1)", "brightness(5)"];
\ No newline at end of file
diff --git a/src/views/Camera.tsx b/src/views/Camera.tsx
index 8220b3c..2a94379 100644
--- a/src/views/Camera.tsx
+++ b/src/views/Camera.tsx
@@ -26,7 +26,10 @@ export default function Camera() {
{loading && }
-
+
+
diff --git a/tailwind.config.js b/tailwind.config.js
index e68506d..3e246f8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,5 +4,6 @@ export default {
theme: {
extend: {},
},
+ darkMode: 'class',
plugins: [require('@tailwindcss/forms')],
};