lower lag and more snappy?

packages/desktop/src/providers/StreamProvider.tsx

@@ -16,6 +16,12 @@ import useTerminalProvider from './TerminalProvider';
 import MasterLineData from '@nirvana/core/models/masterLineData.model';
 import { useEffectOnce } from 'react-use';
 
+const videoConstraints = {
+  frameRate: 30,
+  width: { max: 100 },
+  height: { max: 200 },
+};
+
 const iceServers = [
   // { urls: 'stun:stun.l.google.com:19302' },
   // { urls: 'stun:stun.l.google.com:19302' },
@@ -159,7 +165,10 @@ export function StreamProvider({ children }: { children: React.ReactChild }) {
     });
 
     navigator.mediaDevices
-      .getUserMedia({ video: true, audio: true })
+      .getUserMedia({
+        video: videoConstraints,
+        audio: true,
+      })
       .then((localMediaStream: MediaStream) => {
         setUserLocalStream(localMediaStream);
       });
@@ -309,7 +318,7 @@ function LineConnector({
 
     // todo get the user media selections
     navigator.mediaDevices
-      .getUserMedia({ video: true, audio: true })
+      .getUserMedia({ video: videoConstraints, audio: true })
       .then((localMediaStream: MediaStream) => {
         // todo check if already in peer map? keeping it simple for now
         // a peer relationship between me and someone for this particular channel so that I can just enable or disable this particular stream

packages/desktop/src/tree/protected/terminal/line/LineDetails.tsx

@@ -5,7 +5,7 @@ import useStreams from '../../../../providers/StreamProvider';
 import { LineMemberState } from '@nirvana/core/models/line.model';
 import LineIcon from '../../../../components/lineIcon';
 import { FiActivity, FiSettings, FiSun } from 'react-icons/fi';
-import { Avatar, Tooltip } from 'antd';
+import { Avatar, Spin, Tooltip } from 'antd';
 import useTerminalProvider from '../../../../providers/TerminalProvider';
 
 export default function LineDetails() {
@@ -182,14 +182,16 @@ function StreamPlayer({ peerStream }: { peerStream: MediaStream }) {
   }, [peerStream]);
 
   return (
-    <video
-      ref={streamRef}
-      height={350}
-      width={400}
-      className={'shadow-xl rounded'}
-      autoPlay
-      muted
-    />
+    <>
+      <video
+        ref={streamRef}
+        height={300}
+        width={400}
+        className={'shadow-xl rounded'}
+        autoPlay
+        muted
+      />
+    </>
   );
 }