カメラストリーム管理解説

カメラストリームの適切な管理

ステップ1: 既存ストリームの停止

すべてのトラックを停止し、ビデオ要素の`srcObject`を`null`にクリアします。

currentStream.getTracks().forEach(track => {
    track.stop();
});
video.srcObject = null;
            

↓

ステップ2: 解放待機

ストリームが完全に解放されるまで、100ミリ秒待機します。これにより、リソースの競合を防ぎます。

await new Promise(resolve => 
    setTimeout(resolve, 100)
);
            

↓

ステップ3: 新しいストリームの取得

`getUserMedia()`で新しいカメラストリームを取得します。

const stream = await navigator.mediaDevices
    .getUserMedia({
        video: {
            deviceId: { exact: deviceId }
        }
    });
            

↓

ステップ4: ビデオ要素への設定

既存の`srcObject`をクリアしてから、新しいストリームを設定します。50ミリ秒待機してから設定することで、確実に切り替わります。

video.srcObject = null;
await new Promise(resolve => 
    setTimeout(resolve, 50)
);
video.srcObject = stream;
await video.play();
            

重要なポイント: ストリームの完全な解放が重要です。`stop()`を呼ぶだけでは不十分で、`srcObject`を`null`にクリアし、さらに待機時間を設けることで、確実に切り替えができるようになりました。

注意: 待機時間が短すぎると、カメラの切り替えが失敗することがあります。100ミリ秒の待機時間は、試行錯誤の結果、最も安定した値でした。