refactor(desktop): split camera and microphone permissions

Author: wj-xiao

desktop/src/common/ipc-events.ts

@@ -2,7 +2,8 @@ export enum IpcEvents {
   GET_APP_VERSION = 'get-app-version',
   GET_PLATFORM = 'get-platform',
   OPEN_EXTERNAL_RUL = 'open-external-url',
-  REQUEST_MEDIA_PERMISSIONS = 'request-media-permissions',
+  CHECK_MEDIA_PERMISSION = 'check-media-permission',
+  REQUEST_MEDIA_PERMISSION = 'request-media-permission',
   SET_FULL_SCREEN = 'set-full-screen',
 
   GET_SERIAL_PORTS = 'get-serial-ports',

desktop/src/main/events/app.ts

@@ -1,4 +1,4 @@
-import { app, BrowserWindow, ipcMain, shell, systemPreferences } from 'electron'
+import { app, BrowserWindow, ipcMain, IpcMainInvokeEvent, shell, systemPreferences } from 'electron'
 import type { IpcMainEvent, OpenExternalOptions } from 'electron'
 
 import { IpcEvents } from '../../common/ipc-events'
@@ -7,7 +7,8 @@ export function registerApp(): void {
   ipcMain.handle(IpcEvents.GET_APP_VERSION, getAppVersion)
   ipcMain.handle(IpcEvents.GET_PLATFORM, getPlatform)
   ipcMain.on(IpcEvents.OPEN_EXTERNAL_RUL, openExternalUrl)
-  ipcMain.handle(IpcEvents.REQUEST_MEDIA_PERMISSIONS, requestMediaPermissions)
+  ipcMain.handle(IpcEvents.CHECK_MEDIA_PERMISSION, checkMediaPermission)
+  ipcMain.handle(IpcEvents.REQUEST_MEDIA_PERMISSION, requestMediaPermission)
   ipcMain.on(IpcEvents.SET_FULL_SCREEN, setFullScreen)
 }
 
@@ -23,17 +24,15 @@ function openExternalUrl(_: IpcMainEvent, url: string, options?: OpenExternalOpt
   shell.openExternal(url, options).catch(console.error)
 }
 
-async function requestMediaPermissions(): Promise<{
-  camera: boolean
-  microphone: boolean
-}> {
-  const camera = await grant('camera')
-  const microphone = await grant('microphone')
-
-  return { camera, microphone }
+function checkMediaPermission(_: IpcMainInvokeEvent, media: 'camera' | 'microphone'): boolean {
+  const status = systemPreferences.getMediaAccessStatus(media)
+  return status === 'granted'
 }
 
-async function grant(media: 'camera' | 'microphone'): Promise<boolean> {
+async function requestMediaPermission(
+  _: IpcMainInvokeEvent,
+  media: 'camera' | 'microphone'
+): Promise<boolean> {
   try {
     const status = systemPreferences.getMediaAccessStatus(media)
     if (status === 'granted') {

desktop/src/renderer/src/App.tsx

@@ -19,7 +19,8 @@ import {
 } from '@renderer/jotai/device'
 import { isKeyboardEnableAtom } from '@renderer/jotai/keyboard'
 import { mouseModeAtom, mouseStyleAtom } from '@renderer/jotai/mouse'
-import { camera } from '@renderer/libs/camera'
+import { camera } from '@renderer/libs/media/camera'
+import { requestCameraPermission } from '@renderer/libs/media/permission'
 import { getVideoResolution } from '@renderer/libs/storage'
 import type { Resolution } from '@renderer/types'
 
@@ -55,34 +56,9 @@ const App = (): ReactElement => {
 
   async function requestMediaPermissions(resolution?: Resolution): Promise<void> {
     try {
-      const platform = await window.electron.ipcRenderer.invoke(IpcEvents.GET_PLATFORM)
-      if (platform === 'darwin') {
-        const res = await window.electron.ipcRenderer.invoke(IpcEvents.REQUEST_MEDIA_PERMISSIONS)
-
-        if (!res.camera) {
-          setState('failed')
-          return
-        }
-      } else {
-        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())
-      }
-
-      setState('success')
+      const granted = await requestCameraPermission(resolution)
+      setState(granted ? 'success' : 'failed')
     } catch (err) {
-      console.log('failed to request media permissions: ', err)
       if (err instanceof Error && ['NotAllowedError', 'PermissionDeniedError'].includes(err.name)) {
         setState('failed')
       } else {

desktop/src/renderer/src/components/device/video.tsx

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

desktop/src/renderer/src/components/menu/audio/index.tsx

@@ -0,0 +1,79 @@
+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 '@renderer/jotai/device'
+import { camera } from '@renderer/libs/media/camera'
+import { checkPermission, requestMicrophonePermission } from '@renderer/libs/media/permission'
+
+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(): Promise<void> {
+    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(): void {
+    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="py-5 whitespace-pre-line">{t('audio.permission')}</div>
+        <a
+          href="https://wiki.sipeed.com/hardware/en/kvm/NanoKVM_USB/quick_start.html#Authorization"
+          target="_blank"
+          rel="noreferrer"
+        >
+          {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>
+    </>
+  )
+}

desktop/src/renderer/src/components/menu/index.tsx

@@ -6,6 +6,7 @@ import Draggable from 'react-draggable'
 
 import * as storage from '@renderer/libs/storage'
 
+import { Audio } from './audio'
 import { Keyboard } from './keyboard'
 import { Mouse } from './mouse'
 import { Recorder } from './recorder'
@@ -81,6 +82,7 @@ export const Menu = (): ReactElement => {
             <Divider type="vertical" />
 
             <Video />
+            <Audio />
             <SerialPort />
             <Divider type="vertical" className="px-0.5" />
 

desktop/src/renderer/src/components/menu/recorder/index.tsx

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

desktop/src/renderer/src/components/menu/video/device.tsx

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

desktop/src/renderer/src/components/menu/video/resolution.tsx

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

desktop/src/renderer/src/i18n/locales/en.ts

@@ -37,6 +37,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',