Add persistence of connection

app/page.tsx

@@ -10,6 +10,7 @@ import Webcam from 'react-webcam'
 export default function Home() {
   const [name, setName] = useState("") 
   const [avatar, setAvatar] = useState(defaultAvatarImage)
+  const [browserId, setBrowserId] = useState("")
   const [showWebcam, setShowWebcam] = useState(false)
   const webcamRef = useRef()
   const modal = useRef()
@@ -27,6 +28,12 @@ export default function Home() {
     })
   }
 
+  function uuidv4() {
+    return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, c =>
+      (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16)
+    );
+  }
+
   function takePictureAvatar() {
     const imageSrc = webcamRef.current.getScreenshot()
     setAndStoreAvatar(imageSrc)
@@ -71,6 +78,7 @@ export default function Home() {
   useEffect(() => {
     let localName = localStorage.getItem("name")
     let localAvatar = localStorage.getItem("avatar")
+    let localBrowserId = localStorage.getItem("browserId")
     if(localName != null){
       setName(localName)
     } else {
@@ -80,6 +88,14 @@ export default function Home() {
     if(localAvatar != null) {
       setAvatar(localAvatar)
     }
+
+    if(localBrowserId != null) {
+      setBrowserId(localBrowserId)
+    } else {
+      let uuid = uuidv4()
+      setBrowserId(uuid)
+      localStorage.setItem("browserId", uuid)
+    }
   }, [])
 
   return (