当前位置：首页 > JavaScript

js实现录像

2026-04-05 21:37:23JavaScript

使用MediaRecorder API实现录像

MediaRecorder是浏览器提供的API，可以直接录制摄像头或屏幕的媒体流。需要先获取用户设备的视频流权限。

// 获取视频流
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => {
    const videoElement = document.createElement('video');
    videoElement.srcObject = stream;
    videoElement.play();

    // 创建MediaRecorder实例
    const recorder = new MediaRecorder(stream, {
      mimeType: 'video/webm'
    });

    // 收集数据块
    const chunks = [];
    recorder.ondataavailable = e => chunks.push(e.data);

    // 录制完成处理
    recorder.onstop = () => {
      const blob = new Blob(chunks, { type: 'video/webm' });
      const videoUrl = URL.createObjectURL(blob);
      // 可下载或播放录像
      const a = document.createElement('a');
      a.href = videoUrl;
      a.download = 'recording.webm';
      a.click();
    };

    // 开始/停止控制
    recorder.start();
    setTimeout(() => recorder.stop(), 5000); // 录制5秒
  });

使用Canvas录制屏幕

对于需要录制屏幕内容或动画的场景，可以通过Canvas捕获帧并编码为视频。

const canvas = document.getElementById('myCanvas');
const stream = canvas.captureStream(30); // 30fps
const recorder = new MediaRecorder(stream);

// 后续处理与摄像头录制相同
recorder.start();
setTimeout(() => recorder.stop(), 3000);

使用第三方库简化流程

库如RecordRTC提供了更简单的接口和额外功能：

const recorder = RecordRTC(canvas, {
  type: 'video',
  mimeType: 'video/webm'
});

recorder.startRecording();
setTimeout(() => {
  recorder.stopRecording(() => {
    const blob = recorder.getBlob();
    // 处理录像文件
  });
}, 5000);