Webカメラの映像を取得して表示する

Windows PC に接続された Web カメラの映像を表示する場合、フロントエンドの標準技術 (HTML5 getUserMedia) だけで完結します。Tauri 側での特別な実装は不要です。

1. フロントエンド実装

HTML に <video> タグを用意し、TypeScript から getUserMedia を呼び出します。

<!-- index.html -->
<video id="webcam" autoplay playsinline style="width: 100%;"></video>

// main.ts
async function startCamera(): Promise<void> {
  try {
    // 映像のみ取得（音声が必要な場合は audio: true にする）
    const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
    
    // HTMLVideoElement として取得
    const videoElement = document.getElementById('webcam') as HTMLVideoElement | null;
    
    if (videoElement) {
      videoElement.srcObject = stream;
    }
  } catch (err) {
    console.error("Error accessing camera:", err);
  }
}

// ページ読み込み完了時にカメラを起動
window.addEventListener('DOMContentLoaded', () => {
  startCamera();
});

2. Windows 特有の注意点

Windows では追加の設定ファイル（Info.plist など）は不要ですが、以下の点を確認してください。

• OS のプライバシー設定: Windows の「設定」>「プライバシーとセキュリティ」>「カメラ」で、アプリおよびデスクトップアプリからのカメラアクセスが許可されている必要があります。
• マイクの使用: マイクを使用する場合も同様に、OS のマイク設定でアクセスが許可されている必要があります。
• WebView2: Windows の Tauri アプリは WebView2 上で動作します。Webカメラのアクセスは WebView2 のポリシーに従いますが、通常はローカルアプリとして信頼され動作します。