从后端发送视频到前端然后用flask播放并做出反应

Question

将视频从 Flask 应用程序发送到前端并尝试从前端将 blob 设置为可播放的 URL 后，它似乎不接受 blob 作为视频源

@app.route('/summarize/<video_name>', methods=['GET'])
def get_video(video_name):
    return send_file(f"custom-video/{video_name}", mimetype='video/mp4')

const playVideo = async () => {
    axios
      .get(url, {
        headers: {
          "Content-Type": "video/mp4",
        },
        responseType: "blob",
      })
      .then((response) => {
        console.log(response);
        const videoURL = URL.createObjectURL(response.data);
        setVideoUrl(videoURL);
      });
  };

我已经尝试了很多次将视频文件发送到前端，但是 blob 似乎接收良好，但我无法在视频播放器中显示它

我尝试了不同的 mime 类型，也用不同的方式设置了 blob url，但它仍然无法在 chrome、firefox 和 Edge 上工作

Answer 1

The issue here is that the responseType is set to "blob" in the axios request, but the Content-Type header is set to "video/mp4". The Content-Type header should be set to "application/octet-stream" as we are dealing with a binary blob.

Here is the corrected code:

javascript
Edit
Full Screen
Copy code
const playVideo = async () => {
  axios
    .get(url, {
      headers: {
        "Content-Type": "application/octet-stream",
      },
      responseType: "blob",
    })
    .then((response) => {
      console.log(response);
      const videoURL = URL.createObjectURL(response.data);
      setVideoUrl(videoURL);
    });
};
Also, make sure that the url variable is set to the correct endpoint of your Flask app. If you are running the Flask app locally, it might look like this:

javascript
Edit
Full Screen
Copy code
const url = "http://localhost:5000/summarize/" + video_name;
Make sure to replace "video_name" with the actual name of the video file you want to play.

Finally, ensure that the setVideoUrl function is defined and can update the state of your component. Here is an example of how you might define it using the useState hook from React:

javascript
Edit`enter code here`
Full Screen
Copy code
import React, { useState } f`enter code here`rom "react";

const VideoPlayer = () => {
  const [videoUrl, setVideoUrl] = useState("");

  const playVideo = async () => {
    axios
      .get(url, {
        headers: {
          "Content-Type": "application/octet-stream",
        },
        responseType: "blob",
      })
      .then((response) => {
        console.log(response);
        const videoURL = URL.createObjectURL(response.data);
        setVideoUrl(videoURL);
      });
  };

  return (
    <div>
      <button onClick={playVideo}>Play Video</button>
      {videoUrl && (
        <video width="320" height="240" controls>
          <source src={videoUrl} type="video/mp4" />
          Your browser does not support the video tag.
        </video>
      )}
    </div>
  );
};

export default VideoPlayer;
In this example, the VideoPlayer component uses the useState hook to manage the state of the videoUrl. When the playVideo function is called, it fetches the video from the Flask app and sets the videoUrl state to the URL of the video blob. The video is then rendered in a <video> element with the controls attribute, allowing the user to play and control the video.