FCE-759 Hide the error if the user closes the screen share window (#157)

## Description When the screen share window is closed, `NotAllowedError` is thrown. The `Share the screen` handler swallows this error. ## Motivation and Context When the user changes their mind during screen sharing and closes the browser window, an error appears in the console. This is a completely normal situation, so we should not log this error to the console. ## Types of changes Bug fix (non-breaking change which fixes an issue) Co-authored-by: Adrian Czerwiec <[email protected]>
fishjam-cloud · Nov 5, 2024 · e081ef8 · e081ef8
1 parent 846f88e
commit e081ef8
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/examples/react-client/fishjam-chat/src/components/CallToolbar.tsx b/examples/react-client/fishjam-chat/src/components/CallToolbar.tsx
@@ -36,6 +36,16 @@ export const CallToolbar = () => {
   const CameraIcon = cameraStream ? Video : VideoOff;
   const ScreenshareIcon = screenStream ? MonitorOff : MonitorUp;
 
+  const toggleScreenShare = async () => {
+    if (screenStream) return stopStreaming();
+    try {
+      await startStreaming();
+    } catch (error) {
+      if (error instanceof Error && error.name === "NotAllowedError") return;
+      console.error(error);
+    }
+  };
+
   return (
     <footer className="h-24 flex justify-center items-center gap-8 border-t border-stone-200">
       <SettingsSheet>
@@ -62,10 +72,7 @@ export const CallToolbar = () => {
         <CameraIcon size={20} strokeWidth={"1.5px"} />
       </Button>
 
-      <Button
-        className="text-xs gap-2"
-        onClick={() => (screenStream ? stopStreaming() : startStreaming())}
-      >
+      <Button className="text-xs gap-2" onClick={toggleScreenShare}>
         <ScreenshareIcon size={20} strokeWidth={"1.5px"} />
       </Button>
 

diff --git a/examples/react-client/use-camera-and-microphone/src/ScreenShareControls.tsx b/examples/react-client/use-camera-and-microphone/src/ScreenShareControls.tsx
@@ -10,8 +10,14 @@ export const ScreenShareControls = () => {
       <button
         className="btn btn-success btn-sm"
         disabled={isScreensharing}
-        onClick={() => {
-          screenShare.startStreaming();
+        onClick={async () => {
+          try {
+            await screenShare.startStreaming();
+          } catch (error) {
+            if (error instanceof Error && error.name === "NotAllowedError")
+              return;
+            console.error(error);
+          }
         }}
       >
         Share the screen