feat(web): 优化视频格式与虚拟键盘显示

web/src/components/VideoConfigPopover.vue

@@ -27,6 +27,7 @@ import {
   type BitratePreset,
   type StreamConstraintsResponse,
 } from '@/api'
+import { getVideoFormatState, isVideoFormatSelectable } from '@/lib/video-format-support'
 import { useConfigStore } from '@/stores/config'
 import { useRouter } from 'vue-router'
 
@@ -167,6 +168,12 @@ const isBrowserSupported = (codecId: string): boolean => {
   return browserSupportedCodecs.value.has(codecId)
 }
 
+const getFormatState = (formatName: string) =>
+  getVideoFormatState(formatName, props.videoMode, currentEncoderBackend.value)
+
+const isFormatUnsupported = (formatName: string): boolean =>
+  getFormatState(formatName) === 'unsupported'
+
 // Translate backend name for display
 const translateBackendName = (backend: string | undefined): string => {
   if (!backend) return ''
@@ -189,6 +196,10 @@ const hasHighFps = (format: { resolutions: { fps: number[] }[] }): boolean => {
 
 // Check if a format is recommended based on video mode
 const isFormatRecommended = (formatName: string): boolean => {
+  if (!isVideoFormatSelectable(formatName, props.videoMode, currentEncoderBackend.value)) {
+    return false
+  }
+
   const formats = availableFormats.value
   const upperFormat = formatName.toUpperCase()
 
@@ -225,12 +236,7 @@ const isFormatRecommended = (formatName: string): boolean => {
 // Check if a format is not recommended for current video mode
 // In WebRTC mode, compressed formats (MJPEG/JPEG) are not recommended
 const isFormatNotRecommended = (formatName: string): boolean => {
-  const upperFormat = formatName.toUpperCase()
-  // WebRTC mode: MJPEG/JPEG are not recommended (require decoding before encoding)
-  if (props.videoMode !== 'mjpeg') {
-    return upperFormat === 'MJPEG' || upperFormat === 'JPEG'
-  }
-  return false
+  return getFormatState(formatName) === 'not_recommended'
 }
 
 // Selected values (mode comes from props)
@@ -303,6 +309,14 @@ const availableFormats = computed(() => {
   return device?.formats || []
 })
 
+const availableFormatOptions = computed(() => {
+  return availableFormats.value.map(format => ({
+    ...format,
+    state: getFormatState(format.format),
+    disabled: isFormatUnsupported(format.format),
+  }))
+})
+
 const availableResolutions = computed(() => {
   const format = availableFormats.value.find(f => f.format === selectedFormat.value)
   return format?.resolutions || []
@@ -317,8 +331,8 @@ const availableFps = computed(() => {
 
 // Get selected format description for display in trigger
 const selectedFormatInfo = computed(() => {
-  const format = availableFormats.value.find(f => f.format === selectedFormat.value)
-  return format ? { description: format.description, format: format.format } : null
+  const format = availableFormatOptions.value.find(f => f.format === selectedFormat.value)
+  return format
 })
 
 // Get selected codec info for display in trigger
@@ -423,6 +437,37 @@ function handleVideoModeChange(mode: unknown) {
   emit('update:videoMode', mode as VideoMode)
 }
 
+function findFirstSelectableFormat(
+  formats: VideoDevice['formats'],
+): VideoDevice['formats'][number] | undefined {
+  return formats.find(format =>
+    isVideoFormatSelectable(format.format, props.videoMode, currentEncoderBackend.value),
+  )
+}
+
+function clearFormatSelection() {
+  selectedFormat.value = ''
+  selectedResolution.value = ''
+  selectedFps.value = 30
+}
+
+function selectFormatWithDefaults(format: string) {
+  if (isFormatUnsupported(format)) return
+
+  selectedFormat.value = format
+
+  const formatData = availableFormats.value.find(f => f.format === format)
+  const resolution = formatData?.resolutions[0]
+  if (!resolution) {
+    selectedResolution.value = ''
+    selectedFps.value = 30
+    return
+  }
+
+  selectedResolution.value = `${resolution.width}x${resolution.height}`
+  selectedFps.value = resolution.fps[0] || 30
+}
+
 // Handle device change
 function handleDeviceChange(devicePath: unknown) {
   if (typeof devicePath !== 'string') return
@@ -431,31 +476,22 @@ function handleDeviceChange(devicePath: unknown) {
 
   // Auto-select first format
   const device = devices.value.find(d => d.path === devicePath)
-  if (device?.formats[0]) {
-    selectedFormat.value = device.formats[0].format
-
-    // Auto-select first resolution
-    const resolution = device.formats[0].resolutions[0]
-    if (resolution) {
-      selectedResolution.value = `${resolution.width}x${resolution.height}`
-      selectedFps.value = resolution.fps[0] || 30
-    }
+  const format = device ? findFirstSelectableFormat(device.formats) : undefined
+  if (!format) {
+    clearFormatSelection()
+    return
   }
+
+  selectFormatWithDefaults(format.format)
 }
 
 // Handle format change
 function handleFormatChange(format: unknown) {
   if (typeof format !== 'string') return
-  selectedFormat.value = format
-  isDirty.value = true
+  if (isFormatUnsupported(format)) return
 
-  // Auto-select first resolution for this format
-  const formatData = availableFormats.value.find(f => f.format === format)
-  if (formatData?.resolutions[0]) {
-    const resolution = formatData.resolutions[0]
-    selectedResolution.value = `${resolution.width}x${resolution.height}`
-    selectedFps.value = resolution.fps[0] || 30
-  }
+  selectFormatWithDefaults(format)
+  isDirty.value = true
 }
 
 // Handle resolution change
@@ -567,6 +603,29 @@ watch(currentConfig, () => {
   if (props.open && isDirty.value) return
   syncFromCurrentIfChanged()
 }, { deep: true })
+
+watch(
+  [availableFormatOptions, () => props.videoMode, currentEncoderBackend],
+  () => {
+    if (!selectedDevice.value) return
+
+    const currentFormat = availableFormatOptions.value.find(
+      format => format.format === selectedFormat.value,
+    )
+    if (currentFormat && !currentFormat.disabled) {
+      return
+    }
+
+    const fallback = availableFormatOptions.value.find(format => !format.disabled)
+    if (!fallback) {
+      clearFormatSelection()
+      return
+    }
+
+    selectFormatWithDefaults(fallback.format)
+  },
+  { deep: true },
+)
 </script>
 
 <template>
@@ -770,6 +829,12 @@ watch(currentConfig, () => {
               <SelectTrigger class="h-8 text-xs">
                 <div v-if="selectedFormatInfo" class="flex items-center gap-1.5 truncate">
                   <span class="truncate">{{ selectedFormatInfo.description }}</span>
+                  <span
+                    v-if="selectedFormatInfo.state === 'unsupported'"
+                    class="shrink-0 text-muted-foreground"
+                  >
+                    {{ t('common.notSupportedYet') }}
+                  </span>
                   <span
                     v-if="isFormatRecommended(selectedFormatInfo.format)"
                     class="text-[10px] px-1 py-0.5 rounded bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300 shrink-0"
@@ -787,13 +852,20 @@ watch(currentConfig, () => {
               </SelectTrigger>
               <SelectContent>
                 <SelectItem
-                  v-for="format in availableFormats"
+                  v-for="format in availableFormatOptions"
                   :key="format.format"
                   :value="format.format"
-                  class="text-xs"
+                  :disabled="format.disabled"
+                  :class="['text-xs', { 'opacity-50': format.disabled }]"
                 >
                   <div class="flex items-center gap-2">
                     <span>{{ format.description }}</span>
+                    <span
+                      v-if="format.state === 'unsupported'"
+                      class="text-muted-foreground"
+                    >
+                      {{ t('common.notSupportedYet') }}
+                    </span>
                     <span
                       v-if="isFormatRecommended(format.format)"
                       class="text-[10px] px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300"

web/src/components/VirtualKeyboard.vue

@@ -26,6 +26,7 @@ const props = defineProps<{
   attached?: boolean
   capsLock?: boolean
   pressedKeys?: CanonicalKey[]
+  consumerEnabled?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -718,7 +719,7 @@ onUnmounted(() => {
       <!-- Keyboard body -->
       <div class="vkb-body">
         <!-- Media keys row -->
-        <div class="vkb-media-row">
+        <div v-if="props.consumerEnabled !== false" class="vkb-media-row">
           <button
             v-for="key in mediaKeys"
             :key="key"

web/src/i18n/en-US.ts

@@ -32,6 +32,7 @@ export default {
     menu: 'Menu',
     optional: 'Optional',
     recommended: 'Recommended',
+    notSupportedYet: ' (Not Yet Supported)',
     create: 'Create',
     creating: 'Creating...',
     deleting: 'Deleting...',

web/src/i18n/zh-CN.ts

@@ -32,6 +32,7 @@ export default {
     menu: '菜单',
     optional: '可选',
     recommended: '推荐',
+    notSupportedYet: '（尚未支持）',
     create: '创建',
     creating: '创建中...',
     deleting: '删除中...',

web/src/lib/video-format-support.ts

@@ -0,0 +1,97 @@
+export type VideoFormatSupportContext = 'config' | 'mjpeg' | 'h264' | 'h265' | 'vp8' | 'vp9'
+
+export type VideoFormatState = 'supported' | 'not_recommended' | 'unsupported'
+
+const MJPEG_MODE_SUPPORTED_FORMATS = new Set([
+  'MJPEG',
+  'JPEG',
+  'YUYV',
+  'YVYU',
+  'NV12',
+  'RGB24',
+  'BGR24',
+])
+
+const CONFIG_SUPPORTED_FORMATS = new Set([
+  'MJPEG',
+  'JPEG',
+  'YUYV',
+  'YVYU',
+  'NV12',
+  'NV21',
+  'NV16',
+  'YUV420',
+  'RGB24',
+  'BGR24',
+])
+
+const WEBRTC_SUPPORTED_FORMATS = new Set([
+  'MJPEG',
+  'JPEG',
+  'YUYV',
+  'NV12',
+  'NV21',
+  'NV16',
+  'YUV420',
+  'RGB24',
+  'BGR24',
+])
+
+function normalizeFormat(formatName: string): string {
+  return formatName.trim().toUpperCase()
+}
+
+function isCompressedFormat(formatName: string): boolean {
+  return formatName === 'MJPEG' || formatName === 'JPEG'
+}
+
+function isRkmppBackend(backendId?: string): boolean {
+  return backendId?.toLowerCase() === 'rkmpp'
+}
+
+export function getVideoFormatState(
+  formatName: string,
+  context: VideoFormatSupportContext,
+  encoderBackend = 'auto',
+): VideoFormatState {
+  const normalizedFormat = normalizeFormat(formatName)
+
+  if (context === 'mjpeg') {
+    return MJPEG_MODE_SUPPORTED_FORMATS.has(normalizedFormat) ? 'supported' : 'unsupported'
+  }
+
+  if (context === 'config') {
+    if (CONFIG_SUPPORTED_FORMATS.has(normalizedFormat)) {
+      return 'supported'
+    }
+    if (
+      normalizedFormat === 'NV24'
+      && isRkmppBackend(encoderBackend)
+    ) {
+      return 'supported'
+    }
+    return 'unsupported'
+  }
+
+  if (WEBRTC_SUPPORTED_FORMATS.has(normalizedFormat)) {
+    return isCompressedFormat(normalizedFormat) ? 'not_recommended' : 'supported'
+  }
+
+  if (
+    normalizedFormat === 'NV24'
+    && isRkmppBackend(encoderBackend)
+    && (context === 'h264' || context === 'h265')
+  ) {
+    return 'supported'
+  }
+
+  return 'unsupported'
+}
+
+export function isVideoFormatSelectable(
+  formatName: string,
+  context: VideoFormatSupportContext,
+  encoderBackend = 'auto',
+): boolean {
+  return getVideoFormatState(formatName, context, encoderBackend) !== 'unsupported'
+}

web/src/views/ConsoleView.vue

@@ -12,7 +12,7 @@ import { useWebRTC } from '@/composables/useWebRTC'
 import { useVideoSession } from '@/composables/useVideoSession'
 import { getUnifiedAudio } from '@/composables/useUnifiedAudio'
 import { streamApi, hidApi, atxApi, atxConfigApi, authApi } from '@/api'
-import { CanonicalKey } from '@/types/generated'
+import { CanonicalKey, HidBackend } from '@/types/generated'
 import type { HidKeyboardEvent, HidMouseEvent } from '@/types/hid'
 import { keyboardEventToCanonicalKey, updateModifierMaskForKey } from '@/lib/keyboardMappings'
 import { toast } from 'vue-sonner'
@@ -156,6 +156,12 @@ function syncMouseModeFromConfig() {
 const virtualKeyboardVisible = ref(false)
 const virtualKeyboardAttached = ref(true)
 const statsSheetOpen = ref(false)
+const virtualKeyboardConsumerEnabled = computed(() => {
+  const hid = configStore.hid
+  if (!hid) return true
+  if (hid.backend !== HidBackend.Otg) return true
+  return hid.otg_functions?.consumer !== false
+})
 
 // Change password dialog state
 const changePasswordDialogOpen = ref(false)
@@ -2528,6 +2534,7 @@ onUnmounted(() => {
         v-model:attached="virtualKeyboardAttached"
         :caps-lock="keyboardLed.capsLock"
         :pressed-keys="pressedKeys"
+        :consumer-enabled="virtualKeyboardConsumerEnabled"
         @key-down="handleVirtualKeyDown"
         @key-up="handleVirtualKeyUp"
       />

web/src/views/SettingsView.vue

@@ -39,6 +39,7 @@ import type {
 } from '@/types/generated'
 import { setLanguage } from '@/i18n'
 import { useClipboard } from '@/composables/useClipboard'
+import { getVideoFormatState } from '@/lib/video-format-support'
 import AppLayout from '@/components/AppLayout.vue'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
@@ -780,6 +781,21 @@ const availableFormats = computed(() => {
   return selectedDevice.value.formats
 })
 
+const availableFormatOptions = computed(() => {
+  return availableFormats.value.map(format => {
+    const state = getVideoFormatState(format.format, 'config', config.value.encoder_backend)
+    return {
+      ...format,
+      state,
+      disabled: state === 'unsupported',
+    }
+  })
+})
+
+const selectableFormats = computed(() => {
+  return availableFormatOptions.value.filter(format => !format.disabled)
+})
+
 const selectedFormat = computed(() => {
   if (!selectedDevice.value || !config.value.video_format) return null
   return selectedDevice.value.formats.find(f => f.format === config.value.video_format)
@@ -810,17 +826,22 @@ const availableFps = computed(() => {
   return currentRes ? currentRes.fps : []
 })
 
-// Watch for device change to set default format
-watch(() => config.value.video_device, () => {
-  if (availableFormats.value.length > 0) {
-    const isValid = availableFormats.value.some(f => f.format === config.value.video_format)
-    if (!isValid) {
-      config.value.video_format = availableFormats.value[0]?.format || ''
+// Keep the selected format aligned with currently selectable formats.
+watch(
+  selectableFormats,
+  () => {
+    if (selectableFormats.value.length === 0) {
+      config.value.video_format = ''
+      return
     }
-  } else {
-    config.value.video_format = ''
-  }
-})
+
+    const isValid = selectableFormats.value.some(f => f.format === config.value.video_format)
+    if (!isValid) {
+      config.value.video_format = selectableFormats.value[0]?.format || ''
+    }
+  },
+  { deep: true },
+)
 
 // Watch for format change to set default resolution
 watch(() => config.value.video_format, () => {
@@ -2091,7 +2112,14 @@ watch(() => route.query.tab, (tab) => {
                   <Label for="video-format">{{ t('settings.videoFormat') }}</Label>
                   <select id="video-format" v-model="config.video_format" class="w-full h-9 px-3 rounded-md border border-input bg-background text-sm" :disabled="!config.video_device">
                     <option value="">{{ t('settings.selectFormat') }}</option>
-                    <option v-for="fmt in availableFormats" :key="fmt.format" :value="fmt.format">{{ fmt.format }} - {{ fmt.description }}</option>
+                    <option
+                      v-for="fmt in availableFormatOptions"
+                      :key="fmt.format"
+                      :value="fmt.format"
+                      :disabled="fmt.disabled"
+                    >
+                      {{ fmt.format }} - {{ fmt.description }}{{ fmt.disabled ? t('common.notSupportedYet') : '' }}
+                    </option>
                   </select>
                 </div>
                 <div class="grid gap-4 sm:grid-cols-2">