当前位置：首页 > React

react实现录屏

2026-01-26 23:37:57React

React 实现录屏功能

录屏功能可以通过浏览器提供的 MediaDevices API 和 MediaRecorder API 实现。以下是具体实现方法：

获取屏幕共享权限

使用 navigator.mediaDevices.getDisplayMedia 获取屏幕共享的媒体流。需要用户授权才能访问屏幕内容。

const startScreenCapture = async () => {
  try {
    const stream = await navigator.mediaDevices.getDisplayMedia({
      video: {
        mediaSource: 'screen',
      },
      audio: true, // 可选，是否录制音频
    });
    return stream;
  } catch (error) {
    console.error('Error accessing screen:', error);
  }
};

创建 MediaRecorder 实例

获取媒体流后，使用 MediaRecorder 录制视频。需要指定 MIME 类型（如 video/webm）。

const startRecording = (stream) => {
  const mediaRecorder = new MediaRecorder(stream, {
    mimeType: 'video/webm',
  });

  const recordedChunks = [];
  mediaRecorder.ondataavailable = (event) => {
    if (event.data.size > 0) {
      recordedChunks.push(event.data);
    }
  };

  mediaRecorder.onstop = () => {
    const blob = new Blob(recordedChunks, { type: 'video/webm' });
    const url = URL.createObjectURL(blob);
    // 提供下载或预览
    const a = document.createElement('a');
    a.href = url;
    a.download = 'recording.webm';
    a.click();
  };

  mediaRecorder.start();
  return mediaRecorder;
};

集成到 React 组件

将逻辑封装到 React 组件中，管理录屏状态（开始、停止）。

react实现录屏

import React, { useState, useRef } from 'react';

const ScreenRecorder = () => {
  const [isRecording, setIsRecording] = useState(false);
  const mediaRecorderRef = useRef(null);
  const streamRef = useRef(null);

  const handleStartRecording = async () => {
    const stream = await startScreenCapture();
    if (stream) {
      streamRef.current = stream;
      mediaRecorderRef.current = startRecording(stream);
      setIsRecording(true);
    }
  };

  const handleStopRecording = () => {
    if (mediaRecorderRef.current) {
      mediaRecorderRef.current.stop();
      streamRef.current.getTracks().forEach(track => track.stop());
      setIsRecording(false);
    }
  };

  return (
    <div>
      <button onClick={handleStartRecording} disabled={isRecording}>
        开始录屏
      </button>
      <button onClick={handleStopRecording} disabled={!isRecording}>
        停止录屏
      </button>
    </div>
  );
};

export default ScreenRecorder;

注意事项

浏览器兼容性：getDisplayMedia 和 MediaRecorder 在 Chrome、Edge 和 Firefox 中支持较好，但 Safari 支持有限。
MIME 类型：根据浏览器支持情况选择 video/webm 或 video/mp4。
音频录制：如需录制系统音频，需浏览器支持 audio 选项（部分浏览器需扩展程序）。
权限提示：用户需明确授权才能开始录屏。