当前位置：首页 > JavaScript

js怎么实现屏幕录制

2026-04-04 19:00:13JavaScript

使用MediaDevices API和MediaRecorder API实现屏幕录制

通过navigator.mediaDevices.getDisplayMedia获取屏幕流，结合MediaRecorder录制视频流。

// 请求屏幕共享权限
const stream = await navigator.mediaDevices.getDisplayMedia({
  video: { mediaSource: 'screen' },
  audio: true // 可选是否录制系统音频
});

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

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

// 录制结束处理
recorder.onstop = () => {
  const blob = new Blob(chunks, { type: 'video/webm' });
  const url = URL.createObjectURL(blob);
  // 生成下载链接
  const a = document.createElement('a');
  a.href = url;
  a.download = 'recording.webm';
  a.click();
};

// 开始录制
recorder.start();
// 停止录制
// recorder.stop();

添加录制控制功能

实现开始/暂停/继续/停止等控制逻辑，需注意不同状态的处理。

let isPaused = false;

function togglePause() {
  if (recorder.state === 'recording') {
    recorder.pause();
    isPaused = true;
  } else if (recorder.state === 'paused') {
    recorder.resume();
    isPaused = false;
  }
}

function stopRecording() {
  if (recorder.state !== 'inactive') {
    recorder.stop();
    stream.getTracks().forEach(track => track.stop());
  }
}

支持多种视频格式

通过检测支持的MIME类型选择最佳格式。

js怎么实现屏幕录制

function getSupportedMimeType() {
  const types = [
    'video/webm;codecs=vp9',
    'video/webm;codecs=vp8',
    'video/webm;codecs=h264',
    'video/mp4;codecs=h264'
  ];
  return types.find(type => MediaRecorder.isTypeSupported(type));
}

添加时间戳显示

记录并显示录制时长，增强用户体验。

let startTime;
const timerElement = document.getElementById('timer');

recorder.onstart = () => {
  startTime = Date.now();
  updateTimer();
};

function updateTimer() {
  if (recorder.state === 'recording') {
    const elapsed = Math.floor((Date.now() - startTime) / 1000);
    timerElement.textContent = 
      `${Math.floor(elapsed / 60)}:${('0' + elapsed % 60).slice(-2)}`;
    setTimeout(updateTimer, 1000);
  }
}