# MediaStream Recording API 🔴

aka Media Recording API 🎦

TIP

The MediaStream Recording API makes it possible to capture the data (audio & video) generated by a MediaStream or HTMLMediaElement object for analysis, processing or saving to disk.

# Examples

# Demo #1

Audio record

Code

navigator.mediaDevices.getUserMedia({ audio: true })
  .then((stream) => {
    this.mediaRecorder = new MediaRecorder(stream)

    this.mediaRecorder.ondataavailable = (e) => {
      this.chunks.push(e.data)
    }

    this.mediaRecorder.onstop = ({currentTarget}) => {
      const blob = new Blob(this.chunks, { 'type': currentTarget.mimeType })
      this.chunks = []
      this.audioSrc = window.URL.createObjectURL(blob)
    }
  })
  .catch((err) => {
    // Handle error
  })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# Demo #2

Video (and audio) record

Code

navigator.mediaDevices.getUserMedia({ audio: true, video: true })
  .then((stream) => {
    this.mediaRecorder = new MediaRecorder(stream)

    this.mediaRecorder.ondataavailable = (e) => {
      this.chunks.push(e.data)
    }

    this.mediaRecorder.onstop = ({currentTarget}) => {
      const blob = new Blob(this.chunks, { 'type': currentTarget.mimeType })
      this.chunks = []
      this.videoSrc = window.URL.createObjectURL(blob)
    }
  })
  .catch((err) => {
    // Handle error
  })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17