Merge pull request #6 from DY-MAKE/feature/camera-preview

camera preview

apps/frontend/components/atoms/CameraPreview/index.tsx

@@ -1,10 +1,45 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
 import { cn } from '@/utils/cn';
 
-type CameraPreviewProps = React.HTMLAttributes<HTMLVideoElement>;
+interface CameraPreviewProps {
+  className?: string;
+}
 
 export const CameraPreview = ({
   className,
-  ...args
-}: CameraPreviewProps) => {
-  return <video className={cn(className)} {...args} />;
+}: CameraPreviewProps): JSX.Element => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    const stream: Promise<MediaStream> =
+      navigator.mediaDevices.getUserMedia({
+        video: true,
+        audio: false,
+      });
+    const videoCurrent: HTMLVideoElement | null = videoRef.current;
+
+    stream.then((s: MediaStream) => {
+      if (videoCurrent) {
+        videoCurrent.srcObject = s;
+      }
+    });
+
+    return () => {
+      if (videoCurrent) {
+        videoCurrent.srcObject = null;
+      }
+    };
+  }, []);
+
+  return (
+    <video
+      ref={videoRef}
+      autoPlay
+      muted
+      className={cn('pointer-events-none', className)}
+    />
+  );
 };