Record a video with the web cam and upload it to the server

upload-recording.js

const video = document.querySelector('video')
const start = document.querySelector('.start')
const stop = document.querySelector('.stop')
const upload = document.querySelector('.upload')

const initRecorder = stream => {
  const recorder = new MediaRecorder(stream)
  let blob

  video.srcObject = stream
  start.removeAttribute('disabled')

  video.addEventListener('loadedmetadata', () => {
    video.play()
  })

  recorder.addEventListener('dataavailable', ({ data }) => {
    video.srcObject = null
    video.src = URL.createObjectURL(data)

    // Create a blob from the data for upload
    blob = new Blob([data], { type: 'video/webm' })
  })

  start.addEventListener('click', () => {
    stop.removeAttribute('disabled')
    recorder.start()
  })

  stop.addEventListener('click', () => {
    upload.removeAttribute('disabled')
    recorder.stop()
  })

  // Upload the video blob as form data
  upload.addEventListener('click', () => {
    const body = new FormData()

    body.append('myvideo', blob)

    fetch('upload.php', { method: 'POST', body })
      .then(() => console.log('Success!'))
      .catch(console.error)
  })
}

navigator
  .mediaDevices
  .getUserMedia({ video: true })
  .then(initRecorder)
  .catch(console.error)