showing localstream and getting to understand more about streams and such

packages/desktop/src/pages/Home/header/index.tsx

@@ -10,8 +10,8 @@ import {
 } from "@mui/material";
 import { Check, Logout } from "@mui/icons-material";
 import Logo, { LogoType } from "../../../components/Logo";
+import { useEffect, useRef, useState } from "react";
 import { useRecoilState, useSetRecoilState } from "recoil";
-import { useRef, useState } from "react";
 
 import { GlobalHotKeys } from "react-hotkeys";
 import SocketChannels from "@nirvana/core/sockets/channels";
@@ -28,6 +28,24 @@ export default function Header() {
   const [anchorEl, setAnchorEl] = useState(null);
   const openAvatarMenu = Boolean(anchorEl);
 
+  const [userVideo, setUserVideo] = useState<any>(null);
+
+  useEffect(() => {
+    navigator.mediaDevices
+      .getUserMedia({ video: true, audio: false })
+      .then((localMediaStream: any) => {
+        console.log(localMediaStream);
+
+        setUserVideo(localMediaStream);
+
+        var video = document.querySelector("video");
+        video.srcObject = localMediaStream;
+        video.onloadedmetadata = function (e) {
+          video.play();
+        };
+      });
+  }, []);
+
   const handleClick = (event: any) => {
     setAnchorEl(event.currentTarget);
   };
@@ -69,6 +87,8 @@ export default function Header() {
     <>
       <GlobalHotKeys handlers={handlers} keyMap={keyMap}></GlobalHotKeys>
 
+      <video height="400" width="430" autoPlay />
+
       <div className="flex flex-row items-center bg-zinc-800 h-20 px-5">
         <Logo type={LogoType.small} className="scale-[0.4]" />
         <input