What is the type of this data?

Question

I'm making a GET request to receive a list of videos that I then want to display in my React Application. I am making the request as such:

axios({
      method: "get",
      url: `http://localhost:3001/getGalleryVideos`,
    })
      .then((res) => {
        console.log(res.data[0]);
        // setVideo(URL.createObjectURL(res.data[0]));
      })

Now what I receive on the front end in the console.log you see above looks like this:

Browser Console

So my first question is, what is the format or type of this data I have received? I can see the actual data of the files seems to be there as it shows "data: (773491) 0, 0, 0, 32, 102..." im assuming that is the size of the data and then followed by the actual value of the data, but I don't know what type or format this is in.

My next question is, how can I convert this video to the correct format to set it as the source of a html video element like this

<video controls src={video} />

I have tried converting this to a format where I can set this to be the video source of a video element in a react component, but you can see my one of my unsuccessful attempt to set the source above with:

        // setVideo(URL.createObjectURL(res.data[0]));

but this gives me the error:

TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.

Answer 1

When using Axios in the browser, you can set the responseType to be a blob object.
Media tags (audio/video/image) will accept a blob as input.

axios(
        {
            method: "get",
            url: "http://localhost:3001/getGalleryVideos",
            responseType: "blob",
        }
)
.then( 
        (res) => { setVideo( res.data ); } 
);

Then the setVideo() function looks something like this:

function setVideo ( inputData )
{
    //## Update path first with returned result of the "createObjectURL" process...
    let path = (window.URL || window.webkitURL).createObjectURL( inputData );
    
    //## Test playback... 
    //## Note: must first "load()" the "src" before trying to play media
    myVidObj.src = path;
    myVidObj.load();
    myVidObj.play();
}

Where myVidObj is a reference to your <video> tag.
I don't use React but in pure Javascript it would be referenced by its id name.

...For example:

var myVidObj = document.getElementById("testVid");

...If the tag is setup like this example:

<video id="testVid" width="640" height="480" controls>