search

youtube / api-samples

Code samples for YouTube APIs, including the YouTube Data API, YouTube Analytics API, and YouTube Live Streaming API. The repo contains language-specific directories that contain the samples.
5.5k stars 2.98k forks source link

AFrame Plugin #270

Open Immersionn opened 4 years ago

Immersionn commented 4 years ago

We are looking for a solution to embed Youtube 360 videos to WebGL.

We have tried this lib https://github.com/mayognaise/aframe-html-shader ‑ but it only supports simple HTML+CSS, not work with youtube player.

Alternatively, we have tried to make a link in our app to the youtube player, and a user can view the youtube 360 video in this way but with an extra step – trigger enter 360 button again in the browser. It is not really a good user experience.

Ideally we look for an Aframe plugin for Youtube like there is one for Vimeo https://github.com/vimeo/aframe-vimeo-component

Or open to other ideas.”

msivert commented 4 years ago

Would definitely be interested in seeing a solution to this as well!

As far as I can tell, the core problem is that you can't use iframes in WebGL, and attempting some kind of proxying or re-encoding/re-streaming to a texture apparently goes against YouTube's terms (there's even a point about this in AFrame's FAQ: https://aframe.io/docs/1.0.0/introduction/faq.html )

gabrieljbaker commented 4 years ago

I'd be interested in a youtube/aframe plugin as well!

Utopiah commented 4 years ago

Indeed that would make sense since Youtube does embbed anyway and Google shipped Chome with WebXR support. It might be a problem because of ads. In case there is no update here I suggest relying on open source equivalents like https://github.com/Chocobozzz/PeerTube/ instead.

johnwwk commented 2 years ago

I don't think youtube will do it for aframe..vimeo component directly uses three.js vimeo plugin...I see this for three.js https://github.com/mrdoob/three.js/blob/master/examples/css3d_youtube.html which is also showcased on three.js website.. It has iframe elements though..aframe doesn't support iframes and as stated here css3d https://github.com/aframevr/aframe/issues/4712
I think our best bet is to use the aframe-websurfaces component. Even though this is hacky, it works..

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Example 1</title>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-websurfaces@1.4.0/dist/aframe-websurfaces.umd.js"></script>
  </head>
  <body>
    <a-scene>
      <!--Camera-->
      <a-entity
        wasd-controls="acceleration: 20;"
        camera="active: true"
        look-controls="pointerLockEnabled: false"
        position="0 1.6 0"
      >
        <a-cursor position="0 0 -.05" scale=".04 .04 1"></a-cursor>
      </a-entity>

      <!--Environment-->
      <a-sky color="#aff"></a-sky>
      <a-plane
        rotation="-90 0 0"
        width="20"
        height="20"
        color="#3fa841"
      ></a-plane>

      <!--Websurface-->
      <a-entity
        websurface="url:https://www.youtube.com/watch?v=FdmvUBhy_KI; width:4; height:2;"
        position="-2.25 1.5 -4"
      ></a-entity>

    </a-scene>
  </body>
</html>
Utopiah commented 2 years ago

aframe-websurfaces is not available in VR so not sure how usable that would be.