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）
（シャッターも1台目のシャッターしか動作しない）
document.querySelector("#shutter").addEventListener( ...
としてますよね？
2つプレビュー表示領域がありますよね？（ID個別）
2台カメラありますよね？（ID個別）
サウンドエフェクトが1つありますよね？
そしてシャッターボタンが2つあるがID同じですよね？ ...
サウンドエフェクトは連続して押された時に多分音が再度最初から再生されると思いますが、これが動作意図なら良いとして、シャッターはやっぱりカメラ1つに1個ですよね？
@yukkin
Questionerwindow.onload = () => { ... }; はページロード完了時に実行されるイベントハンドラを上書きでセットします。2回セットしているせいで後者しか実行されていません。（それだと2台目のカメラだけが映るはずですが……1台目が映る理由はよくわかりません。）
2つとも document.addEventListener("DOMContentLoaded", () => { ... }); に書き換えて両方実行されるようにしてください。
また、 ID はすべての要素についてページ内で重複することのないようにしてください。2台目用のシャッターや効果音も書き換える必要があります。
@yukkin
Questioner