add webcam component start working on photo

frontend/src/components/chatPage/ChatPage.jsx

@@ -11,8 +11,10 @@ import { sendMessage, storeMessage, fileMessage } from '../../reducers/messageRe
 import { editMessage } from '../../reducers/messageReducer';
 import { SwitchButton } from './SwitchButton';
 import { MessageEditorMenu } from './MessageEditorMenu.jsx';
-import imgBtn from '../../assets/img/gg.png'
+import imgBtn from '../../assets/img/gg.png';
+import imgBtnPhoto from '../../assets/img/photo.png'
 import './chatPage.scss';
+import WebcamCapture from './service/webCam/WebcamCapture';
 
 
 export const ChatPage = () => {
@@ -29,9 +31,16 @@ export const ChatPage = () => {
 
     const [message, setMessage] = useState({message: ''});
     const [isUserTyping, setUserTyping] = useState([]);
+    const [isCamActiv, setisCamActiv] = useState(false);
     
     const isTabletorMobile = (window.screen.width < 730);
 
+
+    const webcamEventHandler = () => {
+        setisCamActiv(!isCamActiv)
+
+    }
+
     useEffect(() => {
         if(socket) {
             socket.on('writing', (data) => { 
@@ -61,11 +70,13 @@ export const ChatPage = () => {
                 { isTabletorMobile ? <SwitchButton/> : null}
                 
                 <Box className ={isTabletorMobile ? 'rootMessageFormMobile':'rootMessageForm'} >
-                    
+                {isCamActiv ? <WebcamCapture />:""}
                     <MessageForm/>
 
                     {isUserTyping.isTyping && (isUserTyping.userName !== user.userName)? <span> User {isUserTyping.userName} typing..</span> : ""}
+                     
 
+                     
                     <Box 
 
                         component="form" 
@@ -84,7 +95,6 @@ export const ChatPage = () => {
                             margin: '20px 5px'}
                            
                         }>
-
                         <Button
                             variant="contained" 
                             component="label"
@@ -108,7 +118,22 @@ export const ChatPage = () => {
                         />
 
                        
-                        </Button>            
+                        </Button>    
+                        <Button
+                            variant="contained" 
+                            component="label"
+                            sx = {{
+                                minWidth: 'auto',
+                                backgroundImage:'url(' + imgBtnPhoto + ')' ,
+                                backgroundPosition: 'center', 
+                                backgroundRepeat: "no-repeat", 
+                                backgroundSize: '20px 20px'
+
+                            }}
+
+                            onClick = {() => webcamEventHandler()}
+                        >
+                        </Button>          
 
                         <TextareaAutosize
                             id="outlined-basic" 

frontend/src/components/chatPage/service/webCam/WebcamCapture.jsx

@@ -0,0 +1,43 @@
+import WebcamComponent from "./WebcamComponent";
+import {useRef, useState, useCallback} from 'react';
+
+
+const WebcamCapture = () => {
+
+    const webcamRef = useRef(null);
+    const [imgSrc, setImgSrc] = useState(null);
+    console.log(webcamRef)
+
+    const capture = useCallback(() => {
+
+  
+     // const imageSrc = webcamRef.current.getScreenshot();
+      //setImgSrc(imageSrc);
+    }, [webcamRef, setImgSrc]);
+  
+    return (
+      <div style={{
+        'maxHeight': '350px',
+        'maxWidth': '350px',
+        'position': 'absolute',
+        'top': '10%', 
+        "left": '10%',
+        'zIndex': 9999,
+        
+    }}>
+        <WebcamComponent
+          audio={false}
+          ref={webcamRef}
+          screenshotFormat="image/jpeg"
+        />
+        <button onClick={capture}>Capture photo</button>
+        {imgSrc && (
+          <img
+            src={imgSrc}
+          />
+        )}
+      </div>
+    );
+  };
+
+  export default WebcamCapture;

frontend/src/components/chatPage/service/webCam/WebcamComponent.jsx

@@ -0,0 +1,9 @@
+import Webcam from "react-webcam";
+
+const WebcamComponent = () => <Webcam style={{
+    'maxHeight': '350px',
+    'maxWidth': '350px'
+}}/>;
+
+
+export default WebcamComponent;

frontend/src/reducers/socketReducer.js

@@ -4,6 +4,7 @@ import { store } from '../store';
 import { removeToken } from './userDataReducer';
 
 
+
 const initialState = {
     socketStatus: 'idle',
     socket: null,
@@ -15,6 +16,7 @@ const initialState = {
     usersWriting: []
 }
 
+
 const SOCKET_URL =  process.env.REACT_APP_SERVER_URL || 'http://localhost:5000'; 
 
 const connectToSocket = (event) => {