implemented CameraStream

src/components/camera-stream/CameraStream.module.css

@@ -0,0 +1,22 @@
+.cameraContainer {
+  position: absolute;
+}
+
+.checkBoxStyle {
+  font-family: Arial, sans-serif;
+  text-align: left;
+  color: #4a4a4a;
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.videoStream {
+  border-radius: 50px;
+  border: 2px solid #e6e6e6;
+  max-width: 500px;
+  max-height: 500px;
+}
+
+.displayNone{
+  display: none;
+}

src/components/camera-stream/CameraStream.tsx

@@ -0,0 +1,52 @@
+import { useEffect, useRef, useState } from 'react'
+import styles from './CameraStream.module.css'
+
+export const CameraStream = () => {
+  const videoRef = useRef<HTMLVideoElement>(null)
+  const [showCam, setShowCam] = useState(false)
+
+  const getVideo = async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({
+        video: { width: 1280, height: 720 },
+      })
+
+      const video = videoRef.current
+
+      if (!video) return
+
+      video.srcObject = stream
+      video.play()
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
+  useEffect(() => {
+    getVideo()
+  }, [])
+
+  const handleChange = () => {
+    setShowCam(!showCam)
+  }
+
+  return (
+    <div className={styles.cameraContainer}>
+      <div className={styles.checkBoxStyle}>
+        <input
+          type="checkbox"
+          id="showVideo"
+          checked={showCam}
+          onChange={handleChange}
+        ></input>
+        <label htmlFor="showVideo">Show video</label>
+      </div>
+      <div>
+        <video
+          className={showCam ? styles.videoStream : styles.displayNone}
+          ref={videoRef}
+        ></video>
+      </div>
+    </div>
+  )
+}

src/components/demo-scroll/DemoScroll.module.css

@@ -23,7 +23,7 @@
   color: #1a73e8;
   font-family: 'Courier New', Courier, monospace;
   font-size: 16px;
-  margin-left: 18rem;
+  margin-left: 15rem;
 }
 
 .spanName {

src/components/infinite-scroll/InfiniteScroll.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react'
+import { CameraStream } from '../camera-stream/CameraStream'
 import styles from './InfiniteScroll.module.css'
 
 type InfiniteScrollProps<T> = {
@@ -69,14 +70,17 @@ export const InfiniteScroll = <T,>({
   }, [getDataFunc, isLoading, maxItemsInList, itemsPerPage, page])
 
   return (
-    <div className={styles.listContainer}>
-      <ul className={styles.list}>
-        {items.map((item, index) => (
-          <React.Fragment key={index}>{renderItem(item)}</React.Fragment>
-        ))}
-      </ul>
-      {isLoading && <p>Loading...</p>}
-      <div ref={observerTarget}></div>
-    </div>
+    <>
+      <CameraStream />
+      <div className={styles.listContainer}>
+        <ul className={styles.list}>
+          {items.map((item, index) => (
+            <React.Fragment key={index}>{renderItem(item)}</React.Fragment>
+          ))}
+        </ul>
+        {isLoading && <p>Loading...</p>}
+        <div ref={observerTarget}></div>
+      </div>
+    </>
   )
 }

src/index.css

@@ -1,75 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-#root {
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

src/main.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { DemoScroll } from './components/demo-scroll/DemoScroll'
-import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>