javascript - Error MEDIA_ERR_SRC_NOT_SUPPORTED when decoding Base64 text into a file - Stack Overflow

admin管理员组

文章数量:1199542

I am currently trying to create a web app using Vue.js in the Front-End and a Flask server on the Back-End to process videos.

The idea is that I upload a video from the Vue client-side code send a POST request for the Flask server, which will process the video (converting from any format to .mp4 and running a ML model) and return a JSON containing all the necessary information. The problem is that when I try to decode my video into a URL, I get a video.js error:

The crazy part is also that a jpg image that comes in THE SAME JSON can be decoded perfectly.

Here's the VUE code make a POST for the video:

    async handleFileUpload($evt) {
      const file = $evt.target.files[0];

      if (file) {
        // VIDEO REQUEST
        const urlServer = "http://localhost:5000/analysis";
        const formData = new FormData();
        formData.append("file", file); // 'file' is the key used for the file on the server

        (async () => {
          try {
            const result = await axios.post(urlServer, formData, {
              headers: { "Content-Type": "multipart/form-data" },
            });
            console.log(`RESULT`, result);
            const resultJSON = result.data;
            const strResult = resultJSON.string;
            const grafico_base64 = resultJSON.grafico;
            let video_base64 = resultJSON.video;
            console.log("RECEIVED VIDEO: ", video_base64, typeof video_base64);
            const extension = resultJSON.extVideo;

            const mimeVar = mime.lookup(extension);

            await db.open();
            const videoData = {
              string: strResult,
              video: video_base64,
              grafico: grafico_base64,
              mimeVideo: mimeVar,
            };
            console.log(videoData);
            let constId = await db.add(videoData);
            console.log(constId + " " + typeof constId);

            alert(constId);
            console.log("VIDEO PROCESSADO");
            this.$router.push({
              name: "analiseVideo",
              query: { idVideoAnalise: constId },
            });
          } catch (error) {
            console.error(error + "An error occurred while uploading the file.");
          }
        })();
      }
    },

And the Vue code for decoding the video:

<script>
import db from "../db.js";
import videojs from "video.js";
import "video.js/dist/video-js.css";
import { Buffer } from "node:buffer";


