在浏览器中捕获和保存媒体：MediaRecorder API 介绍

前端

2023-10-14 15:58:04

用 MediaRecorder API 掌控媒体流捕获

在当今互联网时代，我们经常需要从用户设备中获取媒体流。无论是视频聊天的网络摄像头，还是播客的麦克风，都需要捕获和处理这些流。传统做法是将这些流发送到服务器进行处理，但这会增加延迟和复杂性。

MediaRecorder API 的出现

随着 MediaRecorder API 的诞生，我们在浏览器中直接记录和保存用户媒体成为可能。这意味着我们可以创建更加流畅、更具响应性的媒体应用程序，同时减轻服务器端的负担。

深入了解 MediaRecorder API

MediaRecorder API 提供了一个简单易用的界面，用于在浏览器中录制音频和视频。它支持多种功能，包括：

指定媒体流类型（音频、视频或两者兼有）
设置质量参数
指定输出文件格式

创建简单的 MediaRecorder 应用程序

为了更好地理解 MediaRecorder API 的用法，我们创建一个简单的视频捕获应用程序：

<!-- HTML -->
<video id="video"></video>
<button id="start">开始录制</button>
<button id="stop">停止录制</button>

<!-- CSS -->
#video {
  width: 320px;
  height: 240px;
}

<!-- JavaScript -->
const video = document.getElementById('video');
const startButton = document.getElementById('start');
const stopButton = document.getElementById('stop');

let mediaRecorder;

startButton.addEventListener('click', () => {
  navigator.mediaDevices.getUserMedia({ video: true })
    .then(stream => {
      video.srcObject = stream;
      mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
      mediaRecorder.start();
    });
});

stopButton.addEventListener('click', () => {
  mediaRecorder.stop();
});