当前位置：首页 > JavaScript

js怎么实现屏幕录制

2026-01-31 03:04:55JavaScript

使用MediaDevices和MediaRecorder API

在JavaScript中，可以通过navigator.mediaDevices.getDisplayMedia获取屏幕内容，再结合MediaRecorder录制视频流。

js怎么实现屏幕录制

async function startRecording() {
  const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
  const recorder = new MediaRecorder(stream);
  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();
}

添加音频轨道

若需同时录制麦克风音频，需合并屏幕和音频流：

js怎么实现屏幕录制

async function recordWithAudio() {
  const screenStream = await navigator.mediaDevices.getDisplayMedia({ video: true });
  const audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
  const combinedStream = new MediaStream([
    ...screenStream.getVideoTracks(),
    ...audioStream.getAudioTracks()
  ]);

  const recorder = new MediaRecorder(combinedStream);
  // 其余逻辑同上
}

处理权限和兼容性

屏幕录制需用户明确授权，且仅在HTTPS或localhost环境下可用。检测兼容性：

if (!navigator.mediaDevices || !navigator.mediaDevices.getDisplayMedia) {
  console.error('Screen recording not supported');
}

使用第三方库简化流程

库如recordRTC可简化复杂操作：

import RecordRTC from 'recordrtc';

const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
const recorder = new RecordRTC(stream, { type: 'video' });
recorder.startRecording();

// 停止录制
recorder.stopRecording(() => {
  const blob = recorder.getBlob();
  // 处理blob
});