JSFiddle - React, Tailwind, and code Playground

HTML

<div class="left">
  <button id="startButton">
    開始
  </button>
  <h2>プレビュー</h2>
  <video id="preview" width="160" height="120" autoplay muted></video>
</div>

<div class="right">
  <button id="stopButton">
    停止
  </button>
  <h2>録画した内容</h2>
  <video id="recording" width="160" height="120" controls></video>
  <button id="downloadButton">
    Download
  </button>
</div>

CSS

.left {
  float: left;
  width: 180px;
}

.right {
}

JavaScript

let preview = document.getElementById("preview");
let recording = document.getElementById("recording");
let startButton = document.getElementById("startButton");
let stopButton = document.getElementById("stopButton");
let downloadButton = document.getElementById("downloadButton");
let logElement = document.getElementById("log");

let recordingTimeMS = 5000;

// 開始ボタンを押した時の処理
startButton.addEventListener("click", function() {
  // Webカメラにアクセス
  navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true
  }).then(stream => {
    // アクセスが許可された場合
    preview.srcObject = stream; // プレビューにWebカメラの映像を表示
    downloadButton.href = stream; // ダウンロードボタンにも配置
    // 表示内容をキャプチャする
    preview.captureStream = preview.captureStream || preview.mozCaptureStream;
    // プレビューが表示開始するタイミングをPromiseで取得
    return new Promise(resolve => preview.onplaying = resolve);
  })
  // 表示が開始したらレコーディングを開始
  .then(() => startRecording(preview.captureStream(), recordingTimeMS))
  // レコーディングが終了時の処理
  .then (recordedChunks => {
    let recordedBlob = new Blob(recordedChunks, { type: "video/webm" });
    recording.src = URL.createObjectURL(recordedBlob);
    downloadButton.href = recording.src;
    downloadButton.download = "RecordedVideo.webm";
  })
  .catch((err) => console.log(err));
}, false);


function startRecording(stream, lengthInMS) {
  let recorder = new MediaRecorder(stream);
  let data = [];
 
  recorder.ondataavailable = event => data.push(event.data);
  recorder.start();
 
  let stopped = new Promise((resolve, reject) => {
    recorder.onstop = resolve;
    recorder.onerror = event => reject(event.name);
  });

  let recorded = new Promise((resolve, reject) => {
    setTimeout(() => {
      recorder.state == "recording" && recorder.stop()
      resolve();
    }, lengthInMS);
  });
 
  return Promise.all([
    stopped,
    recorded
  ])
  .then(() => data);
}

stopButton.addEventListener("click", function() {
  preview.srcObject.getTracks().forEach(track => track.stop());
},...