Запись/Сохранение видео с веб-камеры

const videoElement = document.querySelector('video'); 
const audioSelect = document.querySelector('select#audioSource'); 
const videoSelect = document.querySelector('select#videoSource'); 
 
navigator.mediaDevices.enumerateDevices() 
  .then(gotDevices).then(getStream).catch(handleError); 
 
audioSelect.onchange = getStream; 
videoSelect.onchange = getStream; 
 
function gotDevices(deviceInfos) { 
  for (let i = 0; i !== deviceInfos.length; ++i) { 
    const deviceInfo = deviceInfos[i]; 
    const option = document.createElement('option'); 
    option.value = deviceInfo.deviceId; 
    if (deviceInfo.kind === 'audioinput') { 
      option.text = deviceInfo.label || 
        'microphone ' + (audioSelect.length + 1); 
      audioSelect.appendChild(option); 
    } else if (deviceInfo.kind === 'videoinput') { 
      option.text = deviceInfo.label || 'camera ' + 
        (videoSelect.length + 1); 
      videoSelect.appendChild(option); 
    } else { 
      console.log('Found another kind of device: ', deviceInfo); 
    } 
  } 
} 
 
function getStream() { 
  if (window.stream) { 
    window.stream.getTracks().forEach(function(track) { 
      track.stop(); 
    }); 
  } 
 
  const constraints = { 
    audio: { 
      deviceId: { 
        exact: audioSelect.value 
      } 
    }, 
    video: { 
      deviceId: { 
        exact: videoSelect.value 
      } 
    } 
  }; 
 
  navigator.mediaDevices.getUserMedia(constraints). 
  then(gotStream).catch(handleError); 
} 
 
function gotStream(stream) { 
  window.stream = stream; // make stream available to console 
  videoElement.srcObject = stream; 
} 
 
function handleError(error) { 
  console.error('Error: ', error); 
}

<div class="select"> 
  <label for="audioSource">Audio source: </label> 
  <select id="audioSource"></select> 
</div> 
 
<div class="select"> 
  <label for="videoSource">Video source: </label> 
  <select id="videoSource"></select> 
</div> 
 
<video muted="" autoplay=""></video>

var video, reqBtn, startBtn, stopBtn, ul, stream, recorder; 
video = document.getElementById('video'); 
reqBtn = document.getElementById('request'); 
startBtn = document.getElementById('start'); 
stopBtn = document.getElementById('stop'); 
ul = document.getElementById('ul'); 
reqBtn.onclick = requestVideo; 
startBtn.onclick = startRecording; 
stopBtn.onclick = stopRecording; 
startBtn.disabled = true; 
ul.style.display = 'none'; 
stopBtn.disabled = true; 
 
function requestVideo() { 
  navigator.mediaDevices.getUserMedia({ 
      video: true, 
      audio: true 
    }) 
    .then(stm => { 
      stream = stm; 
      reqBtn.style.display = 'none'; 
      startBtn.removeAttribute('disabled'); 
      video.src = URL.createObjectURL(stream); 
    }).catch(e => console.error(e)); 
} 
 
function startRecording() { 
  recorder = new MediaRecorder(stream, { 
    mimeType: 'video/webm; codecs="opus,vp8"' 
  }); 
  recorder.start(); 
  stopBtn.removeAttribute('disabled'); 
  startBtn.disabled = true; 
} 
 
 
function stopRecording() { 
  recorder.ondataavailable = e => { 
    ul.style.display = 'block'; 
    var a = document.createElement('a'), 
      li = document.createElement('li'); 
    a.download = ['video_', (new Date() + '').slice(4, 28), '.webm'].join(''); 
    a.href = URL.createObjectURL(e.data); 
    a.textContent = a.download; 
    li.appendChild(a); 
    ul.appendChild(li); 
  }; 
  recorder.stop(); 
  startBtn.removeAttribute('disabled'); 
  stopBtn.disabled = true; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div> 
 
  <button id='request'> 
    Request Camera 
  </button> 
  <button id='start'> 
    Start Recording 
  </button> 
  <button id='stop'> 
    Stop Recording 
  </button> 
  <ul id='ul'> 
    Downloads List: 
  </ul> 
 
</div> 
<video id='video' autoplay></video>