媒体录制，浏览器轻松搞定！MediaRecorder API大显神通

好的，这是我为您准备的文章：

现代浏览器拥有强大的功能，能够轻松录制音频和视频，这让开发者有了更多的创作空间。为了实现这一点，W3C制定了MediaRecorder API。

MediaRecorder API，是浏览器的新宠儿，它提供了浏览器级的多媒体录制能力。这个API，可以轻松录制音频和视频，并将其保存为文件。

MediaRecorder API主要包含以下方法和事件：

• start()：开始录制。
• stop()：停止录制。
• pause()：暂停录制。
• resume()：恢复录制。
• ondataavailable：录制过程中，每当有新数据可用时触发该事件。
• onstop：录制完成后触发该事件。

下面，我们通过两个demo来演示MediaRecorder API的使用方法。

1. 录制音频

navigator.mediaDevices.getUserMedia({audio: true})
  .then(stream => {
    const recorder = new MediaRecorder(stream);

    recorder.ondataavailable = (e) => {
      const audioChunks.push(e.data);
    };

    recorder.onstop = () => {
      const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
      const audioUrl = URL.createObjectURL(audioBlob);

      const audio = new Audio();
      audio.src = audioUrl;
      audio.play();
    };

    recorder.start();

    setTimeout(() => {
      recorder.stop();
    }, 5000);
  });

2. 录制视频

navigator.mediaDevices.getUserMedia({video: true})
  .then(stream => {
    const recorder = new MediaRecorder(stream);

    recorder.ondataavailable = (e) => {
      const videoChunks.push(e.data);
    };

    recorder.onstop = () => {
      const videoBlob = new Blob(videoChunks, { type: 'video/webm' });
      const videoUrl = URL.createObjectURL(videoBlob);

      const video = new Video();
      video.src = videoUrl;
      video.play();
    };

    recorder.start();

    setTimeout(() => {
      recorder.stop();
    }, 5000);
  });

MediaRecorder API非常强大，可以轻松录制音频和视频，并将其保存为文件。这对于音视频通话、在线直播等应用来说非常有用。随着MediaRecorder API的普及，我们将看到越来越多的浏览器应用使用它来实现多媒体录制功能。

最后，希望本文能够帮助您更好的理解和使用MediaRecorder API。