今回はリアカメラ編を作成しようと思います
リアカメラとは、キーボードがある方向のカメラです
じゃ作ってみるでー

<li><a href="#area-1">WEBカメラの映像を表示</a></li>
			<li><a href="#area-2">リアカメラでの、撮影</a></li>
			<li><a href="#area-3">フロントカメラでの撮影</a></li>



<section class="area" id="area-1">
			

<footer id="footer">
	<p class="js-scroll scroll-top scroll-view"><a href="#area-2">Scroll</a></p>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<section class="area" id="area-1">

  <h2>WEBカメラの映像を表示</h2>
</head>
<body>
    <div>
        <h1>WEBカメラの映像を表示</h1>
        <div>
            <video id="video"></video>
        </div>
    </div>  
    <script>
        const video = document.getElementById("video")
        navigator.mediaDevices.getUserMedia({
            video: true,
            audio: false,
        }).then(stream => {
            video.srcObject = stream;
            video.play()
        }).catch(e => {
          console.log(e)
        })
    </script>  


 


</body>
</html>

</body>
</html>



<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Camera Test</title>
  <style>
  canvas, video{
    border: 1px solid gray;
  }
  </style>
</head>
<body>


<html>
<body>
<ol>
<pre>
<section class="area" id="area-2">

<h1>撮影します。</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();    // 1.5秒後にカメラ再開
    }, 1500);


    // canvasに画像を貼り付ける
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);


    const c = document.getElementById('picture');
    c.toBlob((blob) => {
        const url = URL.createObjectURL(blob);
        const a = document.createElement("a");
        document.body.appendChild(a);
var nowDate = new Date();
var year = nowDate.getFullYear();
var month = nowDate.getMonth()+1;
var date = nowDate.getDate();

var hours = nowDate.getHours();

var minutes = nowDate.getMinutes();

var Seconds = nowDate.getSeconds();


var today = year + '年' + month + '月' + date + '日' + hours + '時' + minutes + '分' + Seconds +'秒';
        a.download = today + '.png';
        a.href = url;
        a.click();
        a.remove();
        setTimeout(() => {
            URL.revokeObjectURL(url);
        }, 1E4);
    }, 'image/png');

  });
};

</script>
</body>
</html>

<html>
<body>
<ol>
<pre>
<section class="area" id="area-3">

<h1>撮影します。</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();    // 3秒後にカメラ再開
    }, 3000);


    // canvasに画像を貼り付ける
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);


    const c = document.getElementById('picture');
    c.toBlob((blob) => {
        const url = URL.createObjectURL(blob);
        const a = document.createElement("a");
        document.body.appendChild(a);
var nowDate = new Date();
var year = nowDate.getFullYear();
var month = nowDate.getMonth()+1;
var date = nowDate.getDate();

var hours = nowDate.getHours();

var minutes = nowDate.getMinutes();

var Seconds = nowDate.getSeconds();


var today = year + '年' + month + '月' + date + '日' + hours + '時' + minutes + '分' + Seconds +'秒';
        a.download = today + '.png';
        a.href = url;
        a.click();
        a.remove();
        setTimeout(() => {
            URL.revokeObjectURL(url);
        }, 1E4);
    }, 'image/png');

  });
};

</script>
</body>
</html>

<footer id="footer">
	<p class="js-scroll scroll-top scroll-view"><a href="#area-2">Scroll</a></p>
	<p class="js-pagetop scroll-top"><a href="#">Page Top</a></p>
	<small>&copy; copyright.</small>
	</footer>
すべてコピペで使用できます
保存名は、その時の時間を、秒数で表します
まとめ

　　　　　参考になると嬉しいです