2

Is it possible to embed YouTube video without CSS3DRenderer in three.js? I'm using cardboard effect, So CSS3DRenderer won't work here.

Here is the code that i used so far. But im facing cross domain issue

video = document.createElement('video');
video.autoplay  = true;
video.src = 'http://myurl.com/videos/video.mp4';
newcanvas = document.createElement('canvas');
context = newcanvas.getContext('2d');
videoTexture = new THREE.Texture( newcanvas );
.....

In animate function i have used the below code.

if (video.readyState === video.HAVE_ENOUGH_DATA ){
    context.drawImage(video,0, 0);
    if(videoTexture)
        videoTexture.needsUpdate = true;
}
Vijay Baskaran
  • 869
  • 2
  • 9
  • 18

2 Answers2

0

First you need to embed your youtube video in an html video tag. If you have a look on the internet you'll find a lot of ways for doing this. This may come useful to you: YouTube URL in Video Tag

After having this working you need to convert it to a THREE.Texture, so you can map it to a mesh and use WebGL Renderer. There's a Three.jsextension for this: threex.videotexture

Community
  • 1
  • 1
leota
  • 1,636
  • 2
  • 13
  • 33
  • 1
    I'm simply passing the cross domain url('http://myurl.com/img/videos/sample.mp4') in threex.videotexture. But the video is not playing. – Vijay Baskaran Apr 27 '16 at 04:51
  • here is the code i modified so far. var canPlayMp4 = document.createElement('video'); var url = "http://myurl.com/img/videos/sample.mp4"; var videoTexture= new THREEx.VideoTexture(url) video = videoTexture.video; video.setAttribute('crossorigin', ''); videoTexture.texture.minFilter = THREE.LinearFilter; videoTexture.texture.magFilter = THREE.LinearFilter; updateFcts.push(function(delta, now){ videoTexture.update(delta, now) }) – Vijay Baskaran Apr 27 '16 at 04:59
  • Sorry I was not available, I've seen you posted another question (http://stackoverflow.com/questions/36883592/load-cross-domain-image-in-texture/36883867#36883867), hope that helped you – leota Apr 27 '16 at 10:37
  • That one is for loading image texture. but im facing cross domain issue in video also. – Vijay Baskaran Apr 27 '16 at 18:11
  • I guess if you solve cross domain issue it should work. Let me know – leota Apr 27 '16 at 18:14
  • I tried using https://crossorigin.me/http://myurl.com/img/videos/sample.mp4 for cross domain issue but its not working. this method is working well for texture load. – Vijay Baskaran Apr 27 '16 at 18:26
  • DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be loaded. – Vijay Baskaran Apr 27 '16 at 18:32
  • 1
    Try: video.setAttribute('crossorigin', 'anonymous'); – leota Apr 27 '16 at 18:35
  • 1
    Or: video.crossOrigin = "anonymous"; – leota Apr 27 '16 at 18:36
  • Thanks a lot. it is working now.. But for crossorigin we need to use "http://cors.io/?u=http://myurl.com/video.mp4" and https://crossorigin.me/ is not working. – Vijay Baskaran Apr 27 '16 at 18:43
  • Is ther any other method is available other than adding http://cors.io/?u= or crossorigin.me because this both option having performance issue. it takes too much time to load a simple video file. – Vijay Baskaran Apr 27 '16 at 18:46
  • The reason why is slower it's because it goes through a proxy server. It's a bit like using Tor Network :) I don't think there's something to do unfortunately – leota Apr 27 '16 at 18:50
  • I'm facing issue in another scenario. Previously i have uploaded the video file in separate server and trying to get data by "http://cors.io/?u=http://myurl.com/video.mp4" but in some case i have youtube embed url(https://www.youtube.com/embed/osS1NXMPwWE) by this time it is not working and not showing any error in console. I'm implementing the YouTube video in Video tag using http://jsfiddle.net/qpbsfxgr/ – Vijay Baskaran Apr 28 '16 at 07:05
0

Is not possible in praticle. Youtube.com will not accept any cross domain job with there assets. Only way is to use youtube API with iframe but i make some action to make this possible.

You will need to add server part for you web app. I use nodejs.

This is procedure:

  • Use classic google , youtube APi login/search
  • Make search and collect search result data (Most important is videoId )
  • Save to your own server
  • Call from web app your new route.

Now you can do what ever you want.

Direct demo link: https://maximumroulette.com:3000

https://github.com/zlatnaspirala/vue-typescript-starter

Nikola Lukic
  • 4,001
  • 6
  • 44
  • 75