Question

我正在制作一个反应应用程序，可以使用网络摄像头拍摄视频素材，然后将视频文件上传到S3中。现在，我有一个下载按钮，可以从前端下载视频并将其保存在本地。然后，后端将在本地系统中找到视频并将其上传到S3。我想将下载按钮替换为上传按钮，以便可以将视频直接上传到S3，而无需在本地下载。

我一直在互联网上搜索有关如何在不使用前端输入字段的情况下将文件上传到S3的方法，但是我找不到任何内容。我可以使用任何依赖项或软件包来解决此问题吗？

前端：

import React from "react";
import ReactDOM from "react-dom";
import Webcam from "react-webcam";

const WebcamStreamCapture = () => {

const webcamRef = React.useRef(null);
const mediaRecorderRef = React.useRef(null);
const [capturing, setCapturing] = React.useState(false);
const [recordedChunks, setRecordedChunks] = React.useState([]);

const handleStartCaptureClick = React.useCallback(() => {
  setCapturing(true);
  mediaRecorderRef.current = new MediaRecorder(webcamRef.current.stream, {
    mimeType: "video/webm"
  });
  mediaRecorderRef.current.addEventListener(
    "dataavailable",
    handleDataAvailable
  );
  mediaRecorderRef.current.start();
}, [webcamRef, setCapturing, mediaRecorderRef]);

const handleDataAvailable = React.useCallback(
  ({ data }) => {
    if (data.size > 0) {
      setRecordedChunks((prev) => prev.concat(data));
    }
  },
  [setRecordedChunks]
);

const handleStopCaptureClick = React.useCallback(() => {
  mediaRecorderRef.current.stop();
  setCapturing(false);
}, [mediaRecorderRef, webcamRef, setCapturing]);

const handleDownload = React.useCallback(() => {
  if (recordedChunks.length) {
    const blob = new Blob(recordedChunks, {
      type: "video/webm"
    });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    a.href = url;
    a.download = "react-webcam-stream-capture.webm";
    a.click();
    window.URL.revokeObjectURL(url);
    setRecordedChunks([]);
  }
}, [recordedChunks]);

return (
  <>
    <Webcam  
    audio={false} ref={webcamRef} />
    {capturing ? (
      <button onClick={handleStopCaptureClick}>Stop Capture</button>
    ) : (
      <button onClick={handleStartCaptureClick}>Start Capture</button>
    )}
    {recordedChunks.length > 0 && (
      <button onClick={handleDownload}>Download</button>
    )}
  </>
);
};

   ReactDOM.render(<WebcamStreamCapture />, document.getElementById("root"));

后端：

const fs = require('fs');
const AWS = require('aws-sdk');

// Enter copied or downloaded access ID and secret key here
const ID = '';
const SECRET = '';

// The name of the bucket that you have created
const BUCKET_NAME = '';

const s3 = new AWS.S3({
    accessKeyId: ID,
    secretAccessKey: SECRET
});

const uploadFile = (fileName) => {
    // Read content from the file
    const fileContent = fs.readFileSync(fileName);

    // Setting up S3 upload parameters
    const params = {
        Bucket: BUCKET_NAME,
        Key: 'footage.webm', // File name you want to save as in S3
        Body: fileContent
    };

    // Uploading files to the bucket
    s3.upload(params, function(err, data) {
        if (err) {
            throw err;
        }
        console.log(`File uploaded successfully. ${data.Location}`);
    });
};

uploadFile('react-webcam-stream-capture.webm'); // the file name in the parameter needs to exist inside the local machine.

您可以运行'npm start'来运行前端，而'node'来运行后端。

Answer 1

您可以generate a presigned URL并使用该URL通过HTTP请求在前端上传文件。

这样，您可以：

向后端发出请求，以在前端获取预先签名的URL
在前端使用后端提供的URL进行PUT HTTP请求，以上传文件

如何在没有输入字段的情况下将视频文件上传到S3？

1 个答案: