0092 devtools を GPUI ベースのネイティブ GUI アプリとして実装する

- OBS WebSocket プロトコル層 (obsdc / p2p) を Rust に移植する
- shiguredo_webrtc で HTTP Bootstrap + DataChannel の P2P クライアントを実装する
- GPUI で接続・映像表示・ソース管理 UI を実装する

Author: voluntas

Cargo.lock

@@ -11,6 +11,7 @@ license = "Apache-2.0"
 
 [workspace]
 members = [
+  "devtools/gui",
   "examples/camera_record",
   "examples/camera_sora_grid",
   "examples/hls_s3",

Cargo.toml

@@ -0,0 +1,31 @@
+[package]
+name = "hisui-devtools-gui"
+version = "0.0.0"
+edition = "2024"
+description = "Hisui DevTools native GUI (GPUI)"
+publish = false
+
+[dependencies]
+# NOTE: 通常の依存は突然挙動が変わることが内容に、バージョンは厳密一致で指定している
+# NOTE: examples と共有する依存は [workspace.dependencies] で定義している
+
+# OBS WebSocket 認証 (SHA-256)
+aws-lc-rs = "=1.17.3"
+# base64
+base64ct = { version = "=1.8.3", features = ["alloc"] }
+# GUI フレームワーク (Zed の GPU アクセラレーション UI)
+# runtime_shaders: Metal Toolchain 無しでもビルドできるようにする (実行時にシェーダーをコンパイルする)
+gpui = { version = "=0.2.2", features = ["runtime_shaders"] }
+# GPUI の RenderImage::new に渡す画像データ (image::Frame) 用
+image = "=0.25.1"
+# JSON のパース・生成
+nojson = { workspace = true }
+# I420 から RGBA への色変換
+shiguredo_libyuv = "=2026.2.0-canary.1"
+# WebRTC
+shiguredo_webrtc = { workspace = true }
+# 非同期処理
+tokio = { workspace = true }
+# ログ
+tracing = { workspace = true }
+tracing-subscriber = { workspace = true }

devtools/gui/Cargo.toml

@@ -0,0 +1,84 @@
+//! エラー型。
+//!
+//! hisui 本体の `src/error.rs` と同じ設計。任意のエラー型から変換可能にするために
+//! 意図的に [`std::error::Error`] を実装していない。
+
+use std::backtrace::{Backtrace, BacktraceStatus};
+use std::panic::Location;
+
+/// エラー型
+pub struct Error {
+    /// エラーが発生した理由
+    pub reason: String,
+
+    /// エラーが作成されたソースコードの場所
+    pub location: &'static Location<'static>,
+
+    /// エラー発生箇所を示すバックトレース
+    ///
+    /// バックトレースは `RUST_BACKTRACE` 環境変数が設定されていない場合には取得されない
+    pub backtrace: Backtrace,
+}
+
+impl Error {
+    /// [`Error`] インスタンスを生成する
+    #[track_caller]
+    pub fn new<T: Into<String>>(reason: T) -> Self {
+        Self {
+            reason: reason.into(),
+            location: Location::caller(),
+            backtrace: Backtrace::capture(),
+        }
+    }
+
+    /// エラー理由のみの文字列表現を返す
+    ///
+    /// `Display` を実装していないため、互換用途で明示的に提供する。
+    pub fn display(&self) -> String {
+        self.reason.clone()
+    }
+}
+
+impl std::fmt::Debug for Error {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        write!(f, "{}", self.reason)?;
+        write!(f, " (at {}:{})", self.location.file(), self.location.line())?;
+
+        if self.backtrace.status() == BacktraceStatus::Disabled {
+            write!(f, " [RUST_BACKTRACE=1 for backtrace]")?;
+        }
+        if self.backtrace.status() == BacktraceStatus::Captured {
+            write!(f, "\n\nBacktrace:\n{}", self.backtrace)?;
+        }
+
+        Ok(())
+    }
+}
+
+/// このクレートのエラー結果型
+pub type Result<T> = std::result::Result<T, Error>;
+
+impl From<std::io::Error> for Error {
+    #[track_caller]
+    fn from(e: std::io::Error) -> Self {
+        Self::new(e.to_string())
+    }
+}
+
+impl From<tokio::time::error::Elapsed> for Error {
+    #[track_caller]
+    fn from(e: tokio::time::error::Elapsed) -> Self {
+        Self::new(e.to_string())
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn display_returns_reason() {
+        let err = Error::new("reason");
+        assert_eq!(err.display(), "reason");
+    }
+}

devtools/gui/src/error.rs

@@ -0,0 +1,11 @@
+//! Hisui DevTools のネイティブ GUI アプリ。
+//!
+//! ブラウザ向け devtools (`devtools/`) の機能を GPUI で実装し直したもので、
+//! P2P 接続・映像表示・OBS WebSocket 操作を提供する。
+
+pub mod error;
+pub mod obsdc;
+pub mod p2p;
+pub mod webrtc;
+
+pub use error::{Error, Result};

devtools/gui/src/lib.rs

@@ -0,0 +1,41 @@
+//! Hisui DevTools のネイティブ GUI アプリのエントリポイント。
+
+mod ui;
+
+use gpui::{App, Application, WindowOptions, prelude::*};
+
+use crate::ui::DevToolsApp;
+
+fn main() {
+    tracing_subscriber::fmt().init();
+
+    Application::new().run(|cx: &mut App| {
+        cx.open_window(
+            WindowOptions {
+                titlebar: Some(gpui::TitlebarOptions {
+                    title: Some("Hisui DevTools".into()),
+                    ..Default::default()
+                }),
+                window_bounds: Some(gpui::WindowBounds::Windowed(gpui::Bounds::centered(
+                    None,
+                    gpui::size(gpui::px(1280.), gpui::px(800.)),
+                    cx,
+                ))),
+                focus: true,
+                ..Default::default()
+            },
+            |_, cx| cx.new(DevToolsApp::new),
+        )
+        .expect("ウィンドウの作成に失敗しました");
+
+        // 最後のウィンドウが閉じられたらアプリを終了する
+        cx.on_window_closed(|cx| {
+            if cx.windows().is_empty() {
+                cx.quit();
+            }
+        })
+        .detach();
+
+        cx.activate(true);
+    });
+}

devtools/gui/src/main.rs

@@ -0,0 +1,11 @@
+//! OBS WebSocket 5.x プロトコル (DataChannel 経由) の定義。
+
+mod auth;
+mod protocol;
+
+pub use auth::generate_authentication_string;
+pub use protocol::{
+    AuthenticationChallenge, ClientMessage, EventData, EventSubscription, HelloData,
+    IdentifiedData, IdentifyData, OpCode, ProtocolError, RequestData, RequestResponseData,
+    RequestStatus, ServerMessage, parse_server_message, serialize_client_message,
+};

devtools/gui/src/obsdc.rs

@@ -0,0 +1,74 @@
+//! OBS WebSocket 5.x SHA-256 認証。
+//!
+//! `devtools/src/obsdc/auth.ts` の Rust 移植。
+//! アルゴリズムは hisui 本体の `src/obsws/auth.rs` の `build_authentication_response` と同一。
+
+use base64ct::{Base64, Encoding as _};
+
+/// OBS WebSocket 5.x の認証文字列を生成する。
+///
+/// 1. `base64_secret = base64(sha256(password + salt))`
+/// 2. `authentication = base64(sha256(base64_secret + challenge))`
+pub fn generate_authentication_string(password: &str, salt: &str, challenge: &str) -> String {
+    let secret_hash = aws_lc_rs::digest::digest(
+        &aws_lc_rs::digest::SHA256,
+        format!("{password}{salt}").as_bytes(),
+    );
+    let base64_secret = Base64::encode_string(secret_hash.as_ref());
+    let secret_challenge_hash = aws_lc_rs::digest::digest(
+        &aws_lc_rs::digest::SHA256,
+        format!("{base64_secret}{challenge}").as_bytes(),
+    );
+    Base64::encode_string(secret_challenge_hash.as_ref())
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    // ブラウザ版 auth.test.ts のテストを移植したもの
+
+    #[test]
+    fn generate_authentication_string_matches_spec() {
+        // プロトコル仕様のサンプル値
+        let password = "supersecretpassword";
+        let salt = "lM1GncleQOaCu9lT1yeUZhFYnqhsLLP1G5lAGo3ixaI=";
+        let challenge = "+IxH4CnCiqpX1rM9scsNynZzbOe4KhDeYcTNS3PDaeY=";
+
+        let result = generate_authentication_string(password, salt, challenge);
+
+        // 結果は Base64 文字列であること
+        assert!(
+            result
+                .chars()
+                .all(|c| c.is_ascii_alphanumeric() || c == '+' || c == '/' || c == '='),
+            "Base64 文字列であること: {}",
+            result
+        );
+        // 長さは SHA-256 の Base64 エンコード (44 文字)
+        assert_eq!(result.len(), 44);
+    }
+
+    #[test]
+    fn generate_authentication_string_is_deterministic() {
+        let password = "testpassword";
+        let salt = "testsalt";
+        let challenge = "testchallenge";
+
+        let result1 = generate_authentication_string(password, salt, challenge);
+        let result2 = generate_authentication_string(password, salt, challenge);
+
+        assert_eq!(result1, result2);
+    }
+
+    #[test]
+    fn generate_authentication_string_differs_by_password() {
+        let salt = "testsalt";
+        let challenge = "testchallenge";
+
+        let result1 = generate_authentication_string("password1", salt, challenge);
+        let result2 = generate_authentication_string("password2", salt, challenge);
+
+        assert_ne!(result1, result2);
+    }
+}