零基础 | 前端实现音视频录制功能，原来这么简单！

2023-09-19 06:33:31

用MediaRecorder和Canvas API在浏览器中轻松实现音视频录制

一、MediaRecorder API：获取音视频设备访问权限

要录制音视频，我们需要获取用户的设备访问权限。MediaRecorder API的getUserMedia()方法可以让我们访问摄像头和麦克风。

navigator.mediaDevices.getUserMedia({
  audio: true,
  video: true
})
.then(stream => {
  // 成功获取设备访问权限，可以开始录制了
})
.catch(error => {
  // 获取设备访问权限失败，需要处理错误
});

二、创建MediaRecorder实例并开始录制

获取设备权限后，创建一个MediaRecorder实例并调用start()方法开始录制。

const recorder = new MediaRecorder(stream);
recorder.start();

三、Canvas API：实时显示录屏结果

为了实时显示录屏结果，可以使用Canvas API。通过requestAnimationFrame()方法，每帧都会被绘制到画布上。

function drawFrame() {
  const frame = recorder.getVideoFrame();
  context.drawImage(frame, 0, 0);
  requestAnimationFrame(drawFrame);
}
requestAnimationFrame(drawFrame);

四、停止录制并保存音视频文件

录制完成后，调用stop()方法停止录制。然后，通过ondataavailable事件监听器获取录制数据并将其保存为文件。

recorder.stop();
recorder.ondataavailable = (e) => {
  // 将录制的数据保存为文件
};

五、代码示例

// 获取设备访问权限
navigator.mediaDevices.getUserMedia({
  audio: true,
  video: true
})
.then(stream => {

  // 创建MediaRecorder实例
  const recorder = new MediaRecorder(stream);

  // 实时显示录屏结果
  const canvas = document.getElementById('canvas');
  const context = canvas.getContext('2d');
  function drawFrame() {
    const frame = recorder.getVideoFrame();
    context.drawImage(frame, 0, 0);
    requestAnimationFrame(drawFrame);
  }
  requestAnimationFrame(drawFrame);

  // 开始录制
  recorder.start();

  // 停止录制并保存音视频文件
  setTimeout(() => {
    recorder.stop();
  }, 5000); // 录制 5 秒钟

  recorder.ondataavailable = (e) => {
    // 将录制的数据保存为文件
    const blob = new Blob([e.data], { type: 'video/webm' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'recording.webm';
    a.click();
  };
})
.catch(error => {
  // 处理错误
});