console 命令行工具 X clear

console

let l = console.log;
const stopButton = document.getElementById('stop');
const startButton = document.getElementById('start');

navigator.mediaDevices.getUserMedia({
  audio: true,
  video: true
})
  .then(stream => {
  let liveVideo = document.getElementById('live');
  // liveVideo.src = URL.createObjectURL(stream); // 你会看到一些警告
  liveVideo.srcObject = stream;
  liveVideo.play()

  let mediaRecorder;
  stopButton.addEventListener('click', e => {
    mediaRecorder.stop();
  })

  startButton.addEventListener('click', e => {
    let recordedChunks = [];

    mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.start();

    mediaRecorder.addEventListener('dataavailable', function(e) {
      if (e.data.size > 0) recordedChunks.push(e.data);
    });

    mediaRecorder.addEventListener('stop', function() {
      l('暂停 自动下载') let downloadLink = document.createElement('a') downloadLink.href = URL.createObjectURL(new Blob(recordedChunks, {
        type: 'application/video'
      }));
      // downloadLink.download = 'live.webm';
      downloadLink.download = 'live.ogg';
      // downloadLink.download = 'live.mp4';
      downloadLink.click()
    });

    mediaRecorder.addEventListener('start', e => {
      l('开始 录制')
    })
  })
})
.catch(e => {
  l(e)
  alert('未检查到设备！')
})

<body style="margin-top: 20px;">
  <button id="start">
    Start
  </button>
  <button id="stop">
    Stop
  </button>
  <div>
    <p>
      live.
    </p>
    <video width="600" id="live" style="box-sizing: border-box; border: 4px solid #f48">
    </video>
  </div>
</body>

 a,
 button {
   border: 0;
   background-color: #448aff21;
   text-decoration: none;
   padding: 10px;
   border-radius: 2px;
   color: #448aff !important;
 }