CODEWITHSUNDEEP
htmlvideoyoutubehtml5-videowebgl
user82116
user82116

Reputation: 438

Use YouTube video for webgl texture?

I'm trying to use a youtube video as a webgl texture and at the moment I can't make it work because of a few issues. Does anyone have any experience with doing this and can point me in the right direction/tell me its not possible?

I'm following the approach detailed here : https://developer.mozilla.org/en/webgl/animating_textures_in_webgl where basically you make a texture from a html5 video element and keep reading frames into a texture used in your scene. This works really well for normal videos, but youtube will only provide (AFAIK) html5 video via an iframe, which is obviously on their domain rather than mine. This means its hard to query the iframe for the video element to use as a texture (my quick attempt at proxying this doesn't work because the iframe src uses relative urls, though I didn't try this thoroughly). I also tried using mediaElement.js to wrap the element as html5 video(like this : http://mediaelementjs.com/examples/?name=youtube) though I quickly realised that this is only a facade so doesn't really work as input for the texture (atleast I think that's the issue!).

I don't want to do anything that involves downloading and re-encoding the YT video or anything along those lines as I need something that can be done programatically, though either client or server side is fine.

I'm pretty sure the problem is just getting hold of a video element that contains the youtube video, but I'm pretty new to webgl, and totally new to video in webgl, so open to any ideas there! All help gratefully received - thank you!

Upvotes: 5

Views: 4079

Answers (1)

user82116
user82116

Reputation: 438

OK I ended up emulating what the YT embed iframe does, creating a video element from the URL that the iframe retrieves, and then throwing that through canvas to get around the NPOT texture issue. It works, but isn't fast/ideal so if anyone else should have any better ideas I'd love to hear them.

Upvotes: 2

Related Questions