カメラ入力を備えた Web アプリケーションを作成しました。HTML 5 ツールを使用して、モバイル デバイスのカメラからのストリームをビデオ要素に表示することができました。
video.facingMode を使用して、ユーザーと環境の間の切り替えを実装しました。このソリューションは、Android Chrome と IOS Safari ではうまく機能しますが、Android Firefox では正しく機能しません。
リモート デバッグを使用して、キャッチでスローされるエラー メッセージを取得しました。
エラー: DOMException: ビデオ入力の開始に失敗しました
この問題は、アクティブなストリームが既に実行されているために発生した可能性があることがわかったので、新しいビデオ フィードに切り替える前に track.stop() 関数を実装しましたが、成功しませんでした。
これが私のプロジェクトの基本的なコードで、私が作成したものの背景を示しています。
function getStream() {
const facingMode = Session.get('facingMode');
const constraints = {
video: { facingMode: facingMode }
};
return navigator.mediaDevices.getUserMedia(constraints).
then(gotStream).catch(handleError);
}
function gotStream(_stream) {
stream = _stream
videoElement.srcObject = stream;
}
function handleError(error) {
if (stream) {
stream.getTracks().forEach(track => {
track.stop();
});
}
console.error('Error: ', error);
}
getStream 関数は、ページがレンダリングされた後、クリック イベントで実行され、対面モードを切り替えます。