こんな感じに、試しに配置してみて

購入機材( 1240 + 1001 + 1080 x 3 * 1.10 = 5805円 )

それぞれのカメラを、WebRTC (getUserMedia)経由で接続

<div class="d-flex">
   <div>
       <video id="camera1" width="320" height="320" autoplay></video>
       <button onclick="start('a0b6122fd11a10369b6a6bc62d46b2814b6301ebc50c2d47db9b7cf79063470c', '#camera1')">1</button>
   </div>
   <div>
   <video id="camera2" width="320" height="320" autoplay></video>
   <button onclick="start('0fbad84def20ca4d3af62a467f4f2a429607dd55f0e8693998c31053810e482c', '#camera2')">2</button>
   </div>
<div>
   <video id="camera3" width="320" height="320" autoplay></video>
   <button onclick="start('63702e9d4edec81dfde3e65838f5dc588bdb497de8ff48a42b7de072ffdefe0b', '#camera3')">3</button>
</div>
</div>

<button onclick="shoot()">Shoot</button>
<script>
function start(sourceId, videoId) {
   console.log(sourceId);
   var constraints = {
       audio: false,
       video: {
           optional: [{
               sourceId: sourceId
           }]
       }
   };
   navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
       var video = document.querySelector(videoId);
       console.log(video)
       video.srcObject = stream;
       video.play();
   }, function() {
       console.log("error:" + arguments);
   })
}
function shoot() {
   write('camera1');
   write('camera2');
   write('camera3');
}
navigator.mediaDevices.enumerateDevices().then(function(sourcesInfo) {
 // 取得できたカメラとマイクを含むデバイスからカメラだけをフィルターする
 var videoSroucesArray = sourcesInfo.filter(function(elem) {
     return elem.kind == 'videoinput';
 });
 console.log(videoSroucesArray);
 var i = 1;
 videoSroucesArray.forEach(function (source) {
   // start(source.deviceId, '#camera' + i)
   console.log(source.deviceId);
   i += 1
 })
});
function write(name) {
   var video = document.getElementById(name);
   var canvas = document.createElement('canvas');
   //canvasの描画モードを2sに
   var ctx = canvas.getContext('2d');
   //videoの縦幅横幅を取得
   var w = video.offsetWidth;
   var h = video.offsetHeight;
   //同じサイズをcanvasに指定
   canvas.setAttribute("width", w);
   canvas.setAttribute("height", h);
   //canvasにコピー
   ctx.drawImage(video, 0, 0, w, h);
   //imgにpng形式で書き出し
   //img.src = canvas.toDataURL('image/png');
	var a = document.createElement('a');
	//canvasをJPEG変換し、そのBase64文字列をhrefへセット
	a.href = canvas.toDataURL('image/jpeg', 0.85);
	//ダウンロード時のファイル名を指定
	a.download = name + '.jpg';
	//クリックイベントを発生させる
	a.click();
}
</script>

それぞれの画角から撮影

なんか圧倒的に暗いのと、ピントが甘くて使い物にならない画質感。。。。

課題

1. webrtc 経由じゃなくて適当にネイティブで接続してみてカメラを制御出来るか確認してみる

2. 頑張ってカメラを固定してイケてる画角を探す

撮影しなおした