'How to convert blob / object to video React

I am building a project that has a video player that is read from FastAPI. How can I convert the blob / object into a video format. Please advise

This is what I have now

    async function getOutput() {
    await axios.get("/output-image", {responseType: "blob"})
    .then((response) => {
      var imageUrl = (window.URL || window.webkitURL).createObjectURL(new Blob([response.data]));
      setOutputImg(imageUrl);
      $(".img1").attr("src", imageUrl)
      
      console.log(response)
    })

    console.log("Output image", outputImg)
  }

HTML section

<ReactPlayer url={outputImg} width="100%" height="100%" controls={true} />

Data log

javascripthtmlreactjs


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions