OBS Tegaki

Surface Proで描画した内容をOBS Studioで表示するためのWebアプリケーション

機能

• Surface Proでの描画
• ペンと消しゴムの切り替え（Surface Slim Pen 2の反対側で消しゴムモード）
• カラーピッカーとブラシサイズの調整
• 縦横表示の切り替え
• 描画内容のクリア
• OBS Studioとの連携

セットアップ

1. 必要なパッケージをインストール

npm install

2. サーバーを起動

npm start

3. Surface Proで以下のURLにアクセス

http://[IPアドレス]:3000

OBS Studioでの使用方法

1. OBS Studioで「ブラウザソース」を追加
2. URLに以下を設定（[IPアドレス]はサーバーのIPアドレスに置き換え）

http://[IPアドレス]:3000?obs=true

3. 幅と高さを設定（デフォルトは16:9のアスペクト比）

OBSモードの特徴

• コントロールパネルが非表示になり、描画領域のみが表示されます
• Surface Proでの描画内容がリアルタイムで反映されます
• 消しゴム機能も正しく同期されます
• 縦横表示の切り替えも同期されます
• キャッシュ更新時も描画内容が維持されます

注意事項

• Surface ProとOBS Studioが同じネットワークに接続されている必要があります
• サーバーのIPアドレスはnpm start実行時に表示されます

必要条件

• Node.js 14.0.0以上
• モダンブラウザ（Chrome, Firefox, Safari, Edge等）
• Surface Slim Pen 2（消しゴム機能を使用する場合）

インストール

1. リポジトリをクローン

git clone https://github.com/ayapi/obs-tegaki.git
cd obs-tegaki

2. 依存関係のインストール

npm install

3. サーバーの起動

npm start

4. ブラウザでアクセス

http://localhost:3000

使い方

描画方法

1. マウスで描画

   • 左クリックを押したままドラッグして描画
   • カラーピッカーで色を選択
   • スライダーでブラシサイズを調整

2. Surface Slim Pen 2で描画

   • ペンの先端で描画
   • ペンの反対側（消しゴム）で消去
   • 消しゴムは通常のブラシサイズの4倍の太さ

3. タッチ操作

   • タッチパネルで描画可能
   • マルチタッチにも対応

画面設定

• 「縦横切り替え」ボタンで画面の向きを切り替え
  • 横向き：16:9
  • 縦向き：9:16
• 設定は自動的に保存され、次回アクセス時に復元

開発者向け情報

プロジェクト構造

obs-tegaki/
├── public/
│   ├── index.html
│   └── script.js
├── server.js
├── package.json
└── README.md

技術スタック

• フロントエンド
  • HTML5
  • JavaScript (ES6+)
  • Canvas API
• バックエンド
  • Node.js
  • WebSocket

ライセンス

MIT License

作者

ayapi