当前位置：首页 > React

react实现录制视频上传

2026-01-27 13:52:56React

实现视频录制与上传的基本流程

使用React实现视频录制并上传需要结合浏览器提供的媒体API和HTTP上传功能。以下是关键步骤：

获取用户摄像头权限

使用navigator.mediaDevices.getUserMedia获取摄像头访问权限：

react实现录制视频上传

const constraints = { video: true, audio: true };
const stream = await navigator.mediaDevices.getUserMedia(constraints);

创建视频录制组件

使用MediaRecorder API进行录制：

react实现录制视频上传

const mediaRecorder = new MediaRecorder(stream);
const chunks = [];

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

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

控制录制过程

添加开始/停止录制控制：

const startRecording = () => {
  mediaRecorder.start();
  setIsRecording(true);
};

const stopRecording = () => {
  mediaRecorder.stop();
  setIsRecording(false);
};

上传视频文件

使用FormData和fetch上传视频：

const uploadVideo = async () => {
  const formData = new FormData();
  formData.append('video', blob, 'recording.webm');

  try {
    const response = await fetch('/api/upload', {
      method: 'POST',
      body: formData
    });
    // 处理响应
  } catch (error) {
    // 错误处理
  }
};

完整组件示例

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

function VideoRecorder() {
  const [isRecording, setIsRecording] = useState(false);
  const [recordedVideo, setRecordedVideo] = useState(null);
  const videoRef = useRef();
  const mediaRecorderRef = useRef();
  const streamRef = useRef();
  const chunksRef = useRef([]);

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

      const mediaRecorder = new MediaRecorder(stream);
      mediaRecorderRef.current = mediaRecorder;
      chunksRef.current = [];

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

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

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

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

  const uploadVideo = async () => {
    const blob = new Blob(chunksRef.current, { type: 'video/webm' });
    const formData = new FormData();
    formData.append('video', blob, 'recording.webm');

    try {
      const response = await fetch('/api/upload', {
        method: 'POST',
        body: formData
      });
      console.log('Upload successful:', response);
    } catch (error) {
      console.error('Upload failed:', error);
    }
  };

  return (
    <div>
      <video ref={videoRef} autoPlay muted />
      {!isRecording ? (
        <button onClick={startRecording}>Start Recording</button>
      ) : (
        <button onClick={stopRecording}>Stop Recording</button>
      )}
      {recordedVideo && (
        <>
          <video src={recordedVideo} controls />
          <button onClick={uploadVideo}>Upload Video</button>
        </>
      )}
    </div>
  );
}

export default VideoRecorder;