user would be able to switch camera, mute and unmute

Author: imrany

src/App.tsx

@@ -18,6 +18,10 @@ export default function App(){
     window.onresize=function(){
         screen.width>1080?setIsSupported(false):setVideoConstraints({height:720, width:screen.width, facingMode:"environment"})
     }
+     
+    function changeVideoConstraints(){
+        setVideoConstraints({height:720, width:screen.width, facingMode:"user"})
+    }
 
     useEffect(()=>{
         screen.width>1080?setIsSupported(false):setVideoConstraints({height:720, width:screen.width, facingMode:"environment"})
@@ -26,7 +30,7 @@ export default function App(){
         <>
             {isSupported?(
                 <BrowserRouter>
-                    <GlobalContext.Provider value={{ videoConstraints, API_URL }}>
+                    <GlobalContext.Provider value={{ videoConstraints, changeVideoConstraints, API_URL }}>
                         <Routes>
                             <Route path="/" element={<MainPage/>}/>
                             <Route path="/search" element={<SearchPage/>}/>

src/components/utilities.ts

@@ -22,9 +22,9 @@ export const drawRect = (detections:any, ctx:any) =>{
 
                 // Set styling
                 const color = Math.floor(Math.random()*16777215).toString(16);
-                ctx.lineWidth = 20;
+                ctx.lineWidth = 2;
                 ctx.strokeStyle = '#' + color
-                ctx.font = '18px Arial';
+                ctx.font = '20px Arial';
 
                 // Draw rectangles and text
                 ctx.beginPath();   

src/context/index.ts

@@ -6,6 +6,7 @@ type ContextType={
         width?:number,
         facingMode:string
     },
+    changeVideoConstraints:any,
     API_URL:string
 }
 
@@ -15,5 +16,6 @@ export const GlobalContext=createContext<ContextType>({
         height: screen.height,
         facingMode: "user"
     },
+    changeVideoConstraints:()=>{},
     API_URL:""
 })

src/pages/MainPage.tsx

@@ -9,10 +9,11 @@ import * as cocossd from "@tensorflow-models/coco-ssd";
 import { drawRect } from "../components/utilities";
 import { GlobalContext } from "../context";
 import { IoSearch } from "react-icons/io5";
+import { IoCameraReverseSharp } from "react-icons/io5";
 
 export default function MainPage() {
   const navigate=useNavigate();
-  const { videoConstraints }=useContext(GlobalContext);
+  const { videoConstraints, changeVideoConstraints }=useContext(GlobalContext);
   const [isLoading, setIsLoading]=useState(true)
   const [object,setObject]=useState<any>([]);
   const webcamRef:any = useRef(null);
@@ -87,6 +88,18 @@ export default function MainPage() {
             ):(
                 <div className="text-center h-screen">
                     <header className="h-screen flex flex-col items-center justify-center text-white bg-[#14161a]">
+                        <div className="fixed h-[0px] z-10 top-0 left-0 right-0">
+                            <div className="flex bg-none text-white items-center justify-between m-[20px]">
+                                {/*<Link to="/">
+                                    <FaChevronLeft className="w-[22px] h-[20px]"/>
+                                </Link>
+                                <p>Search</p>*/}
+                                <button onClick={changeVideoConstraints} className="ml-auto">
+                                    <IoCameraReverseSharp className="w-[30px] h-[30px]"/>
+                                </button>
+                            </div>
+                        </div>
+
                         <Webcam
                             ref={webcamRef}
                             audio={false} 

src/pages/SearchPage.tsx

@@ -4,10 +4,11 @@ import { FaChevronLeft } from "react-icons/fa";
 import { FiMoreHorizontal } from "react-icons/fi";
 import { GlobalContext } from "../context";
 import { FaAngellist } from "react-icons/fa6";
-import { HiMiniSpeakerWave } from "react-icons/hi2";
+import { HiMiniSpeakerWave, HiMiniSpeakerXMark } from "react-icons/hi2";
 
 export default function SearchPage(){
     const { videoConstraints, API_URL }=useContext(GlobalContext);
+    const [isMuted,setIsMuted]=useState(true)
     const [results,setResults]=useState<any>(<></>)
     const [error,setError]=useState("")
     const [isLoading,setIsLoading]=useState(true)
@@ -42,6 +43,7 @@ export default function SearchPage(){
     }
 
     useEffect(()=>{
+        window.speechSynthesis.cancel()
         getResults()
     },[])
     return(
@@ -70,7 +72,25 @@ export default function SearchPage(){
                                 <FaAngellist className="w-[22px] h-[22px]"/>
                                 <p className="capitalize">{query}</p>
                             </div>
-                            <HiMiniSpeakerWave className="w-[22px] h-[22px] ml-auto"/>
+                            {isMuted?(
+                                <HiMiniSpeakerWave onClick={()=>{
+                                    setIsMuted(false)
+                                    
+                                    // Create a new instance of SpeechSynthesisUtterance
+                                    var speech = new SpeechSynthesisUtterance(results);
+                                    // Set the voice, rate, pitch, and language if desired
+                                    speech.lang = 'en-US'; // You can change the language
+                                    speech.rate = 1; // Speed (default is 1, range: 0.1 to 10)
+                                    speech.pitch = 1; // Pitch (default is 1, range: 0 to 2)
+                                    // Speak the text
+                                    window.speechSynthesis.speak(speech);
+                                }} className="w-[22px] h-[22px] ml-auto"/>
+                            ):(
+                                <HiMiniSpeakerXMark onClick={()=>{
+                                    setIsMuted(true)
+                                    window.speechSynthesis.cancel()
+                                }} className="w-[22px] h-[22px] ml-auto"/>
+                            )}
                         </div>
                     </div>
                     <div className="flex flex-col m-[20px] text-sm">