fix: warn about mixed H264 stream modes (#843)

2026-09-11 00:22:56 -05:00 · 2026-07-31 10:48:52 +08:00
parent b587b9f912
commit a7d7574e70
35 changed files with 588 additions and 45 deletions
--- a/web/src/i18n/locales/ca.ts
+++ b/web/src/i18n/locales/ca.ts
@@ -78,6 +78,11 @@ const ca = {
      frameDetectTip:
        "Calcula la diferència entre fotogrames. S'atura la transmissió si no hi ha canvis a la pantalla de l'amfitrió remot.",
      resetHdmi: 'Restablir HDMI',
+      mixedH264: {
+        title: 'Conflicte de flux H.264',
+        description:
+          "S'estan utilitzant H.264 Direct i H.264 WebRTC alhora. Això pot provocar esquinçament de pantalla o vídeo corrupte. Utilitzeu només un mode H.264."
+      },
      captureStatus: {
        hdmiError: 'Error a la pantalla HDMI',
        unsupportedResolution: 'La resolució actual no és compatible',
--- a/web/src/i18n/locales/cz.ts
+++ b/web/src/i18n/locales/cz.ts
@@ -79,6 +79,11 @@ const cz = {
      frameDetectTip:
        'Vypočítá rozdíl mezi snímky. Přenos video streamu se zastaví, pokud nejsou detekovány změny na obrazovce vzdáleného hostitele.',
      resetHdmi: 'Resetovat HDMI',
+      mixedH264: {
+        title: 'Konflikt streamu H.264',
+        description:
+          'H.264 Direct a H.264 WebRTC se používají současně. To může způsobit trhání obrazu nebo poškozené video. Používejte pouze jeden režim H.264.'
+      },
      captureStatus: {
        hdmiError: 'Chyba obrazu HDMI',
        unsupportedResolution: 'Aktuální rozlišení není podporováno',
--- a/web/src/i18n/locales/da.ts
+++ b/web/src/i18n/locales/da.ts
@@ -78,6 +78,11 @@ const da = {
      frameDetectTip:
        'Beregner forskellen mellem hver frame. Stopper med at sende et video stream hvis der ikke registreres ændringer på fjerncomputerens skærm.',
      resetHdmi: 'Nulstil HDMI',
+      mixedH264: {
+        title: 'H.264-streamkonflikt',
+        description:
+          'H.264 Direct og H.264 WebRTC bruges samtidigt. Dette kan forårsage skærmrivning eller beskadiget video. Brug kun én H.264-tilstand.'
+      },
      captureStatus: {
        hdmiError: 'Fejl i HDMI-billedet',
        unsupportedResolution: 'Den aktuelle opløsning understøttes ikke',
--- a/web/src/i18n/locales/de.ts
+++ b/web/src/i18n/locales/de.ts
@@ -81,6 +81,11 @@ const de = {
      frameDetectTip:
        'Berechnet den Unterschied zwischen den Einzelbildern. Beendet die Liveübertragung des Videostreams wenn keine Änderungen auf dem Bildschirm des Hosts festgestellt werden kann.',
      resetHdmi: 'HDMI zurücksetzen',
+      mixedH264: {
+        title: 'H.264-Streamkonflikt',
+        description:
+          'H.264 Direct und H.264 WebRTC werden gleichzeitig verwendet. Dies kann zu Bildschirm-Tearing oder beschädigtem Video führen. Bitte verwenden Sie nur einen H.264-Modus.'
+      },
      captureStatus: {
        hdmiError: 'HDMI-Bildschirmfehler',
        unsupportedResolution: 'Die aktuelle Auflösung wird nicht unterstützt',
--- a/web/src/i18n/locales/en.ts
+++ b/web/src/i18n/locales/en.ts
@@ -77,6 +77,11 @@ const en = {
      frameDetectTip:
        "Calculate the difference between frames. Stop transmitting video stream when no changes are detected on the remote host's screen.",
      resetHdmi: 'Reset HDMI',
+      mixedH264: {
+        title: 'H.264 stream conflict',
+        description:
+          'H.264 Direct and H.264 WebRTC are being used at the same time. This may cause screen tearing or corrupted video. Please use only one H.264 mode.'
+      },
      captureStatus: {
        hdmiError: 'HDMI screen error',
        unsupportedResolution: 'Current resolution is not supported',
--- a/web/src/i18n/locales/es.ts
+++ b/web/src/i18n/locales/es.ts
@@ -79,6 +79,11 @@ const es = {
      frameDetectTip:
        'Calcula la diferencia entre fotogramas. Para de transmitir vídeo cuando no se detectan cambios en la pantalla del host remoto.',
      resetHdmi: 'Reiniciar HDMI',
+      mixedH264: {
+        title: 'Conflicto de flujo H.264',
+        description:
+          'H.264 Direct y H.264 WebRTC se están utilizando al mismo tiempo. Esto puede causar tearing de pantalla o vídeo corrupto. Utilice solo un modo H.264.'
+      },
      captureStatus: {
        hdmiError: 'Error de imagen HDMI',
        unsupportedResolution: 'La resolución actual no es compatible',
--- a/web/src/i18n/locales/fr.ts
+++ b/web/src/i18n/locales/fr.ts
@@ -81,6 +81,11 @@ const fr = {
      frameDetectTip:
        "Calcule la différence entre les images. Arrête la transmission du flux vidéo lorsqu'aucun changement n'est détecté sur l'écran de l'hôte distant",
      resetHdmi: 'Réinitialiser le HDMI',
+      mixedH264: {
+        title: 'Conflit de flux H.264',
+        description:
+          'Les modes H.264 Direct et H.264 WebRTC sont utilisés simultanément. Cela peut provoquer des déchirures d’écran ou une vidéo corrompue. Veuillez n’utiliser qu’un seul mode H.264.'
+      },
      captureStatus: {
        hdmiError: 'Erreur d’image HDMI',
        unsupportedResolution: 'La résolution actuelle n’est pas prise en charge',
--- a/web/src/i18n/locales/hu.ts
+++ b/web/src/i18n/locales/hu.ts
@@ -80,6 +80,11 @@ const hu = {
      frameDetectTip:
        'Elemzi a képkockák közötti különbségeket. A videó stream küldése leáll, ha a távoli gép képernyőjén nem történik változás.',
      resetHdmi: 'HDMI visszaállítása',
+      mixedH264: {
+        title: 'H.264 adatfolyam-ütközés',
+        description:
+          'Az H.264 Direct és az H.264 WebRTC egyszerre van használatban. Ez képtörést vagy sérült videót okozhat. Csak egy H.264 módot használjon.'
+      },
      captureStatus: {
        hdmiError: 'HDMI-képernyőhiba',
        unsupportedResolution: 'A jelenlegi felbontás nem támogatott',
--- a/web/src/i18n/locales/id.ts
+++ b/web/src/i18n/locales/id.ts
@@ -78,6 +78,11 @@ const id = {
      frameDetectTip:
        'Hitung selisih antar frame. Hentikan transmisi aliran video saat tidak ada perubahan yang terdeteksi di layar host jarak jauh.',
      resetHdmi: 'Atur ulang HDMI',
+      mixedH264: {
+        title: 'Konflik aliran H.264',
+        description:
+          'H.264 Direct dan H.264 WebRTC sedang digunakan secara bersamaan. Hal ini dapat menyebabkan layar robek atau video rusak. Harap gunakan hanya satu mode H.264.'
+      },
      captureStatus: {
        hdmiError: 'Kesalahan layar HDMI',
        unsupportedResolution: 'Resolusi saat ini tidak didukung',
--- a/web/src/i18n/locales/it.ts
+++ b/web/src/i18n/locales/it.ts
@@ -80,6 +80,11 @@ const it = {
      frameDetectTip:
        'Calcola la differenza tra i frame. Interrompe la trasmissione del flusso video quando non vengono rilevate modifiche sullo schermo del dispositivo remoto.',
      resetHdmi: 'Reimposta HDMI',
+      mixedH264: {
+        title: 'Conflitto del flusso H.264',
+        description:
+          'I flussi H.264 Direct e H.264 WebRTC sono utilizzati contemporaneamente. Ciò può causare tearing dello schermo o video danneggiato. Utilizzare una sola modalità H.264.'
+      },
      captureStatus: {
        hdmiError: 'Errore schermata HDMI',
        unsupportedResolution: 'La risoluzione attuale non è supportata',
--- a/web/src/i18n/locales/ja.ts
+++ b/web/src/i18n/locales/ja.ts
@@ -78,6 +78,11 @@ const ja = {
      frameDetectTip:
        'フレーム間の差異を計算し、リモートホストの画面が変更されない場合はビデオストリームの送信を停止します',
      resetHdmi: 'HDMI をリセット',
+      mixedH264: {
+        title: 'H.264 ストリームの競合',
+        description:
+          'H.264 Direct と H.264 WebRTC が同時に使用されています。画面のティアリングや映像の破損が発生する可能性があります。H.264 モードは 1 つだけ使用してください。'
+      },
      captureStatus: {
        hdmiError: 'HDMI 画面エラー',
        unsupportedResolution: '現在の解像度はサポートされていません',
--- a/web/src/i18n/locales/ko.ts
+++ b/web/src/i18n/locales/ko.ts
@@ -77,6 +77,11 @@ const ko = {
      frameDetectTip:
        '프레임 간의 차이를 계산합니다. 원격 호스트 화면에 변경 사항이 감지되지 않으면 비디오 스트림 전송을 중지합니다.',
      resetHdmi: 'HDMI 초기화',
+      mixedH264: {
+        title: 'H.264 스트림 충돌',
+        description:
+          'H.264 Direct와 H.264 WebRTC가 동시에 사용되고 있습니다. 화면 찢어짐이나 손상된 영상이 발생할 수 있습니다. H.264 모드는 하나만 사용하세요.'
+      },
      captureStatus: {
        hdmiError: 'HDMI 화면 오류',
        unsupportedResolution: '현재 해상도는 지원되지 않습니다',
--- a/web/src/i18n/locales/nb.ts
+++ b/web/src/i18n/locales/nb.ts
@@ -79,6 +79,11 @@ const nb = {
      frameDetectTip:
        'Kalkuler forskjellen mellom bilder. Stopper overføring av video når det ikke oppdages forskjell på den eksterne vertens skjerm.',
      resetHdmi: 'Tilbakestill HDMI',
+      mixedH264: {
+        title: 'H.264-strømmekonflikt',
+        description:
+          'H.264 Direct og H.264 WebRTC brukes samtidig. Dette kan føre til skjermriving eller ødelagt video. Bruk bare én H.264-modus.'
+      },
      captureStatus: {
        hdmiError: 'HDMI-skjermfeil',
        unsupportedResolution: 'Gjeldende oppløsning støttes ikke',
--- a/web/src/i18n/locales/nl.ts
+++ b/web/src/i18n/locales/nl.ts
@@ -80,6 +80,11 @@ const nl = {
      frameDetectTip:
        'Berekent het verschil tussen frames. Stopt met het verzenden van de videostream wanneer er geen veranderingen worden gedetecteerd op het scherm van de externe host.',
      resetHdmi: 'Reset HDMI',
+      mixedH264: {
+        title: 'H.264-streamconflict',
+        description:
+          'H.264 Direct en H.264 WebRTC worden tegelijkertijd gebruikt. Dit kan tearing of beschadigde video veroorzaken. Gebruik slechts één H.264-modus.'
+      },
      captureStatus: {
        hdmiError: 'HDMI-schermfout',
        unsupportedResolution: 'De huidige resolutie wordt niet ondersteund',
--- a/web/src/i18n/locales/pl.ts
+++ b/web/src/i18n/locales/pl.ts
@@ -79,6 +79,11 @@ const pl = {
      frameDetectTip:
        'Obliczanie różnicy między klatkami. Zatrzymaj transmisję strumienia wideo, gdy na ekranie zdalnego hosta nie zostaną wykryte żadne zmiany.',
      resetHdmi: 'Resetuj HDMI',
+      mixedH264: {
+        title: 'Konflikt strumieni H.264',
+        description:
+          'Strumienie H.264 Direct i H.264 WebRTC są używane jednocześnie. Może to powodować rozrywanie obrazu lub uszkodzenie wideo. Używaj tylko jednego trybu H.264.'
+      },
      captureStatus: {
        hdmiError: 'Błąd obrazu HDMI',
        unsupportedResolution: 'Bieżąca rozdzielczość nie jest obsługiwana',
--- a/web/src/i18n/locales/pt_br.ts
+++ b/web/src/i18n/locales/pt_br.ts
@@ -78,6 +78,11 @@ const pt_br = {
      frameDetectTip:
        'Calcular a diferença entre os quadros. Parar a transmissão de vídeo quando nenhuma alteração for detectada na tela do host remoto.',
      resetHdmi: 'Redefinir HDMI',
+      mixedH264: {
+        title: 'Conflito de transmissão H.264',
+        description:
+          'H.264 Direct e H.264 WebRTC estão sendo usados ao mesmo tempo. Isso pode causar rasgos na tela ou vídeo corrompido. Use apenas um modo H.264.'
+      },
      captureStatus: {
        hdmiError: 'Erro na imagem HDMI',
        unsupportedResolution: 'A resolução atual não é compatível',
--- a/web/src/i18n/locales/ru.ts
+++ b/web/src/i18n/locales/ru.ts
@@ -78,6 +78,11 @@ const ru = {
      frameDetectTip:
        'Вычисляет разницу между кадрами и прекращает передачу видеопотока, если на экране удаленного узла не обнаружено никаких изменений.',
      resetHdmi: 'Перезагрузить HDMI подсистему',
+      mixedH264: {
+        title: 'Конфликт потоков H.264',
+        description:
+          'H.264 Direct и H.264 WebRTC используются одновременно. Это может привести к разрывам изображения или повреждению видео. Используйте только один режим H.264.'
+      },
      captureStatus: {
        hdmiError: 'Ошибка изображения HDMI',
        unsupportedResolution: 'Текущее разрешение не поддерживается',
--- a/web/src/i18n/locales/se.ts
+++ b/web/src/i18n/locales/se.ts
@@ -76,6 +76,11 @@ const se = {
      frameDetectTip:
        'Beräkna skillnaden mellan ramar. Sluta skicka videoström när inga förändringar upptäcks på fjärrvärdens skärm.',
      resetHdmi: 'Återställ HDMI',
+      mixedH264: {
+        title: 'H.264-strömningskonflikt',
+        description:
+          'H.264 Direct och H.264 WebRTC används samtidigt. Detta kan orsaka skärmrivningar eller skadad video. Använd endast ett H.264-läge.'
+      },
      captureStatus: {
        hdmiError: 'HDMI-skärmfel',
        unsupportedResolution: 'Den aktuella upplösningen stöds inte',
--- a/web/src/i18n/locales/th.ts
+++ b/web/src/i18n/locales/th.ts
@@ -76,6 +76,11 @@ const th = {
      frameDetectTip:
        'ระบบจะคำนวณความแตกต่างระหว่างเฟรม และหยุดส่งสตรีมวิดีโอเมื่อไม่พบการเปลี่ยนแปลงบนหน้าจอของคอมพิวเตอร์ต้นทาง',
      resetHdmi: 'รีเช็ท HDMI',
+      mixedH264: {
+        title: 'สตรีม H.264 ขัดแย้งกัน',
+        description:
+          'กำลังใช้งาน H.264 Direct และ H.264 WebRTC พร้อมกัน ซึ่งอาจทำให้ภาพฉีกขาดหรือวิดีโอเสียหาย โปรดใช้โหมด H.264 เพียงโหมดเดียว'
+      },
      captureStatus: {
        hdmiError: 'ข้อผิดพลาดหน้าจอ HDMI',
        unsupportedResolution: 'ไม่รองรับความละเอียดปัจจุบัน',
--- a/web/src/i18n/locales/tr.ts
+++ b/web/src/i18n/locales/tr.ts
@@ -79,6 +79,11 @@ const tr = {
      frameDetectTip:
        'Gönderilen kareler arasındaki farkı hesaplar. Uzak ana bilgisayardan gönderilen yayında bir değişiklik yoksa görüntü yayınını durdurur.',
      resetHdmi: 'HDMI sıfırla',
+      mixedH264: {
+        title: 'H.264 akış çakışması',
+        description:
+          'H.264 Direct ve H.264 WebRTC aynı anda kullanılıyor. Bu, ekran yırtılmasına veya bozuk videoya neden olabilir. Lütfen yalnızca bir H.264 modu kullanın.'
+      },
      captureStatus: {
        hdmiError: 'HDMI ekran hatası',
        unsupportedResolution: 'Geçerli çözünürlük desteklenmiyor',
--- a/web/src/i18n/locales/uk.ts
+++ b/web/src/i18n/locales/uk.ts
@@ -79,6 +79,11 @@ const uk = {
      frameDetectTip:
        'Обчислює різницю між кадрами. Зупиняє передачу відеопотоку, коли на екрані віддаленого хоста не виявлено змін.',
      resetHdmi: 'Перезавантажити HDMI підсистему',
+      mixedH264: {
+        title: 'Конфлікт потоків H.264',
+        description:
+          'H.264 Direct і H.264 WebRTC використовуються одночасно. Це може спричинити розриви зображення або пошкодження відео. Використовуйте лише один режим H.264.'
+      },
      captureStatus: {
        hdmiError: 'Помилка зображення HDMI',
        unsupportedResolution: 'Поточна роздільна здатність не підтримується',
--- a/web/src/i18n/locales/vi.ts
+++ b/web/src/i18n/locales/vi.ts
@@ -78,6 +78,11 @@ const vi = {
      frameDetectTip:
        'Tính toán sự khác biệt giữa các khung hình. Dừng truyền video khi không có thay đổi trên màn hình máy chủ từ xa.',
      resetHdmi: 'Đặt lại HDMI',
+      mixedH264: {
+        title: 'Xung đột luồng H.264',
+        description:
+          'H.264 Direct và H.264 WebRTC đang được sử dụng đồng thời. Điều này có thể gây xé hình hoặc video bị hỏng. Vui lòng chỉ sử dụng một chế độ H.264.'
+      },
      captureStatus: {
        hdmiError: 'Lỗi màn hình HDMI',
        unsupportedResolution: 'Độ phân giải hiện tại không được hỗ trợ',
--- a/web/src/i18n/locales/zh.ts
+++ b/web/src/i18n/locales/zh.ts
@@ -74,6 +74,11 @@ const zh = {
      frameDetect: '帧差检测',
      frameDetectTip: '计算帧之间的差异，当检测到远程主机画面不变时，停止传输视频流',
      resetHdmi: '重置 HDMI',
+      mixedH264: {
+        title: 'H.264 视频流冲突',
+        description:
+          '检测到 H.264 Direct 和 H.264 WebRTC 同时使用，可能导致画面撕裂或花屏。请只保留一种 H.264 模式。'
+      },
      captureStatus: {
        hdmiError: 'HDMI 画面异常',
        unsupportedResolution: '当前分辨率不支持',
--- a/web/src/i18n/locales/zh_tw.ts
+++ b/web/src/i18n/locales/zh_tw.ts
@@ -74,6 +74,11 @@ const zh_tw = {
      frameDetect: '影格檢測',
      frameDetectTip: '計算影格之間的差異。當遠端主機畫面未偵測到任何變更時，停止視訊傳輸串流。',
      resetHdmi: '重置 HDMI',
+      mixedH264: {
+        title: 'H.264 串流衝突',
+        description:
+          '偵測到 H.264 Direct 和 H.264 WebRTC 同時使用，可能導致畫面撕裂或影片損壞。請只保留一種 H.264 模式。'
+      },
      captureStatus: {
        hdmiError: 'HDMI 畫面異常',
        unsupportedResolution: '目前解析度不支援',
--- a/web/src/pages/desktop/index.tsx
+++ b/web/src/pages/desktop/index.tsx
@@ -14,7 +14,7 @@ import { CaptureStatusOverlay, useCaptureStatus } from './capture-status';
 import { Keyboard } from './keyboard';
 import { Menu } from './menu';
 import { Mouse } from './mouse';
-import { Notification } from './notification.tsx';
+import { H264ModeNotification, Notification } from './notification.tsx';
 import { Sidebar as PicoclawSidebar } from './picoclaw';
 import { ActionOverlay } from './picoclaw/action-overlay.tsx';
 import { Screen } from './screen';
@@ -70,6 +70,7 @@ export const Desktop = () => {
      <Head title={t('head.desktop')} />

      {isBigScreen && <Notification />}
+      <H264ModeNotification />

      {videoMode && resolution && (
        <div className="relative flex h-full min-h-0 w-full min-w-0">
--- a/web/src/pages/desktop/notification.tsx
+++ b/web/src/pages/desktop/notification.tsx
@@ -1,10 +1,20 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { Button, notification } from 'antd';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';

 import { isPasswordUpdated } from '@/api/auth.ts';
 import { getSkipModifyPassword, setSkipModifyPassword } from '@/lib/localstorage.ts';
+import { client } from '@/lib/websocket.ts';
+
+const H264_MODE_STATUS_EVENT = 'h264-mode-status';
+const MIXED_H264_NOTIFICATION_KEY = 'mixed_h264_modes';
+
+type H264ModeStatus = {
+  generation: string;
+  revision: number;
+  mixed: boolean;
+};

 export const Notification = () => {
  const { t } = useTranslation();
@@ -17,31 +27,85 @@ export const Notification = () => {

    isPasswordUpdated().then((rsp) => {
      if (rsp.code === 0 && !rsp.data.isUpdated) {
-        openNotification();
+        api.warning({
+          key: 'no_change_password',
+          message: t('auth.changePassword'),
+          description: t('auth.changePasswordDesc'),
+          placement: 'topRight',
+          btn: (
+            <Button
+              type="primary"
+              onClick={() => {
+                api.destroy();
+                navigate('/auth/password');
+              }}
+            >
+              {t('auth.ok')}
+            </Button>
+          ),
+          duration: null,
+          onClose: () => setSkipModifyPassword(true)
+        });
      }
    });
-  }, []);
-
-  function openNotification() {
-    api.warning({
-      key: 'no_change_password',
-      message: t('auth.changePassword'),
-      description: t('auth.changePasswordDesc'),
-      placement: 'topRight',
-      btn: (
-        <Button type="primary" onClick={changePassword}>
-          {t('auth.ok')}
-        </Button>
-      ),
-      duration: null,
-      onClose: () => setSkipModifyPassword(true)
-    });
-  }
-
-  function changePassword() {
-    api.destroy();
-    navigate('/auth/password');
-  }
+  }, [api, navigate, t]);

  return <>{contextHolder}</>;
 };
+
+export const H264ModeNotification = () => {
+  const { t } = useTranslation();
+  const [api, contextHolder] = notification.useNotification();
+  const latestStatusRef = useRef<H264ModeStatus | null>(null);
+
+  useEffect(() => {
+    return client.on(H264_MODE_STATUS_EVENT, (message) => {
+      const status = parseH264ModeStatus(message.data);
+      if (!status) return;
+
+      const latestStatus = latestStatusRef.current;
+      if (latestStatus && status.generation === latestStatus.generation && status.revision < latestStatus.revision) {
+        return;
+      }
+      latestStatusRef.current = status;
+
+      if (status.mixed) {
+        api.warning({
+          key: MIXED_H264_NOTIFICATION_KEY,
+          message: t('screen.mixedH264.title'),
+          description: t('screen.mixedH264.description'),
+          placement: 'topRight',
+          duration: null
+        });
+      } else {
+        api.destroy(MIXED_H264_NOTIFICATION_KEY);
+      }
+    });
+  }, [api, t]);
+
+  return <>{contextHolder}</>;
+};
+
+function parseH264ModeStatus(data: unknown): H264ModeStatus | null {
+  if (typeof data !== 'string') return null;
+
+  try {
+    const envelope = JSON.parse(data) as { data?: unknown };
+    if (typeof envelope.data !== 'string') return null;
+
+    const status = JSON.parse(envelope.data) as Partial<H264ModeStatus>;
+    if (
+      typeof status.generation !== 'string' ||
+      typeof status.revision !== 'number' ||
+      !Number.isSafeInteger(status.revision) ||
+      status.revision < 0 ||
+      typeof status.mixed !== 'boolean'
+    ) {
+      return null;
+    }
+
+    return { generation: status.generation, revision: status.revision, mixed: status.mixed };
+  } catch {
+    return null;
+  }
+}