navigator.mediaDevices.getUserMediaについて分かったことを書いていく。
navigator.mediaDevices.getUserMedia()メソッドは非同期なので、awaitを使用して待機する必要がある。
awaitキーワードを使用することで、getUserMedia()メソッドが完了し、streamオブジェクトが解決されるまで待機します。これにより、メディアストリームが取得される前に次のコードが実行されるのを防ぐことが可能である。
navigator.mediaDevices.getUserMedia()メソッドを使用時に出るエラーをcatchブロックで受け取る。
エラーは何種類かあるのでerror.nameによって分類する。
次のようなコードにした。
WebCameraのエラーのハンドリングがCommon getUserMedia() Errors (addpipe.com) ExternalLinkに載っていたので、これを使用することにする。このエラーのハンドリングで不都合があったら修正していくことにする。
const cw = 640;
const ch = 360;
const constraints = window.constraints = {
// audioがfalseでないとリモートデスクトップ越しにうまく動かない。
audio: false,
video: {
width: cw,
height: ch
}
};
try {
// getUserMedia()メソッドの呼び出しを非同期的に待機し、取得したメディアストリームをstream変数に代入する。
// streamオブジェクトは、ビデオやオーディオなどのメディアストリームを表す。
const stream = await navigator.mediaDevices.getUserMedia(constraints);
} catch (error) {
// log to console first
console.error(error);
// handle the error
if (error.name == "NotFoundError" || error.name == "DevicesNotFoundError") {
// 「required track is missing」=「必要なトラックない。」
// つまり、「カメラが見つからない。」= 「カメラが見つからない。」
console.error("No Camera.");
} else if (error.name == "NotReadableError" || error.name == "TrackStartError") {
// webcam or mic are already in use
// webカメラ またはマイクがすでに使用されている。
console.error("Webcam or mic are already in use.");
} else if (error.name == "OverconstrainedError" || error.name == "ConstraintNotSatisfiedError") {
// constraints can not be satisfied by avb. devices
// 「制約条件がAVB（Audio Video Bridging）デバイスによって満たされない。」
const v = constraints.video;
// 「解像度 ${v.width}x${v.height} px はお使いのデバイスではサポートされていません。」
console.error(`The resolution ${v.width}x${v.height} px is not supported by your device.`);
} else if (error.name == "NotAllowedError" || error.name == "PermissionDeniedError") {
// permission denied in browser
// ブラウザでパーミッションが拒否された。
// カメラとマイクの使用が許可されていない。デモを動作させるには、あなたのページにデバイスへのアクセスを許可する必要がある。
console.error('Permissions have not been granted to use your camera and microphone, you need to allow the page access to your devices in order for the demo to work.');
} else if (error.name == "TypeError") {
// 「empty constraints object」=「制約オブジェクトが空である。」
// 「制約オブジェクトが空である。」というエラーメッセージは、カメラの設定のパラメータが不正または欠落していることを示している。
// カメラの設定のパラメータが不正または欠落している
console.error('The camera settings parameters are invalid or missing.');
} else {
// other errors
console.error(`getUserMedia error:${error.name}`);
}
}