@stream-io/video-react-sdk 1.43.3 → 1.44.0

package/dist/src/components/Notification/CameraUnavailableNotification.d.ts

@@ -0,0 +1,15 @@
+import { PropsWithChildren } from 'react';
+import { Placement } from '@floating-ui/react';
+export type CameraUnavailableNotificationProps = {
+    placement?: Placement;
+    className?: string;
+};
+/**
+ * Shows when the last attempt to start the camera failed (e.g. the camera is
+ * in use by another app). Reads the error from the camera state, so it shows
+ * failures that happened before it was mounted.
+ *
+ * For error-specific copy, build your own notification on top of
+ * `useCameraState().error`.
+ */
+export declare const CameraUnavailableNotification: ({ children, placement, className, }: PropsWithChildren<CameraUnavailableNotificationProps>) => import("react").JSX.Element;

package/dist/src/components/Notification/index.d.ts

@@ -3,3 +3,4 @@ export * from './PermissionNotification';
 export * from './SpeakingWhileMutedNotification';
 export * from './RecordingInProgressNotification';
 export * from './MicCaptureErrorNotification';
+export * from './CameraUnavailableNotification';

package/dist/src/translations/index.d.ts

@@ -62,6 +62,8 @@ export declare const translations: {
         "Camera on": string;
         "Camera off": string;
         "Camera is paused by your system": string;
+        "Camera unavailable": string;
+        "Close other apps that might be using your camera and try again.": string;
         "No camera found": string;
         "Video is disabled": string;
         Pinned: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.43.3",
+  "version": "1.44.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/esm/index.js",
   "types": "./dist/index.d.ts",
@@ -49,9 +49,9 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.27.20",
-    "@stream-io/video-client": "1.61.1",
+    "@stream-io/video-client": "1.62.0",
     "@stream-io/video-filters-web": "0.10.0",
-    "@stream-io/video-react-bindings": "1.20.5",
+    "@stream-io/video-react-bindings": "1.21.0",
     "chart.js": "^4.5.1",
     "clsx": "^2.1.1",
     "react-chartjs-2": "^5.3.1"
@@ -66,7 +66,7 @@
     "@rollup/plugin-typescript": "^12.3.0",
     "@stream-io/audio-filters-web": "^0.10.4",
     "@stream-io/typescript-config": "^0.0.0",
-    "@stream-io/video-styling": "^1.15.1",
+    "@stream-io/video-styling": "^1.16.0",
     "@types/node": "^25.9.5",
     "@types/react": "~19.2.18",
     "@types/react-dom": "~19.2.4",

package/src/components/CallControls/ToggleVideoButton.tsx

@@ -12,7 +12,10 @@ import {
 } from '@stream-io/video-client';
 import { CompositeButton, IconButtonWithMenuProps } from '../Button/';
 import { DeviceSelectorVideo } from '../DeviceSettings';
-import { PermissionNotification } from '../Notification';
+import {
+  CameraUnavailableNotification,
+  PermissionNotification,
+} from '../Notification';
 import { useRequestPermission } from '../../hooks';
 import { Icon } from '../Icon';
 import { WithTooltip } from '../Tooltip';
@@ -58,64 +61,66 @@ export const ToggleVideoPreviewButton = (
   const handleClick = createCallControlHandler(props, () => camera.toggle());
 
   return (
-    <WithTooltip
-      title={
-        !hasBrowserPermission
-          ? t('Check your browser video permissions')
-          : isSystemMuted
-            ? t('Camera is paused by your system')
-            : (caption ?? t('Video'))
-      }
-      tooltipDisabled={tooltipDisabled}
-    >
-      <CompositeButton
-        active={optionsAwareIsMute}
-        caption={caption}
-        className={clsx(
-          !hasBrowserPermission && 'str-video__device-unavailable',
-        )}
-        variant="secondary"
-        data-testid={
-          optionsAwareIsMute
-            ? 'preview-video-unmute-button'
-            : 'preview-video-mute-button'
+    <CameraUnavailableNotification>
+      <WithTooltip
+        title={
+          !hasBrowserPermission
+            ? t('Check your browser video permissions')
+            : isSystemMuted
+              ? t('Camera is paused by your system')
+              : (caption ?? t('Video'))
         }
-        onClick={handleClick}
-        disabled={
-          !hasBrowserPermission || (!optimisticUpdates && isTogglePending)
-        }
-        Menu={Menu}
-        menuPlacement={menuPlacement}
-        {...restCompositeButtonProps}
-        onMenuToggle={(shown) => {
-          setTooltipDisabled(shown);
-          onMenuToggle?.(shown);
-        }}
+        tooltipDisabled={tooltipDisabled}
       >
-        <Icon icon={!optionsAwareIsMute ? 'camera' : 'camera-off'} />
-        {!hasBrowserPermission && (
-          <span
-            className="str-video__no-media-permission"
-            title={t('Check your browser video permissions')}
-            children="!"
-          />
-        )}
-        {isPromptingPermission && (
-          <span
-            className="str-video__pending-permission"
-            title={t('Waiting for permission')}
-            children="?"
-          />
-        )}
-        {isSystemMuted && hasBrowserPermission && (
-          <span
-            className="str-video__system-muted"
-            title={t('Camera is paused by your system')}
-            children="!"
-          />
-        )}
-      </CompositeButton>
-    </WithTooltip>
+        <CompositeButton
+          active={optionsAwareIsMute}
+          caption={caption}
+          className={clsx(
+            !hasBrowserPermission && 'str-video__device-unavailable',
+          )}
+          variant="secondary"
+          data-testid={
+            optionsAwareIsMute
+              ? 'preview-video-unmute-button'
+              : 'preview-video-mute-button'
+          }
+          onClick={handleClick}
+          disabled={
+            !hasBrowserPermission || (!optimisticUpdates && isTogglePending)
+          }
+          Menu={Menu}
+          menuPlacement={menuPlacement}
+          {...restCompositeButtonProps}
+          onMenuToggle={(shown) => {
+            setTooltipDisabled(shown);
+            onMenuToggle?.(shown);
+          }}
+        >
+          <Icon icon={!optionsAwareIsMute ? 'camera' : 'camera-off'} />
+          {!hasBrowserPermission && (
+            <span
+              className="str-video__no-media-permission"
+              title={t('Check your browser video permissions')}
+              children="!"
+            />
+          )}
+          {isPromptingPermission && (
+            <span
+              className="str-video__pending-permission"
+              title={t('Waiting for permission')}
+              children="?"
+            />
+          )}
+          {isSystemMuted && hasBrowserPermission && (
+            <span
+              className="str-video__system-muted"
+              title={t('Camera is paused by your system')}
+              children="!"
+            />
+          )}
+        </CompositeButton>
+      </WithTooltip>
+    </CameraUnavailableNotification>
   );
 };
 
@@ -178,70 +183,72 @@ export const ToggleVideoPublishingButton = (
         )}
         messageRevoked={t('You can no longer share your video.')}
       >
-        <WithTooltip
-          title={
-            !hasPermission
-              ? t('You have no permission to share your video')
-              : !hasBrowserPermission
-                ? t('Check your browser video permissions')
-                : !isPublishingVideoAllowed
-                  ? t('Video publishing is disabled by the system')
-                  : isSystemMuted
-                    ? t('Camera is paused by your system')
-                    : caption || t('Video')
-          }
-          tooltipDisabled={tooltipDisabled}
-        >
-          <CompositeButton
-            active={optionsAwareIsMute}
-            caption={caption}
-            variant="secondary"
-            disabled={
-              !hasBrowserPermission ||
-              !hasPermission ||
-              !isPublishingVideoAllowed ||
-              (!optimisticUpdates && isTogglePending)
-            }
-            data-testid={
-              optionsAwareIsMute ? 'video-unmute-button' : 'video-mute-button'
+        <CameraUnavailableNotification>
+          <WithTooltip
+            title={
+              !hasPermission
+                ? t('You have no permission to share your video')
+                : !hasBrowserPermission
+                  ? t('Check your browser video permissions')
+                  : !isPublishingVideoAllowed
+                    ? t('Video publishing is disabled by the system')
+                    : isSystemMuted
+                      ? t('Camera is paused by your system')
+                      : caption || t('Video')
             }
-            onClick={handleClick}
-            Menu={Menu}
-            menuPlacement={menuPlacement}
-            menuOffset={16}
-            {...restCompositeButtonProps}
-            onMenuToggle={(shown) => {
-              setTooltipDisabled(shown);
-              onMenuToggle?.(shown);
-            }}
+            tooltipDisabled={tooltipDisabled}
           >
-            <Icon icon={optionsAwareIsMute ? 'camera-off' : 'camera'} />
-            {(!hasBrowserPermission ||
-              !hasPermission ||
-              !isPublishingVideoAllowed) && (
-              <span className="str-video__no-media-permission">!</span>
-            )}
-            {isPromptingPermission && (
-              <span
-                className="str-video__pending-permission"
-                title={t('Waiting for permission')}
-              >
-                ?
-              </span>
-            )}
-            {isSystemMuted &&
-              hasBrowserPermission &&
-              hasPermission &&
-              isPublishingVideoAllowed && (
+            <CompositeButton
+              active={optionsAwareIsMute}
+              caption={caption}
+              variant="secondary"
+              disabled={
+                !hasBrowserPermission ||
+                !hasPermission ||
+                !isPublishingVideoAllowed ||
+                (!optimisticUpdates && isTogglePending)
+              }
+              data-testid={
+                optionsAwareIsMute ? 'video-unmute-button' : 'video-mute-button'
+              }
+              onClick={handleClick}
+              Menu={Menu}
+              menuPlacement={menuPlacement}
+              menuOffset={16}
+              {...restCompositeButtonProps}
+              onMenuToggle={(shown) => {
+                setTooltipDisabled(shown);
+                onMenuToggle?.(shown);
+              }}
+            >
+              <Icon icon={optionsAwareIsMute ? 'camera-off' : 'camera'} />
+              {(!hasBrowserPermission ||
+                !hasPermission ||
+                !isPublishingVideoAllowed) && (
+                <span className="str-video__no-media-permission">!</span>
+              )}
+              {isPromptingPermission && (
                 <span
-                  className="str-video__system-muted"
-                  title={t('Camera is paused by your system')}
+                  className="str-video__pending-permission"
+                  title={t('Waiting for permission')}
                 >
-                  !
+                  ?
                 </span>
               )}
-          </CompositeButton>
-        </WithTooltip>
+              {isSystemMuted &&
+                hasBrowserPermission &&
+                hasPermission &&
+                isPublishingVideoAllowed && (
+                  <span
+                    className="str-video__system-muted"
+                    title={t('Camera is paused by your system')}
+                  >
+                    !
+                  </span>
+                )}
+            </CompositeButton>
+          </WithTooltip>
+        </CameraUnavailableNotification>
       </PermissionNotification>
     </Restricted>
   );

package/src/components/Notification/CameraUnavailableNotification.tsx

@@ -0,0 +1,61 @@
+import { PropsWithChildren, useEffect, useState } from 'react';
+import { Placement } from '@floating-ui/react';
+import clsx from 'clsx';
+import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
+import { Notification } from './Notification';
+
+export type CameraUnavailableNotificationProps = {
+  placement?: Placement;
+  className?: string;
+};
+
+const UNAVAILABLE_ERRORS = ['NotReadableError', 'AbortError'];
+
+const isCameraUnavailable = (error: Error | undefined) =>
+  !!error?.name && UNAVAILABLE_ERRORS.includes(error.name);
+
+/**
+ * Shows when the last attempt to start the camera failed (e.g. the camera is
+ * in use by another app). Reads the error from the camera state, so it shows
+ * failures that happened before it was mounted.
+ *
+ * For error-specific copy, build your own notification on top of
+ * `useCameraState().error`.
+ */
+export const CameraUnavailableNotification = ({
+  children,
+  placement,
+  className,
+}: PropsWithChildren<CameraUnavailableNotificationProps>) => {
+  const { useCameraState } = useCallStateHooks();
+  const { error } = useCameraState();
+  const { t } = useI18n();
+  const [isVisible, setIsVisible] = useState(() => isCameraUnavailable(error));
+
+  useEffect(() => {
+    setIsVisible(isCameraUnavailable(error));
+  }, [error]);
+
+  const message = (
+    <>
+      <span className="str-video__notification__line str-video__notification__title">
+        {t('Camera unavailable')}
+      </span>
+      <span className="str-video__notification__line">
+        {t('Close other apps that might be using your camera and try again.')}
+      </span>
+    </>
+  );
+
+  return (
+    <Notification
+      message={message}
+      isVisible={isVisible}
+      placement={placement}
+      className={clsx('str-video__camera-unavailable-notification', className)}
+      close={() => setIsVisible(false)}
+    >
+      {children}
+    </Notification>
+  );
+};

package/src/components/Notification/index.ts

@@ -3,3 +3,4 @@ export * from './PermissionNotification';
 export * from './SpeakingWhileMutedNotification';
 export * from './RecordingInProgressNotification';
 export * from './MicCaptureErrorNotification';
+export * from './CameraUnavailableNotification';

package/src/translations/en.json

@@ -67,6 +67,8 @@
   "Camera on": "Camera on",
   "Camera off": "Camera off",
   "Camera is paused by your system": "Camera is paused by your system",
+  "Camera unavailable": "Camera unavailable",
+  "Close other apps that might be using your camera and try again.": "Close other apps that might be using your camera and try again.",
   "No camera found": "No camera found",
   "Video is disabled": "Video is disabled",
   "Pinned": "Pinned",