refactor: split camera and microphone permissions

Author: wj-xiao

browser/src/App.tsx

@@ -19,8 +19,9 @@ import {
 } from '@/jotai/device.ts';
 import { isKeyboardEnableAtom } from '@/jotai/keyboard.ts';
 import { mouseStyleAtom } from '@/jotai/mouse.ts';
-import { camera } from '@/libs/camera';
 import { device } from '@/libs/device';
+import { camera } from '@/libs/media/camera';
+import { checkPermission, requestCameraPermission } from '@/libs/media/permission.ts';
 import * as storage from '@/libs/storage';
 import type { Resolution } from '@/types.ts';
 
@@ -37,7 +38,7 @@ const App = () => {
   const [videoRotation, setVideoRotation] = useAtom(videoRotationAtom);
 
   const [isLoading, setIsLoading] = useState(true);
-  const [isCameraAvailable, setIsCameraAvailable] = useState(false);
+  const [isCameraGranted, setIsCameraGranted] = useState(false);
   const [shouldSwapDimensions, setShouldSwapDimensions] = useState(false);
 
   useEffect(() => {
@@ -60,7 +61,7 @@ const App = () => {
       setResolution(resolution);
     }
 
-    requestMediaPermissions(resolution);
+    requestPermission(resolution);
   }
 
   function initRotation() {
@@ -70,41 +71,28 @@ const App = () => {
     }
   }
 
-  async function requestMediaPermissions(resolution?: Resolution) {
+  async function requestPermission(resolution?: Resolution) {
     try {
-      const stream = await navigator.mediaDevices.getUserMedia({
-        video: {
-          width: { ideal: resolution?.width || 1920 },
-          height: { ideal: resolution?.height || 1080 },
-          frameRate: { ideal: 60 }
-        },
-        audio: {
-          echoCancellation: false,
-          noiseSuppression: false,
-          autoGainControl: false,
-          sampleRate: 48000
-        }
-      });
-      stream.getTracks().forEach((track) => track.stop());
-
-      setIsCameraAvailable(true);
+      const isGranted = await checkPermission('camera');
+      if (isGranted) {
+        setIsCameraGranted(true);
+        return;
+      }
+
+      const isSuccess = await requestCameraPermission(resolution);
+      setIsCameraGranted(isSuccess);
     } catch (err: any) {
       console.log('failed to request media permissions: ', err);
-      if (err.name === 'NotAllowedError' || err.name === 'PermissionDeniedError') {
-        setIsCameraAvailable(false);
-      } else {
-        setIsCameraAvailable(true);
-      }
+    } finally {
+      setIsLoading(false);
     }
-
-    setIsLoading(false);
   }
 
   if (isLoading) {
     return <Spin size="large" spinning={isLoading} tip={t('camera.tip')} fullscreen />;
   }
 
-  if (!isCameraAvailable) {
+  if (!isCameraGranted) {
     return (
       <Result
         status="info"

browser/src/components/device-modal/index.tsx

@@ -4,7 +4,7 @@ import { useAtom, useSetAtom } from 'jotai';
 import { useTranslation } from 'react-i18next';
 
 import { serialStateAtom, videoDeviceIdAtom, videoStateAtom } from '@/jotai/device.ts';
-import { camera } from '@/libs/camera';
+import { camera } from '@/libs/media/camera.ts';
 
 import { SerialPort } from './serial-port';
 import { Video } from './video';

browser/src/components/device-modal/serial-port.tsx

@@ -18,8 +18,9 @@ export const SerialPort = ({ setErrMsg, onDisconnect }: SerialPortProps) => {
 
   useEffect(() => {
     const isWebSerialSupported = 'serial' in navigator;
-    const state = isWebSerialSupported ? 'disconnected' : 'notSupported';
-    setSerialState(state);
+    if (!isWebSerialSupported) {
+      setSerialState('notSupported');
+    }
   }, [setSerialState]);
 
   const selectSerialPort = async () => {
@@ -45,7 +46,7 @@ export const SerialPort = ({ setErrMsg, onDisconnect }: SerialPortProps) => {
 
   return (
     <Button
-      type="primary"
+      type={serialState === 'connected' ? 'primary' : 'default'}
       className="w-[250px]"
       loading={serialState === 'connecting'}
       onClick={selectSerialPort}

browser/src/components/device-modal/video.tsx

@@ -4,7 +4,7 @@ import { useAtom, useAtomValue } from 'jotai';
 import { useTranslation } from 'react-i18next';
 
 import { resolutionAtom, videoDeviceIdAtom, videoStateAtom } from '@/jotai/device.ts';
-import { camera } from '@/libs/camera';
+import { camera } from '@/libs/media/camera';
 import * as storage from '@/libs/storage';
 import type { MediaDevice } from '@/types';
 

browser/src/components/menu/audio/index.tsx

@@ -0,0 +1,78 @@
+import { useEffect, useState } from 'react';
+import { Button, Modal } from 'antd';
+import { useSetAtom } from 'jotai';
+import { VolumeOffIcon } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+import { videoDeviceIdAtom, videoStateAtom } from '@/jotai/device.ts';
+import { camera } from '@/libs/media/camera.ts';
+import { checkPermission, requestMicrophonePermission } from '@/libs/media/permission.ts';
+
+export const Audio = () => {
+  const { t } = useTranslation();
+
+  const setVideoState = useSetAtom(videoStateAtom);
+  const setVideoDeviceId = useSetAtom(videoDeviceIdAtom);
+
+  const [isGranted, setIsGranted] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  useEffect(() => {
+    checkPermission('microphone').then((granted) => {
+      setIsGranted(granted);
+    });
+  }, []);
+
+  async function requestPermission() {
+    try {
+      const granted = await requestMicrophonePermission();
+      if (!granted) {
+        setIsModalOpen(true);
+        return;
+      }
+
+      setVideoDeviceId('');
+      setVideoState('disconnected');
+      setIsGranted(granted);
+
+      camera.close();
+    } catch (err: any) {
+      console.log('failed to request media permissions: ', err);
+    }
+  }
+
+  function closeModal() {
+    setIsModalOpen(false);
+  }
+
+  if (isGranted) {
+    return null;
+  }
+
+  return (
+    <>
+      <div
+        className="flex h-[28px] w-[28px] cursor-pointer items-center justify-center rounded text-neutral-300 hover:bg-neutral-700/70 hover:text-white"
+        onClick={requestPermission}
+      >
+        <VolumeOffIcon size={18} />
+      </div>
+
+      <Modal open={isModalOpen} title={t('audio.tip')} footer={null} onCancel={closeModal}>
+        <div className="whitespace-pre-line py-5">{t('audio.permission')}</div>
+        <a
+          href="https://wiki.sipeed.com/hardware/en/kvm/NanoKVM_USB/quick_start.html#Authorization"
+          target="_blank"
+        >
+          {t('audio.viewDoc')}
+        </a>
+
+        <div className="flex w-full justify-center pt-8">
+          <Button type="primary" className="min-w-20" onClick={closeModal}>
+            {t('audio.ok')}
+          </Button>
+        </div>
+      </Modal>
+    </>
+  );
+};

browser/src/components/menu/index.tsx

@@ -8,6 +8,7 @@ import Draggable from 'react-draggable';
 import { serialStateAtom } from '@/jotai/device.ts';
 import * as storage from '@/libs/storage';
 
+import { Audio } from './audio';
 import { Fullscreen } from './fullscreen';
 import { Keyboard } from './keyboard';
 import { Mouse } from './mouse';
@@ -87,6 +88,7 @@ export const Menu = () => {
             <Divider type="vertical" />
 
             <Video />
+            <Audio />
 
             {serialState === 'connected' && (
               <>

browser/src/components/menu/recorder/index.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { Video } from 'lucide-react';
 
-import { camera } from '@/libs/camera';
+import { camera } from '@/libs/media/camera';
 
 export const Recorder = () => {
   const [isRecording, setIsRecording] = useState(false);

browser/src/components/menu/video/device.tsx

@@ -6,7 +6,7 @@ import { VideoIcon } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
 import { resolutionAtom, videoDeviceIdAtom } from '@/jotai/device.ts';
-import { camera } from '@/libs/camera';
+import { camera } from '@/libs/media/camera';
 import * as storage from '@/libs/storage';
 import type { MediaDevice } from '@/types';
 

browser/src/components/menu/video/resolution.tsx

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 
 import { resolutionAtom } from '@/jotai/device.ts';
 import { isKeyboardEnableAtom } from '@/jotai/keyboard.ts';
-import { camera } from '@/libs/camera';
+import { camera } from '@/libs/media/camera.ts';
 import * as storage from '@/libs/storage';
 import type { Resolution as VideoResolution } from '@/types';
 

browser/src/i18n/locales/en.ts

@@ -36,6 +36,13 @@ const en = {
         cancel: 'Cancel'
       }
     },
+    audio: {
+      tip: 'Tip',
+      permission:
+        'Microphone access is required to connect your USB audio device. The operating system classifies USB inputs as microphones, so this permission is necessary.\n\nThis action is solely for device connectivity and does not enable audio recording.',
+      viewDoc: 'View document.',
+      ok: 'Ok'
+    },
     keyboard: {
       paste: 'Paste',
       virtualKeyboard: 'Keyboard',