index.js

// 開始ボタンを押した時の処理
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);