Being a creative developer on the web means you need to be patient. The web is the most incredible and accessible platform for creative programming but its evolution is subject to the adoption of new technology standards by the different browsers which display it. The people working on the HTML, JavaScript, CSS, and browser platforms are my heroes. Their work lays down the foundation of everything we do and, of course, that extends far beyond creative programming. Platforms which were once unwieldy have become more aligned and accessible everyday. Begin open, a day doesn’t go by where something has been studies, challenged, decommissioned, and introduced. I feel lucky to have aligned my own creativity with this outlet.

You might be thinking: “Lee, that’s a rather lofty introduction to the MediaRecorder API.” However, you have to understand, I have patiently waiting almost two decades for this functionality to become more widely adopted. Social technology revolves around recorded video and not having a good way to do that on the web has always been a big issue, in my opinion. I love all of the social web apps I have built in music but when user generated content was concerned, I leaned heavily towards static images. So, you can imagine my joy when the iOS 14.3 update enabled support for the MediaRecorder API by default in Safari. This closes the gap on most major modern browser support.

MediaRecorder API Example

So, now might be a good time to explain what the MediaRecorder API is and how it works. 😅 This API makes it possible to capture the data generated by a MediaStream or HTMLMediaElement object for analysis, processing, or saving to disk. And, as the MDN Web Docs say, “Its surprisingly easy to work with.” For this blog, I’d like to look at a basic example which records video from a user’s webcam and then allows them to both preview and download the recorded content.

You can check out the

let stream = await navigator.mediaDevices.getUserMedia({
  audio: true,
  video: true
})

We then create a blobs array which will hold our recorded data and initialize a MediaRecorder interface with the video stream. In addition, we’ll listen for available data and push them into the blobs array. Finally, when the recorder stops, we can construct a complete blob with all of our blob pieces, using the same mimeType that the recorder was using. This blob can then be previewed in an awaiting <video>tag or simply downloaded.

let blobs = []let mediaRecorder = new MediaRecorder(stream)mediaRecorder.ondataavailable = event => {
  if (event.data) {
    blobs.push(event.data)
  }
}mediaRecorder.onstop = () => {
  let blob = new Blob(blobs, {
    type: mediaRecorder.mimeType
  })
}

Now, when we’re ready to begin recording, we simply need to call the start() method and pass a timeslice which declares how many milliseconds of content will go into each recorded blob.

mediaRecorder.start(1000)

To stop recording, you guessed it, we simply call the stop() method.

mediaRecorder.stop()

In addition to recording from a <video> element, the MediaRecorder API will also allow us to capture from <audio> and <canvas> elements. I cannot stress the awesomeness of that statement and I look forward to seeing this interface more widely adopted on the web. Stay tuned for a more fleshed out use case of this video recording example soon.