xrsh-com/com/cast.js

AFRAME.registerComponent('cast', {
  schema:{
    comps: {type:"array"}
  },

  requires:     {
    dom:      "com/dom.js",
    window:   "com/window.js",
  },

  dom: {
    scale:   0.8,
    events:  ['click','keydown'],
    html:    (me) => `<div>
                        <video id="video" autoplay playsinline style="width:100%"></video>
                      </div>`,

    css:    (me) =>  `.helloworld-window div.pad { padding:11px; }`
  },

  init: function () { },

  etInstallables: function(){
    const installed   = document.querySelector('[launcher]').components.launcher.system.getLaunchables() 
    return this.data.comps.map( (c) => {
      return installed[c] ? null : c
    })
    .filter( (c) => c ) // filters out null elements
  },

  events:{

    launcher: async function(){
      if( this.el.sceneEl.renderer.xr.isPresenting ){
        this.el.sceneEl.exitVR() // *FIXME* we need a gui 
      }
      this.el.object3D.quaternion.copy( AFRAME.scenes[0].camera.quaternion ) // face towards camera
      // instance this component
      this.el.setAttribute("dom","")
    },

    DOMready: function(){
      this.setupCast();
      this.el.setAttribute("html-as-texture-in-xr", `domid: #${this.el.uid}; faceuser: true`)
    },

  },

  setupCast: async function(){
    let s = await AFRAME.utils.require(this.requires)

    const video = this.el.dom.querySelector('video')

    video.addEventListener( "loadedmetadata", () => {

      let width  = Math.round(window.innerWidth*0.4) 
      let factor = width / video.videoWidth
      let height = Math.round( video.videoHeight * factor)

      const createVideoTexture = () => {
        const texture = new THREE.VideoTexture( video );
        texture.colorSpace = THREE.SRGBColorSpace;
        const geometry = new THREE.PlaneGeometry( 16, 9 );
        geometry.scale( 0.2, 0.2, 0.2 );
        const material = new THREE.MeshBasicMaterial( { map: texture } );
        const mesh = new THREE.Mesh( geometry, material );
        mesh.lookAt( AFRAME.scenes[0].camera.position );
        this.el.object3D.add(mesh)
      }

      createVideoTexture.apply(this)
      //this.el.setAttribute("window", `title: casting tab; uid: ${this.el.uid}; attach: #overlay; dom: #${this.el.dom.id}; width:${width}; height: ${height}`)
    })

    const el = document.querySelector('body');
    const cropTarget = await CropTarget.fromElement(el);
    const stream = await navigator.mediaDevices.getDisplayMedia();
    const [track] = stream.getVideoTracks();
    this.track = track
    this.stream = stream

    video.srcObject = this.stream 
    video.play()

  },

  manifest: { // HTML5 manifest to identify app to xrsh
    "short_name": "tab",
    "name": "Browser Tab",
    "icons": [
      {
        "src": "https://css.gg/cast.svg",
        "src": "data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKPgogIDxwYXRoCiAgICBkPSJNMjAgNkg0VjhIMlY2QzIgNC44OTU0MyAyLjg5NTQzIDQgNCA0SDIwQzIxLjEwNDYgNCAyMiA0Ljg5NTQzIDIyIDZWMThDMjIgMTkuMTA0NiAyMS4xMDQ2IDIwIDIwIDIwSDE1VjE4SDIwVjZaIgogICAgZmlsbD0iY3VycmVudENvbG9yIgogIC8+CiAgPHBhdGgKICAgIGQ9Ik0yIDEzQzUuODY1OTkgMTMgOSAxNi4xMzQgOSAyMEg3QzcgMTcuMjM4NiA0Ljc2MTQyIDE1IDIgMTVWMTNaIgogICAgZmlsbD0iY3VycmVudENvbG9yIgogIC8+CiAgPHBhdGggZD0iTTIgMTdDMy42NTY4NSAxNyA1IDE4LjM0MzEgNSAyMEgyVjE3WiIgZmlsbD0iY3VycmVudENvbG9yIiAvPgogIDxwYXRoCiAgICBkPSJNMiA5QzguMDc1MTMgOSAxMyAxMy45MjQ5IDEzIDIwSDExQzExIDE1LjAyOTQgNi45NzA1NiAxMSAyIDExVjlaIgogICAgZmlsbD0iY3VycmVudENvbG9yIgogIC8+Cjwvc3ZnPg==",
        "type": "image/svg+xml",
        "sizes": "512x512"
      }
    ],
    "id": "/?source=pwa",
    "start_url": "/?source=pwa",
    "background_color": "#3367D6",
    "display": "standalone",
    "scope": "/",
    "theme_color": "#3367D6",
    "category":"system",
    "shortcuts": [
      {
        "name": "What is the latest news?",
        "cli":{
          "usage":  "helloworld <type> [options]",
          "example": "helloworld news",
          "args":{
            "--latest": {type:"string"}
          }
        },
        "short_name": "Today",
        "description": "View weather information for today",
        "url": "/today?source=pwa",
        "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
      }
    ],
    "description": "adds item to menu",
    "screenshots": [
      {
        "src": "/images/screenshot1.png",
        "type": "image/png",
        "sizes": "540x720",
        "form_factor": "narrow"
      }
    ],
    "help":`
Helloworld application

This is a help file which describes the application.
It will be rendered thru troika text, and will contain
headers based on non-punctualized lines separated by linebreaks,
in above's case "\nHelloworld application\n" will qualify as header.
    `
  }

});