From 2186ebcc79a8d7e1b46bd7d56f3e919d2e8f88d0 Mon Sep 17 00:00:00 2001
From: imrany <imranmat254@gmail.com>
Date: Wed, 16 Oct 2024 18:37:37 +0300
Subject: [PATCH] user would be able to switch camera, mute and unmute
---
src/App.tsx | 6 +++++-
src/components/utilities.ts | 4 ++--
src/context/index.ts | 2 ++
src/pages/MainPage.tsx | 15 ++++++++++++++-
src/pages/SearchPage.tsx | 24 ++++++++++++++++++++++--
5 files changed, 45 insertions(+), 6 deletions(-)
diff --git a/src/App.tsx b/src/App.tsx
index a74b212..e8cafbe 100644
--- a/src/App.tsx
+++ b/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/>}/>
diff --git a/src/components/utilities.ts b/src/components/utilities.ts
index 1758331..2e9a6cd 100644
--- a/src/components/utilities.ts
+++ b/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();
diff --git a/src/context/index.ts b/src/context/index.ts
index 68c6417..5fd5b6a 100644
--- a/src/context/index.ts
+++ b/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:""
})
diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
index 7449169..1d99eed 100644
--- a/src/pages/MainPage.tsx
+++ b/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}
diff --git a/src/pages/SearchPage.tsx b/src/pages/SearchPage.tsx
index 854ad52..d007d8d 100644
--- a/src/pages/SearchPage.tsx
+++ b/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">