ブログに戻る

Bedrud の共同ホワイトボードはどのように同期するか

LiveKit データチャネル上の Yjs CRDT — 別のホワイトボードサーバーなしの共有ボード。

2026年7月10日 Bedrud Team engineering, whiteboard, webrtc, yjs

多くのビデオスタックはホワイトボードを別の SaaS、別の WebSocket、許可リストに載せる別オリジンとして後付けします。Bedrud はボードを会議室の中に置き、すでに持っているメディア経路を再利用します：LiveKit データチャネル。

プロダクトの目標

2 人（または 20 人）が同じオーバーレイを開き、描画し、図形を動かし、要素を削除する。全員が約 1 秒以内に同じシーンを見る。退出して再参加しても UI がクラッシュループに囚われない。遅れて参加した人が追いつく。

それが手動ガイドでテストする基準です：マルチユーザー描画、リモートの選択/移動/削除、閉じた後の再開、退出後の再参加。

スタックの選択

部品役割
キャンバス UIExcalidraw スタイルのツール（Web アプリに vendored）
共有状態Yjs CRDT ドキュメント
トランスポートLiveKit reliable / lossy データチャネル
メディア A/V変更なしの WebRTC トラック

CRDT により、中心的なオペレーショナル・トランスフォーム・サーバーなしで同時編集をマージできます。LiveKit はすでにチャット風ペイロード向けにデータを多重化しており、ホワイトボードがその経路を使うため、セルフホスト者は第二のリアルタイムサービスを展開する必要がありません。

なぜ HTTP ポーリングではないのか

ボードのストロークは高頻度でレイテンシに敏感です。API をポーリングすると Go プロセスを叩くか、もっさり感じます。データチャネルは：

  • 通話と同じ参加者セッションに留まる
  • サイドサービス用の追加 CORS と cookie の複雑さを避ける
  • 別の「ホワイトボードオフライン」モードではなく、ルーム接続と共に失敗・回復する

チャット、ステージ制御メッセージ、ボード更新は DC 層で共存でき、SFU メディアは RTP のままです。

セルフホスト者向けビルド注意

ホワイトボードは Web クライアントのコード分割チャンクです。本番ビルドを完了させ（cd apps/web && bun run build）、誰かがボードを開いたときに vendor チャンクが存在するようにしてください。そのチャンクの 404 はパッケージングバグであり、LiveKit の設定ミスではありません。

実験的トグル

共有ホワイトボードは 設定 → 実験的 の下にゲートでき、ホストがコントロールバー入口を欲しいときに有効にできます。エンドユーザー向けは 共同ホワイトボード に記載。

主張しないこと

  • 大陸横断のピクセル単位カーソルロック
  • すべてのボードを永遠に保持する無限オフライン優先ストレージ
  • サーバー側の永続ボード履歴を一等プロダクトとして（今日の焦点はライブセッション同期）

試す

Bedrud をデプロイし、必要なら実験的トグルを有効にし、2 つのブラウザでルームを開いて描画します。双方にストロークが届けば、DC + Yjs 経路は健全です。

メディア平面の運用とアーキテクチャの全体像は WebRTC 接続性 と Web フロントエンド を参照してください。