Good day dear community,
say that I have a 2d typical video, and I host it on Vimeo plus.
And I want people to also be able to watch the video using VR goggles. Is there a way in which I can use babylon.js to make the video accessible with VR goggles? I know that people won’t be able to move around or interact, of course, Im only talking about purely accessing it or watching it with the VR goggles,
thank you 
Um, a link to the video page & people watching in the headsets browser has just got to be superior to making a page to do the same thing.
Hi javismiles,
Sounds like a cool idea! As JCPalmer indicated, VR-native browsers like the Oculus browser may already have provided behaviors for this. However, if you want to make your own VR presentation environment, you absolutely can do that with Babylon. For example, if you wanted to make a cinematic experience (i.e., watching the video on “the big screen”), all you’d need is a 3D environment for the cinema with a “projector screen” plane at the front. Add your video to that “screen” with a VideoTexture, and voila! Your very own custom VR-friendly video viewing experience.
Hope this helps, and best of luck!
@syntheticmagus
wow wow, I love this!!!
questions:
Can I use as the texture a Vimeo Vid url? an embed of a Vimeo video?
and is there any example script about setting something like this?
thank you
Maybe. The other obstacles you need to make sure work are:
If you are not hosting the file, does the service allow the video to be used outside of their site? Not really a BJS specific issue.
I am pretty sure the video texture does not do sound.
@JCPalmer thank you,
Vimeo Plus allows embeds in other websites yes, so this is no problem,
but sound… ah, if sound didnt work then this would not be a solution, sound is 100% needed…
@JCPalmer @syntheticmagus Im reading the videotexture page
it would make sense that when you use a videotexture many times the video is going to have sound, I hope there is a way to have the sound come up as well mmm
For some simple examples, the docs probably have the best place to start.
Video As A Texture | Babylon.js Documentation (babylonjs.com)
For more sophisticated uses, as JCPalmer pointed out, it gets a little tricky. When Vimeo Plus “allows embeds,” does it allow them using direct embedding or using an iframe? Depending on what you try to do, that might affect your access to the video texture because iframe content is treated differently by the browser versus normal content. This isn’t the only complexity either; trying to manipulate videos hosted by existing services is complex.
The one surefire approach I know of to achieving this generically is to use a Chrome extension to inject your own code into the site hosting the video itself. Having your code in a Chrome extension will allow Chrome to treat it as though it’s coming from the same domain as the video, which will give you access to the HTMLVideoElement on which the video is being rendered. If that video is being rendered without DRM, you can then use that element to create a VideoTexture, which you can then use in your VR experience, and you can leave the original video element itself still playing in the background, which will take care of the audio. However, this isn’t easy at the best of times, and DRM may completely prevent your access to those pixels, so I don’t think you’d be able to use even this approach with a DRM’d video (as might come from Netflix or Disney+). If you’re looking for an example, there’s a Chrome extension called Addeo that used a lot of these same techniques to do client-side video composition and synchronization, though I don’t think it used Babylon at all. Looking at that might help you get started on this; or it might just help to emphasize that, once you bring third-party hosting into the picture, this gets very complicated very quickly. 
@syntheticmagus thank you very much for your very detailed response
First of all, the video in vimeo plus is my own video, there is no DRM, so no problems with that
because its a vimeo plus account I think the embedding will be pretty flexible
Using a chrome extension is a definite no-no, I need many people to access a web page and experience this without having to install chrome extensions, thats definitely out of the question
so mmm it seems that the sound is gonna be the main obstacle, and it seems like we dont see a solution for it so maybe there is no way
@syntheticmagus @JCPalmer time to experiment,
I have modified the code to replace the link to the mp4 with a vimeo url, here:
first of all, its not working, whats the way to put a url instead of the direct mp4 file?
thank you
I see, if you have Vimeo Pro instead of Plus, then you can get direct links to the video files in .mp4 format etc,
however if the sound would not come out then its not worth doing it, is there really no way to get the sound with the video texture?
If you have a link to the MP4 texture, you should be able to put that into a VideoTexture, which will not play sound. However, you should also be able to put that same link into an HTMLVideoElement, which I believe should be able to play the sound. If you then provide that video element as the source for your VideoTexture, I believe you should be able to achieve a state where the VideoTexture shows the video while the HTMLVideoElement — not the VideoTexture — continues to play the audio. You’ll have to try it to be sure as I haven’t done every part of this myself; but if you have access to a direct MP4 link, then the combination of the VideoTexture and the HTMLVideoElement should give you everything you need. Hope this helps, and best of luck!
I have now changed that example with the following url:
var ANote0VideoVidTex = new BABYLON.VideoTexture(“vidtex”,“https://volandino.com/friends/picto.mp4”, scene);
thats a direct link with sound, and I put it here:
but nothing appears, I know the sound wont play, but the image also doesnt appear, why not, as the link works all well
the HTMLVideoElement makes a lot of sense as you say, and using that as the texture,
but as you can see, using it as the texture directly also doesnt show the visuals
Checking the debug output on your Playground (F12), I see the following error:
It seems you have fallen victim to the much-dreaded CORS policy.
I’m not an expert on CORS, but I believe what this means is that the links you have are provided for download, not for embedding. In short, the server is not configured to allow use of the asset in the way you’re trying to use it. You should double-check with Vimeo that this is supposed to be allowed; they might be able to help you either get this link working or find another link that will. In the meantime, if you want to continue developing/testing, you can host your MP4 on a local asset host, which is configured to allow CORS by default. That should allow you to continue development and testing while you work with Vimeo to figure out how to access the file from them. Hope this helps, and best of luck!
@syntheticmagus @JCPalmer I have great and surprising news
I did the following:
In my dedicated server:
a) I installed this:
npm install --global http-server
b) Then I ran this in the folder where my mp4 video with sound is:
http-server --cors -S -K ./k.key -C ./c.cert -p 8001
I then put in the babylon playground the link with
https://mydomain:8001/thevideo.mp4
and voila, not only the texture appears but the sounds works!!!
yes indeed, the sound actually appears and sounds in sync with the vid
so there is no need to do the other thing
very surprising but it works!
so this is of course without streaming so not a solution because the vid I need to use is 5gigabytes long, so I need to use Vimeo
but at least now its very possible that with vimeo it will work in the same way if I use Vimeo Pro with direct mp4 links
pretty amazing, you click in the texture and both image and sound start, you click again and they both pause, you click again and they both continue in sync, pretty good really
so now that I have this working,
what else do I need to add to the code to make it work with VR googles, with most brands that people may use as they use their browser?
The technology to invoke VR through the browser is WebXR. If you’re new to it, it may seem like there’s a lot of information in there, but there should be some examples that can help you get up and running quickly (and for more sophisticated uses, the details really help a lot). You can use Babylon’s 3D GUI in XR as well, which will help your users control your videos from within the experience. Going into details beyond this is probably beyond the scope of a forum discussion, but it sounds like you now have everything you need to be ready to roll anyway. 
Best of luck!
@syntheticmagus I just got a trial of vimeo pro and I have confirmed that it works, that using direct links of vimeo pro the texture + sound work with babylon.js so thats great
now about invoking VR, could you point me to a playground example, a simple one that simply shows anything through VR? a basic setup?
thank you
I see this for example
is it as simple as using that code to wrap the other one?
is there a way to test it without having the VR glasses? I will get ones soon to test with them, but until then
