Video track stats (#71)

Author: kamil-stasiak

src/components/AudioDevicePanel.tsx

@@ -2,11 +2,12 @@ import { FaMicrophone } from "react-icons/fa";
 import { getUserMedia } from "../utils/browser-media-utils";
 import { DeviceInfo } from "../containers/StreamingSettingsCard";
 import { v4 as uuidv4 } from "uuid";
+import { TrackSource } from "../containers/Client";
 
 type AudioDevicePanelProps = {
   deviceId: string;
   label: string;
-  addLocalAudioStream: (stream: MediaStream, id: string) => void;
+  addLocalAudioStream: (stream: MediaStream, id: string, source: TrackSource, stop?: () => void) => void;
   setSelectedAudioId: (cameraId: DeviceInfo | null) => void;
   selected: boolean;
 };
@@ -23,7 +24,7 @@ export const AudioDevicePanel = ({
         const id = deviceId + uuidv4();
         getUserMedia(id, "audio").then((stream) => {
           setSelectedAudioId({ id: id, type: "audio", stream: stream });
-          addLocalAudioStream(stream, id);
+          addLocalAudioStream(stream, id, "navigator");
         });
       }}
     >

src/components/CameraTest.tsx

@@ -3,6 +3,7 @@ import VideoPlayer from "./VideoPlayer";
 import { useLocalStorageState, useLocalStorageStateString } from "./LogSelector";
 import { JsonComponent } from "./JsonComponent";
 import { EnumerateDevices, enumerateDevices, useUserMediaById } from "../utils/browser-media-utils";
+import { VideoTrackInfo } from "./VideoTrackInfo";
 
 export const CameraTest = () => {
   const [autostartDeviceManager, setAutostartDeviceManager] = useLocalStorageState("AUTOSTART-DEVICE-MANAGER");
@@ -147,6 +148,7 @@ export const CameraTest = () => {
                 <div className="loading"></div>
               </div>
               <VideoPlayer stream={cameraState.stream} />
+              <VideoTrackInfo track={cameraState.stream?.getVideoTracks()[0]} />
             </div>
           </div>
         </div>

src/components/CanvasTile.tsx

@@ -1,5 +1,6 @@
 import VideoPlayer from "./VideoPlayer";
 import { StreamInfo } from "./StreamingDeviceSelector";
+import { VideoTrackInfo } from "./VideoTrackInfo";
 
 type Props = {
   label: string;
@@ -11,5 +12,6 @@ export const CanvasTile = ({ selected, streamInfo }: Props) => (
   <div className="flex flex-col w-20 indicator">
     {selected && <span className="indicator-item badge badge-success badge-lg"></span>}
     <VideoPlayer stream={streamInfo.stream} />
+    <VideoTrackInfo track={streamInfo.stream?.getVideoTracks()[0]} />
   </div>
 );

src/components/DeviceTile.tsx

@@ -5,6 +5,9 @@ import AudioVisualizer from "./AudioVisualizer";
 import { CloseButton } from "./CloseButton";
 import { StreamInfo } from "./StreamingDeviceSelector";
 import VideoPlayer from "./VideoPlayer";
+import { VideoTrackInfo } from "./VideoTrackInfo";
+import { useSetAtom } from "jotai";
+import { activeLocalCamerasAtom } from "./VideoDevicePanel";
 
 type Props = {
   selectedId: DeviceInfo | null;
@@ -20,6 +23,8 @@ export const DeviceTile = ({ selectedId, setSelectedId, streamInfo, id }: Props)
   const peer = state.rooms[state.selectedRoom || ""].peers[id];
   const api = peer.client.useSelector((state) => state.connectivity.api);
   const track = peer.tracks[streamInfo.id];
+  const setActiveLocalCameras = useSetAtom(activeLocalCamerasAtom);
+
   return (
     <div
       className={`flex flex-col w-40 justify-center rounded-md indicator ${
@@ -29,12 +34,17 @@ export const DeviceTile = ({ selectedId, setSelectedId, streamInfo, id }: Props)
       <button
         className={`h-fit w-fit `}
         onClick={() => {
-          setSelectedId({ id: streamInfo.id, type: selectedId?.type || "unknown", stream: streamInfo.stream });
+          setSelectedId({
+            id: streamInfo.id,
+            type: selectedId?.type || "unknown",
+            stream: streamInfo.stream,
+          });
         }}
       >
         {isVideo ? (
-          <div className=" overflow-hidden h-24">
+          <div className="overflow-hidden">
             <VideoPlayer stream={streamInfo.stream} size={"40"} />
+            <VideoTrackInfo track={streamInfo.stream?.getVideoTracks()[0]} />
           </div>
         ) : (
           <div className="w-fit items-center flex flex-col rounded-md">
@@ -63,6 +73,11 @@ export const DeviceTile = ({ selectedId, setSelectedId, streamInfo, id }: Props)
           if (track.serverId) {
             api?.removeTrack(track.serverId);
           }
+          if (track.source === "navigator" && track.type === "video") {
+            setActiveLocalCameras((prev) => prev - 1);
+          }
+          track.stop?.();
+          track.track.stop();
           dispatch({ type: "REMOVE_TRACK", roomId: state.selectedRoom || "", trackId: track.id, peerId: id });
         }}
       />

src/components/MockVideoPanel.tsx

@@ -8,33 +8,34 @@ import { useAtom } from "jotai";
 import { useState } from "react";
 import { DeviceInfo } from "../containers/StreamingSettingsCard";
 import { v4 as uuidv4 } from "uuid";
+import { TrackSource } from "../containers/Client";
 
 type MockVideoPanelProps = {
   id: string;
-  addLocalVideoStream: (stream: MediaStream, id: string) => void;
+  addLocalVideoStream: (stream: MediaStream, id: string, source: TrackSource, stop?: () => void) => void;
   selectedDeviceId: DeviceInfo | null;
   setSelectedDeviceId: (info: DeviceInfo | null) => void;
 };
 
 type StreamGenerator = {
-  create: () => { stop: () => void; stream: MediaStream };
+  create: (quality: Quality) => { stop: () => void; stream: MediaStream };
   id: string;
 };
 
 export const heartStream: StreamGenerator = {
-  create: () => createStream("💜", "black", "high", 24),
+  create: (quality) => createStream("💜", "black", quality, 24),
   id: "HEART_STREAM",
 };
 export const frogStream: StreamGenerator = {
-  create: () => createStream("🐸", "black", "high", 24),
+  create: (quality) => createStream("🐸", "black", quality, 24),
   id: "FROG_STREAM",
 };
 export const elixirStream: StreamGenerator = {
-  create: () => createStream("🧪", "black", "high", 24),
+  create: (quality) => createStream("🧪", "black", quality, 24),
   id: "ELIXIR_STREAM",
 };
 export const octopusStream: StreamGenerator = {
-  create: () => createStream("🐙", "black", "high", 24),
+  create: (quality) => createStream("🐙", "black", quality, 24),
   id: "OCTOPUS_STREAM",
 };
 
@@ -64,10 +65,10 @@ export const MockVideoPanel = ({ addLocalVideoStream, setSelectedDeviceId, id }:
             className="btn btn-sm btn-success"
             onClick={() => {
               const uuid = uuidv4();
-              const stream = mockStreams[index].create().stream;
+              const { stream, stop } = mockStreams[index].create(mockQuality);
               const id = mockStreamNames[index] + uuid;
-              setSelectedDeviceId({ id, type: "video", stream: stream });
-              addLocalVideoStream(stream, id);
+              setSelectedDeviceId({ id, type: "video", stream });
+              addLocalVideoStream(stream, id, "mock", stop);
             }}
           >
             Start

src/components/ScreensharingPanel.tsx

@@ -3,9 +3,10 @@ import { useState } from "react";
 import { showToastError } from "./Toasts";
 import { TbScreenShare } from "react-icons/tb";
 import { v4 as uuidv4 } from "uuid";
+import { TrackSource } from "../containers/Client";
 
 type ScreensharingPanelProps = {
-  addLocalStream: (stream: MediaStream, id: string) => void;
+  addLocalStream: (stream: MediaStream, id: string, source: TrackSource, stop?: () => void) => void;
   label: string;
   setSelectedDeviceId: (trackId: DeviceInfo | null) => void;
 };
@@ -35,9 +36,9 @@ export const ScreensharingPanel = ({ label, addLocalStream, setSelectedDeviceId
                 const videoStream = new MediaStream(stream.getVideoTracks());
                 const audioStream = new MediaStream(stream.getAudioTracks());
                 setSelectedDeviceId({ id: videoId, type: "screenshare", stream: videoStream });
-                addLocalStream(videoStream, videoId);
+                addLocalStream(videoStream, videoId, "navigator");
                 if (screenshareAudio) {
-                  addLocalStream(audioStream, audioId);
+                  addLocalStream(audioStream, audioId, "navigator");
                 }
               });
           } else {

src/components/StreamingDeviceSelector.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import { VideoDevicePanel } from "./VideoDevicePanel";
 import { AudioDevicePanel } from "./AudioDevicePanel";
 import { showToastError } from "./Toasts";
@@ -7,20 +7,28 @@ import { EnumerateDevices, enumerateDevices } from "../utils/browser-media-utils
 import { MockVideoPanel } from "./MockVideoPanel";
 import { DeviceInfo } from "../containers/StreamingSettingsCard";
 import { ScreensharingPanel } from "./ScreensharingPanel";
+import { atomWithStorage } from "jotai/utils";
+import { useAtom } from "jotai";
+import { TbArrowBack } from "react-icons/tb";
+import { TrackSource } from "../containers/Client";
 
 export type StreamInfo = {
   stream: MediaStream;
   id: string;
 };
-export type DeviceIdToStream = Record<string, StreamInfo>;
 
 type StreamingDeviceSelectorProps = {
   id: string;
   selectedDeviceId: DeviceInfo | null;
   setSelectedDeviceId: (info: DeviceInfo | null) => void;
-  addLocalStream: (stream: MediaStream, id: string) => void;
+  addLocalStream: (stream: MediaStream, id: string, source: TrackSource, stop?: () => void) => void;
 };
 
+const widthAtom = atomWithStorage("width-constraint", 1280);
+const heightAtom = atomWithStorage("height-constraint", 720);
+const frameRateAtom = atomWithStorage("frame-rate-constraint", 24);
+const forceConstraintsAtom = atomWithStorage("force-constraint", true);
+
 export const StreamingDeviceSelector = ({
   id,
   selectedDeviceId,
@@ -29,6 +37,11 @@ export const StreamingDeviceSelector = ({
 }: StreamingDeviceSelectorProps) => {
   const [enumerateDevicesState, setEnumerateDevicesState] = useState<EnumerateDevices | null>(null);
 
+  const [width, setWidth] = useAtom(widthAtom);
+  const [height, setHeight] = useAtom(heightAtom);
+  const [frameRate, setFrameRate] = useAtom(frameRateAtom);
+  const [forceConstraints, setForceConstraints] = useAtom(forceConstraintsAtom);
+
   return (
     <div className="flex flex-col gap-2">
       {enumerateDevicesState?.video?.type !== "OK" && (
@@ -52,20 +65,93 @@ export const StreamingDeviceSelector = ({
       )}
 
       <div className="flex place-content-center align-baseline flex-col flex-wrap w-full gap-3">
-        {enumerateDevicesState?.video.type === "OK" &&
-          enumerateDevicesState.video.devices.map(({ deviceId, label }) => (
-            <div key={deviceId} className="join-item w-full">
-              <VideoDevicePanel
-                key={deviceId}
-                deviceId={deviceId}
-                label={label}
-                addLocalVideoStream={addLocalStream}
-                setSelectedVideoId={setSelectedDeviceId}
-                selected={selectedDeviceId?.id === deviceId}
-              />
-            </div>
-          ))}
+        {enumerateDevicesState?.video.type === "OK" && (
+          <div className="flex flex-col gap-2">
+            <div className="flex flex-col">
+              <div className="flex flex-row flex-nowrap justify-between">
+                <div className="flex flex-row items-center gap-2">
+                  <label htmlFor="force-video-constraints">Force video constraints</label>
+                  <input
+                    className="checkbox"
+                    type="checkbox"
+                    name="force-video-constraints"
+                    checked={forceConstraints}
+                    onChange={() => setForceConstraints((prev) => !prev)}
+                  />
+                </div>
 
+                <button
+                  className="btn btn-neutral btn-sm p-1 ml-1 tooltip tooltip-info tooltip-right"
+                  data-tip="Restore default"
+                  onClick={() => {
+                    setWidth(1280);
+                    setHeight(720);
+                    setFrameRate(24);
+                  }}
+                >
+                  <TbArrowBack size={"1.5em"} />
+                </button>
+              </div>
+              <div className="flex flex-row flex-nowrap items-center">
+                <label className="label flex-row gap-2">
+                  <span className="label-text">width</span>
+                  <input
+                    disabled={!forceConstraints}
+                    type="number"
+                    value={width}
+                    className="input w-full input-sm max-w-xs"
+                    onChange={(e) => {
+                      const parsed = Number.parseInt(e.target.value);
+                      if (isNaN(parsed)) return;
+                      setWidth(() => parsed);
+                    }}
+                  />
+                </label>
+                <label className="label flex-row gap-2">
+                  <span className="label-text">height</span>
+                  <input
+                    disabled={!forceConstraints}
+                    type="number"
+                    value={height}
+                    className="input w-full input-sm max-w-xs"
+                    onChange={(e) => {
+                      const parsed = Number.parseInt(e.target.value);
+                      if (isNaN(parsed)) return;
+                      setHeight(parsed);
+                    }}
+                  />
+                </label>
+                <label className="label flex-row gap-2">
+                  <span className="label-text">frame rate</span>
+                  <input
+                    disabled={!forceConstraints}
+                    type="number"
+                    value={frameRate}
+                    className="input w-full input-sm max-w-xs"
+                    onChange={(e) => {
+                      const parsed = Number.parseInt(e.target.value);
+                      if (isNaN(parsed)) return;
+                      setFrameRate(parsed);
+                    }}
+                  />
+                </label>
+              </div>
+            </div>
+            {enumerateDevicesState.video.devices.map(({ deviceId, label }) => (
+              <div key={deviceId} className="join-item w-full">
+                <VideoDevicePanel
+                  key={deviceId}
+                  deviceId={deviceId}
+                  constraints={forceConstraints ? { width, height, frameRate } : undefined}
+                  label={label}
+                  addLocalVideoStream={addLocalStream}
+                  setSelectedVideoId={setSelectedDeviceId}
+                  selected={selectedDeviceId?.id === deviceId}
+                />
+              </div>
+            ))}
+          </div>
+        )}
         {enumerateDevicesState?.audio?.type === "OK" &&
           enumerateDevicesState.audio.devices
             .filter(({ label }) => !label.startsWith("Default"))
@@ -81,13 +167,11 @@ export const StreamingDeviceSelector = ({
                 />
               </div>
             ))}
-
         <ScreensharingPanel
           addLocalStream={addLocalStream}
           setSelectedDeviceId={setSelectedDeviceId}
           label={"Screenshare"}
         />
-
         <MockVideoPanel
           id={id}
           addLocalVideoStream={addLocalStream}