当前位置：首页 > React

前端react实现视频录制

2026-01-27 19:20:35React

使用React实现视频录制

在React中实现视频录制功能可以通过浏览器的MediaDevices API和MediaRecorder API来完成。以下是具体的实现步骤：

获取用户摄像头和麦克风权限

使用navigator.mediaDevices.getUserMedia方法请求用户授权访问摄像头和麦克风。该方法返回一个Promise，解析后得到一个MediaStream对象。

const startRecording = async () => {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      audio: true,
      video: true,
    });
    setMediaStream(stream);
  } catch (error) {
    console.error('Error accessing media devices:', error);
  }
};

初始化MediaRecorder

在获取到MediaStream后，可以初始化MediaRecorder对象。MediaRecorder用于录制视频和音频数据。

const recorder = new MediaRecorder(mediaStream, {
  mimeType: 'video/webm',
});

处理录制数据

通过监听MediaRecorder的dataavailable事件来获取录制的数据块。这些数据块可以存储在数组中，最终合并为一个完整的视频文件。

const chunks = [];
recorder.ondataavailable = (event) => {
  chunks.push(event.data);
};

开始和停止录制

调用MediaRecorder的start方法开始录制，调用stop方法停止录制。停止录制后，可以通过Blob对象生成视频文件。

recorder.start();
// 停止录制
recorder.stop();
recorder.onstop = () => {
  const blob = new Blob(chunks, { type: 'video/webm' });
  const videoUrl = URL.createObjectURL(blob);
  setRecordedVideo(videoUrl);
};

显示录制视频

使用<video>元素显示实时摄像头画面和录制后的视频。

<video
  ref={videoRef}
  autoPlay
  muted
  style={{ width: '100%', height: 'auto' }}
/>
<video
  src={recordedVideo}
  controls
  style={{ width: '100%', height: 'auto' }}
/>

完整代码示例

以下是一个完整的React组件示例，实现了视频录制功能：

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

const VideoRecorder = () => {
  const [mediaStream, setMediaStream] = useState(null);
  const [recorder, setRecorder] = useState(null);
  const [recordedVideo, setRecordedVideo] = useState(null);
  const [isRecording, setIsRecording] = useState(false);
  const videoRef = useRef(null);
  const chunks = useRef([]);

  const startRecording = async () => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({
        audio: true,
        video: true,
      });
      setMediaStream(stream);
      if (videoRef.current) {
        videoRef.current.srcObject = stream;
      }

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

      mediaRecorder.ondataavailable = (event) => {
        if (event.data.size > 0) {
          chunks.current.push(event.data);
        }
      };

      mediaRecorder.onstop = () => {
        const blob = new Blob(chunks.current, { type: 'video/webm' });
        const videoUrl = URL.createObjectURL(blob);
        setRecordedVideo(videoUrl);
        chunks.current = [];
      };

      mediaRecorder.start();
      setIsRecording(true);
    } catch (error) {
      console.error('Error accessing media devices:', error);
    }
  };

  const stopRecording = () => {
    if (recorder && isRecording) {
      recorder.stop();
      setIsRecording(false);
      if (mediaStream) {
        mediaStream.getTracks().forEach((track) => track.stop());
      }
    }
  };

  return (
    <div>
      <video
        ref={videoRef}
        autoPlay
        muted
        style={{ width: '100%', height: 'auto' }}
      />
      {!isRecording ? (
        <button onClick={startRecording}>Start Recording</button>
      ) : (
        <button onClick={stopRecording}>Stop Recording</button>
      )}
      {recordedVideo && (
        <video
          src={recordedVideo}
          controls
          style={{ width: '100%', height: 'auto' }}
        />
      )}
    </div>
  );
};

export default VideoRecorder;