Music mode with krisp

daily-solutions · Aug 2, 2024 · 543351d · 543351d
1 parent 06c8abe
commit 543351d
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 15 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -32,7 +32,6 @@ export default function App() {
   // @ts-expect-error add callObject to window for debugging
   window.callObject = callObject;
 
-  const [inputSettingsUpdated, setInputSettingsUpdated] = useState(false);
   const [enableBlurClicked, setEnableBlurClicked] = useState(false);
   const [enableBackgroundClicked, setEnableBackgroundClicked] = useState(false);
   const [dailyRoomUrl, setDailyRoomUrl] = useState("");
@@ -52,16 +51,18 @@ export default function App() {
     console.error("Camera error:", cameraError);
   }
 
-  const { errorMsg, updateInputSettings } = useInputSettings({
+  const { errorMsg, updateInputSettings, inputSettings } = useInputSettings({
     onError(ev) {
-      console.log("Input settings error (daily-react)", ev);
+      logEvent(ev);
     },
     onInputSettingsUpdated(ev) {
-      setInputSettingsUpdated(true);
-      console.log("Input settings updated (daily-react)", ev);
+      logEvent(ev);
     },
   });
 
+  const noiseCancellationEnabled =
+    inputSettings?.audio?.processor?.type === "noise-cancellation";
+
   const { startScreenShare, stopScreenShare, screens } = useScreenShare();
 
   const logEvent = useCallback((evt: DailyEventObject) => {
@@ -113,10 +114,6 @@ export default function App() {
     onCPULoadChange: logEvent,
   });
 
-  if (cpuLoad.state !== "low") {
-    console.log("CPU Load:", cpuLoad);
-  }
-
   const { startRecording, stopRecording } = useRecording({
     onRecordingData: logEvent,
     onRecordingError: logEvent,
@@ -128,7 +125,6 @@ export default function App() {
   useDailyEvent("track-started", logEvent);
   useDailyEvent("track-stopped", logEvent);
   useDailyEvent("started-camera", logEvent);
-  useDailyEvent("input-settings-updated", logEvent);
   useDailyEvent("loading", logEvent);
   useDailyEvent("loaded", logEvent);
   useDailyEvent("load-attempt-failed", logEvent);
@@ -145,9 +141,6 @@ export default function App() {
     logEvent(nonFatalError);
   }
 
-  // Error logging for background effects
-  useDailyEvent("input-settings-updated", logEvent);
-
   const enableBlur = () => {
     if (!callObject || enableBlurClicked) {
       return;
@@ -191,6 +184,22 @@ export default function App() {
     });
   };
 
+  const toggleKrisp = () => {
+    if (!callObject) {
+      return;
+    }
+
+    updateInputSettings({
+      audio: {
+        processor: {
+          type: noiseCancellationEnabled ? "none" : "noise-cancellation",
+        },
+      },
+    })?.catch((err) => {
+      console.error("Error enabling Krisp", err);
+    });
+  };
+
   // Join the room with the generated token
   const joinRoom = () => {
     if (!callObject) {
@@ -422,6 +431,19 @@ export default function App() {
           Enable Background
         </button>
         <br />
+        <button
+          disabled={noiseCancellationEnabled}
+          onClick={() => toggleKrisp()}
+        >
+          Enable Krisp
+        </button>
+        <button
+          disabled={!noiseCancellationEnabled}
+          onClick={() => toggleKrisp()}
+        >
+          Disable Krisp
+        </button>
+        <br />
         <button onClick={() => startScreenShare()}>Start Screen Share</button>
         <button onClick={() => stopScreenShare()}>Stop Screen Share</button>
         <br />
@@ -452,10 +474,13 @@ export default function App() {
       ))}
       <DailyAudio />
       <div id="meetingState">Meeting State: {callObject?.meetingState()}</div>
-      {inputSettingsUpdated && <div>Input settings updated</div>}
+      {inputSettings && <div>Input settings updated</div>}
       {errorMsg && <div id="errorMsg">{errorMsg}</div>}
       <div id="participantCount">Participant Counts: {participantCounts}</div>
       <div>Network quality: {network.quality}</div>
+      <div>
+        CPU load: {cpuLoad.state} {cpuLoad.reason}
+      </div>
     </>
   );
 }
diff --git a/src/index.tsx b/src/index.tsx
@@ -23,7 +23,10 @@ root.render(
     ) : (
       <DailyProvider
         subscribeToTracksAutomatically={false}
-        dailyConfig={{ useDevicePreferenceCookies: true }}
+        dailyConfig={{
+          useDevicePreferenceCookies: true,
+          micAudioMode: "music",
+        }}
       >
         <App />
       </DailyProvider>