２台のカメラ映像をブラウザに表示させたい
Q&A
Closed
解決したいこと
HTML、JavaScriptともに、初心者なのですが、仕事効率化のために、
HTML5とJavaScriptで２台のカメラ映像をブラウザに表示させたいです。
下記サイトを参考に、カメラ２台が表示できるようにしたいのですが、
コードの書き方がわかりません。
8時間ぐらい、格闘しましたが解決できないため、投稿しました。
すみませんが、どなたかご教示いただけないでしょうか。
発生している問題・エラー
カメラ１台目のコードをコピーし、２台目用にコピー、IDや使用するカメラなど
競合する部分として、下記を変更しましたが、2台目のカメラ映像が表示されない。
（シャッターも1台目のシャッターしか動作しない）
①２台目カメラ用IDを変更（”_2”を追加）
<video id="camera_2" width="300" height="200"></video>
<canvas id="picture_2" width="300" height="200"></canvas>
const video = document.querySelector("#camera_2");
const canvas = document.querySelector("#picture_2");
②使用するカメラを１台目とは別のカメラへ変更
// facingMode: "user" // フロントカメラを利用する
facingMode: { exact: "environment" } // リアカメラを利用する場合
該当するソースコード
流用作成したソースコードのすべてです。
真ん中辺の「ここから追加」以降が流用作成部です。
<!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>
window.onload = () => {
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>
<!-- ここから追加 -->
<h1>HTML5カメラ_追加</h1>
<video id="camera_2" width="300" height="200"></video>
<canvas id="picture_2" 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>
window.onload = () => {
const video = document.querySelector("#camera_2");
const canvas = document.querySelector("#picture_2");
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カメラ×２台（microsoft,logicool）
0
