I am working on a product that takes a file from API and read as a blob. But pressing the play button on the video does not work. I have tried using tried using querySelector or a useState variable. All not working. There are no errors as you can see from the Logs.
It can read a local file but not from the API.
const [outputImg, setOutputImg] = useState(null);
useEffect(() => {
getOutput()
}, [])
async function getOutput() {
await axios.get("/output-image", {responseType: "blob"})
.then((response) => {
var imageUrl = (window.URL || window.webkitURL).createObjectURL(response.data);
setOutputImg(imageUrl);
var vid = document.querySelector(".img1")
console.log(response)
})
console.log("Output image", outputImg)
}
HTML section
<VideoPlayer className="img1" src={outputImg} poster={posterImg} controls width="100%" height="100%" />