export default {
  name: "Player_de_Video",
  components: {},
  data() {
    return {
      videoSource: "",
    };
  },
  async mounted() {
    console.log("MOUNTED VIDEOPLAYER:");
    const res = await this.pegarVideo();
    this.videoSource = res.videoURL;

    const mimeVideo = res.mime;
    this.graficoURL = res.graficoURL;
    this.$refs.imgGraf.src = this.graficoURL;
    this.strResult = res.strResult;

    const sources = [{ src: this.videoSource, type: `${mimeVideo}` }];
    this.setupPlayer(sources);
  },

  methods: {
    setupPlayer(sources) {
      //Initial videoplayer setup using data from VideoPlayer.vue
      this.player = videojs(this.$refs.videoplayer, {
        sources: sources,
      });
    },

    onVoltar() {
      this.$router.push("/");
    },
    async pegarVideo() {
      try {
        

        const resultData = {
              string: strResult,
              video: video_base64,
              grafico: grafico_base64,
              mimeVideo: mimeVar,
            };
        const mime = resultData.mimeVideo;

        const videoURL = this.base64ToURL(resultData.video, mime, "video.mp4");
        console.log(`VIDEO URL: ${videoURL}`);
        const graficoURL = this.base64ToURL(resultData.grafico, "image/jpg");
        const strResult = resultData.string;

        return { strResult, graficoURL, mime, videoURL };
      } catch (error) {
        console.error("ERROR! " + error);
      }
    },
    base64ToURL(base64String, mimeType) {
      // Decode the Base64 string
      try {
        const binaryString = Buffer.from(base64String, "base64").toString("binary");
        console.log("base64 STRING: ", base64String);
        const len = binaryString.length;
        const bytes = new Uint8Array(len);
        for (let i = 0; i < len; i++) {
          bytes[i] = binaryString.charCodeAt(i);
        }
        const blob = new Blob([bytes], { type: String(mimeType) }); // Adjust the MIME type as needed
        
        // Generate a URL for the Blob and set it as the video source
        const url = URL.createObjectURL(blob);
        return url;
      } catch (error) {
        console.error("Error decoding Base64 string:", error);
        return null;
      }
    },

Anyways, thanks for taking the time to read this! Any help is welcome.

I am currently trying to create a web app using Vue.js in the Front-End and a Flask server on the Back-End to process videos.

The idea is that I upload a video from the Vue client-side code send a POST request for the Flask server, which will process the video (converting from any format to .mp4 and running a ML model) and return a JSON containing all the necessary information. The problem is that when I try to decode my video into a URL, I get a video.js error:

The crazy part is also that a jpg image that comes in THE SAME JSON can be decoded perfectly.

Here's the VUE code make a POST for the video:

    async handleFileUpload($evt) {
      const file = $evt.target.files[0];

      if (file) {
        // VIDEO REQUEST
        const urlServer = "http://localhost:5000/analysis";
        const formData = new FormData();
        formData.append("file", file); // 'file' is the key used for the file on the server

        (async () => {
          try {
            const result = await axios.post(urlServer, formData, {
              headers: { "Content-Type": "multipart/form-data" },
            });
            console.log(`RESULT`, result);
            const resultJSON = result.data;
            const strResult = resultJSON.string;
            const grafico_base64 = resultJSON.grafico;
            let video_base64 = resultJSON.video;
            console.log("RECEIVED VIDEO: ", video_base64, typeof video_base64);
            const extension = resultJSON.extVideo;

            const mimeVar = mime.lookup(extension);

            await db.open();
            const videoData = {
              string: strResult,
              video: video_base64,
              grafico: grafico_base64,
              mimeVideo: mimeVar,
            };
            console.log(videoData);
            let constId = await db.add(videoData);
            console.log(constId + " " + typeof constId);

            alert(constId);
            console.log("VIDEO PROCESSADO");
            this.$router.push({
              name: "analiseVideo",
              query: { idVideoAnalise: constId },
            });
          } catch (error) {
            console.error(error + "An error occurred while uploading the file.");
          }
        })();
      }
    },

And the Vue code for decoding the video:

<script>
import db from "../db.js";
import videojs from "video.js";
import "video.js/dist/video-js.css";
import { Buffer } from "node:buffer";


export default {
  name: "Player_de_Video",
  components: {},
  data() {
    return {
      videoSource: "",
    };
  },
  async mounted() {
    console.log("MOUNTED VIDEOPLAYER:");
    const res = await this.pegarVideo();
    this.videoSource = res.videoURL;

    const mimeVideo = res.mime;
    this.graficoURL = res.graficoURL;
    this.$refs.imgGraf.src = this.graficoURL;
    this.strResult = res.strResult;

    const sources = [{ src: this.videoSource, type: `${mimeVideo}` }];
    this.setupPlayer(sources);
  },

  methods: {
    setupPlayer(sources) {
      //Initial videoplayer setup using data from VideoPlayer.vue
      this.player = videojs(this.$refs.videoplayer, {
        sources: sources,
      });
    },

    onVoltar() {
      this.$router.push("/");
    },
    async pegarVideo() {
      try {
        

        const resultData = {
              string: strResult,
              video: video_base64,
              grafico: grafico_base64,
              mimeVideo: mimeVar,
            };
        const mime = resultData.mimeVideo;

        const videoURL = this.base64ToURL(resultData.video, mime, "video.mp4");
        console.log(`VIDEO URL: ${videoURL}`);
        const graficoURL = this.base64ToURL(resultData.grafico, "image/jpg");
        const strResult = resultData.string;

        return { strResult, graficoURL, mime, videoURL };
      } catch (error) {
        console.error("ERROR! " + error);
      }
    },
    base64ToURL(base64String, mimeType) {
      // Decode the Base64 string
      try {
        const binaryString = Buffer.from(base64String, "base64").toString("binary");
        console.log("base64 STRING: ", base64String);
        const len = binaryString.length;
        const bytes = new Uint8Array(len);
        for (let i = 0; i < len; i++) {
          bytes[i] = binaryString.charCodeAt(i);
        }
        const blob = new Blob([bytes], { type: String(mimeType) }); // Adjust the MIME type as needed
        
        // Generate a URL for the Blob and set it as the video source
        const url = URL.createObjectURL(blob);
        return url;
      } catch (error) {
        console.error("Error decoding Base64 string:", error);
        return null;
      }
    },

Anyways, thanks for taking the time to read this! Any help is welcome.

• javascript
• vue.js
• flask
• base64
• video.js

Share Improve this question Follow edited Jan 22 at 18:43 yoduh 14.6k22 gold badges2020 silver badges3434 bronze badges asked Jan 22 at 14:05 Luís Felipe Araujo de OliveiraLuís Felipe Araujo de Oliveira 1133 bronze badges 6

• That's a lot of code. Can you narrow it down to a minimal reproducible example? – Mureinik Commented Jan 22 at 14:08
• Just changed it, hope it helps! – Luís Felipe Araujo de Oliveira Commented Jan 22 at 14:13
• If you try to save the processed video on your Flask server, and try to download and run it later on, does it play correctly? Or, instead of downloading, setting the src to whatever the location of the file is on the server. If that doesn't play correctly, the problem would be in how you're converting it. – FiddlingAway Commented Jan 22 at 18:49
• The processed video is fine on the Flask server, but I just tried to acess it remotely using a GET request INSIDE the Vue Front-End and returned 200 just fine, but the video could not be decoded in video.js – Luís Felipe Araujo de Oliveira Commented Jan 23 at 13:13
• As much as Stack Overflow likes the code to be in the question, this is one where a link to a (minimal) live example would be easier to debug. – misterben Commented Jan 23 at 18:31

 |  Show 1 more comment

1 Answer 1

Sorted by: Reset to default 0

Just noticed that OpenCV was wrongfully converting the codec of it's outputted file. Forcefully converting the .mp4 file with ffmpeg to use H.264 and AAC encoding fixed the issue entirely. But thanks to everyone who helped!

本文标签： javascriptError MEDIAERRSRCNOTSUPPORTED when decoding Base64 text into a fileStack Overflow