Video Texture from OneDrive - how to make it work

I’ve got a scene - sort of a virtual class room, i have a TV in the scene and need to play a number of videos all in a 3D interactive environment. The videos are ours, but because thier large and a number of them, i put them on, first google drive, but moved them over to onedrive (because google drive limits to 100 mb - which is only a few minutes - some of our videos are 30+ min).
The videos play fine using

I saw this post:

Where Deltakosh said:
“You must update your server to let it deliver the video file to your client”

what server is he referring to? The server where the web site is hosted, or the server where the files are located - which in this case would be OneDrive - and i have no access to update their server. And, even the webhost provider, i am just using a shared hosting account, so not sure i can ‘update’ that either. He gave no specifics, really, what that updating would consist of.

I also found this:

But, that was in regards to model files, not video streaming. But, it does give a link to MS’s page
" think it should work with OneDrive but you need to get the url in a specific way, see section “Downloading OneDrive files in JavaScript apps” in this doc: CORS support - OneDrive API - OneDrive dev center | Microsoft Docs "

But, I am not at all familiar with Cors, so i wasn’t able to figure out from that page how to implement it
Anyone have a working code example ? Or know of how to make this work?

I would say this is the relevant part for you

Instead, your app needs to select the @microsoft.graph.downloadUrl property, which returns the same URL that /content would have redirected to. This URL can then be requested directly using XMLHttpRequest. Because these URLs are pre-authenticated they can be retrieved without a CORS preflight request.

1 Like

br-matt Thanks for the reply, but, as I said, I’m not familiar with any of this, and haven’t been able to figure out what ulr and id info, etc, to use and how to use it. I don’t do programming everyday, I was able to get the Babylon scene made, and can do basic javascript, but, i really need more specific example and help on how to do the CORS and XML Request aspects. So, if there is anyone out there that has done this before (used onedrive to store videos, and use @microsoft.graph.downloandIUrl and XMLHttpRequest to stream the video through the Babylon videoTexture, I really need an example of the code to do it.
All the further I’ve got on my own (with Google searches) is that on onedrive I right click on the video and select ‘embed’ and it gives me an <iframe snippet, which if you put on your web page will play the video using onedrives’ video player, with their controls, etc, inside an <iframe what i found is that you take that code and drop the <iframe and use just the ‘src=https://onedrive.live.com/embed?cid=…’ and replace ‘embed’ with ‘download’ and put this inside <video <source so the url i use to play the video inside the HTML <video is:
< video controls id=“video” >
< source
src = “https://onedrive.live.com/download?cid=nnn&resid=nnn&authkey=nnn
type= “video/mp4”>
< /source>
< /video>

Above I replace the cid, resid and authkey with ‘nnn’ to post here. But, that will play the video fine using HTML Video, and, i’ve played it disabling the controls and using the same controls i use in my Babylon code, works fine without the XMLHttpRequest song and dance. It just gives CORS Blocking when i try to pas this through Babylon VideoTexture to get the video to play inside the 3D scene.

But, I can’t figure out from the code examples I’ve seen, just what url and id I need to send with the @microsoft.graph.downloandIUrl and XMLHttpRequest so i really need an example.
As you quoted above the MS Doc says that @microsoft.graph.downloadUrl returns the same URL that /content would have. what does ‘/content’ mean, as in my code i replaced ‘/embed’ with ‘/download’, and didn’t use ‘/content’ but is that what it is referring to? See, i just don’t know what url or id to use, or an actual working code example of how to use all this.

They explain it some on that page, you will have to use xhr request or axios and the like to make a request to:

GET /drive/items/{item-id}?select=id,@microsoft.graph.downloadUrl

( sorry I don’t know what the base url here is )

That will return:

{
  "id": "12319191!11919",
  "@microsoft.graph.downloadUrl": "https://..."
}

The @microsoft.graph.downloadUrl returned is what you will want to set for your video. That seems to me what’s going on. I don’t have one drive to test and confirm, sorry :frowning:

1 Like

Thanks, I’ll poke around with it and see what i get - when i get the time. I’ll post the code if/when I do get it working, but, can’t get to it till later.