USBカメラを指定してブラウザで映像表示ができない。
解決したいこと
HTMLとJavaScriptを使い、パソコンに接続したＵＳＢカメラの映像を表示させたい
のですが、カメラを指定する方法がわかりません。
解決方法を教えて頂けないでしょうか。
発生している問題・エラー
PCに接続しているカメラデバイスは下記の４種類ですが、３，４のカメラ指定方法
がわかりません。
1)フロントカメラ
2)リアカメラ
3)USBカメラ１
4)USBカメラ２
フロント、リアは、下記で指定し、表示できる。が、USBカメラの指定方法がわからない。
facingMode: "user" // フロントカメラを利用する
// facingMode: { exact: "environment" } // リアカメラを利用する場合
自分で試したこと
facingMode のパラメーターを調べたときに、user、environmentの以外に
left,rightがあった。
しかしleft,rightのどちらを指定しても、片側のUSBカメラ映像しか出力され
なかった。
該当するソースコード
フロントカメラを指定したときのコード
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Camera Test</title>
<style>
canvas, video{
border: 1px solid gray;
}
</style>
</head>
<body>
<h1>HTML5カメラ</h1>
<video id="camera" width="300" height="200"></video>
<canvas id="picture" width="300" height="200"></canvas>
<form>
<button type="button" id="shutter">シャッター</button>
</form>
<audio id="se" preload="auto">
<source src="camera-shutter1.mp3" type="audio/mp3">
</audio>
<script>
document.addEventListener("DOMContentLoaded", () => {
const video = document.querySelector("#camera");
const canvas = document.querySelector("#picture");
const se = document.querySelector("#se");
/** カメラ設定 */
const constraints = {
audio: false,
video: {
width: 300,
height: 200,
facingMode: "user" // フロントカメラを利用する
// facingMode: { exact: "environment" } // リアカメラを利用する場合
}
};
/**
* カメラを<video>と同期
*/
navigator.mediaDevices.getUserMedia(constraints)
.then( (stream) => {
video.srcObject = stream;
video.onloadedmetadata = (e) => {
video.play();
};
})
.catch( (err) => {
console.log(err.name + ": " + err.message);
});
/**
* シャッターボタン
*/
document.querySelector("#shutter").addEventListener("click", () => {
const ctx = canvas.getContext("2d");
// 演出的な目的で一度映像を止めてSEを再生する
video.pause(); // 映像を停止
se.play(); // シャッター音
setTimeout( () => {
video.play(); // 0.5秒後にカメラ再開
}, 500);
// canvasに画像を貼り付ける
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
});
});
</script>
</body>
</html>
環境
OS:Windows11
ブラウザ：edge
USBカメラ１：logicool C270n HDウェブカメラ
USBカメラ２：Microsoft LifeCam Cinema
0
