xrsh/xrsh-com
1
1
Fork 0
Code Issues 6 Pull requests Projects Releases Packages Wiki Activity Actions

refactored cast.js to new components
Some checks failed
/ mirror_to_github (push) Has been cancelled
Details
/ test (push) Has been cancelled
Details

Browse source
This commit is contained in:
Leon van Kammen 2025-07-14 16:13:13 +02:00
parent c3d9b7aaed
commit 10bbfd27e2
1 changed files with 42 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

109
com/cast.js
View file

@ -4,11 +4,8 @@ AFRAME.registerComponent('cast', {
}, },
requires: { requires: {
dom: "./com/dom.js", // interpret .dom object dom: "com/dom.js",
xd: "./com/xd.js", // allow switching between 2D/3D window: "com/window.js",
html: "https://unpkg.com/aframe-htmlmesh@2.1.0/build/aframe-html.js", // html to AFRAME
winboxjs: "https://unpkg.com/winbox@0.2.82/dist/winbox.bundle.min.js", // deadsimple windows: https://nextapps-de.github.io/winbox
winboxcss: "https://unpkg.com/winbox@0.2.82/dist/css/winbox.min.css", //
}, },
dom: { dom: {
@ -23,7 +20,7 @@ AFRAME.registerComponent('cast', {
init: function () { }, init: function () { },
getInstallables: function(){ etInstallables: function(){
const installed = document.querySelector('[launcher]').components.launcher.system.getLaunchables() const installed = document.querySelector('[launcher]').components.launcher.system.getLaunchables()
return this.data.comps.map( (c) => { return this.data.comps.map( (c) => {
return installed[c] ? null : c return installed[c] ? null : c
@ -37,77 +34,54 @@ AFRAME.registerComponent('cast', {
if( this.el.sceneEl.renderer.xr.isPresenting ){ if( this.el.sceneEl.renderer.xr.isPresenting ){
this.el.sceneEl.exitVR() // *FIXME* we need a gui this.el.sceneEl.exitVR() // *FIXME* we need a gui
} }
const el = document.querySelector('body'); this.el.object3D.quaternion.copy( AFRAME.scenes[0].camera.quaternion ) // face towards camera
const cropTarget = await CropTarget.fromElement(el); // instance this component
const stream = await navigator.mediaDevices.getDisplayMedia(); this.el.setAttribute("dom","")
const [track] = stream.getVideoTracks(); },
this.track = track
this.stream = stream DOMready: function(){
this.createWindow() this.setupCast();
} this.el.setAttribute("html-as-texture-in-xr", `domid: #${this.el.uid}; faceuser: true`)
},
}, },
createWindow: async function(){ setupCast: async function(){
let s = await AFRAME.utils.require(this.requires) let s = await AFRAME.utils.require(this.requires)
// instance this component const video = this.el.dom.querySelector('video')
const instance = this.el.cloneNode(false)
this.el.sceneEl.appendChild( instance )
instance.setAttribute("dom", "")
instance.setAttribute("xd", "") // allows flipping between DOM/WebGL when toggling XD-button
instance.setAttribute("visible", AFRAME.utils.XD() == '3D' ? 'true' : 'false' )
instance.setAttribute("position", AFRAME.utils.XD.getPositionInFrontOfCamera(0.5) )
instance.setAttribute("grabbable","")
instance.object3D.quaternion.copy( AFRAME.scenes[0].camera.quaternion ) // face towards camera
instance.track = this.track
instance.stream = this.stream
const setupWindow = () => { video.addEventListener( "loadedmetadata", () => {
instance.dom.style.display = 'none'
const video = instance.dom.querySelector('video') let width = Math.round(window.innerWidth*0.4)
video.addEventListener( "loadedmetadata", function () { let factor = width / video.videoWidth
let width = Math.round(window.innerWidth*0.4) let height = Math.round( video.videoHeight * factor)
let factor = width / this.videoWidth
let height = Math.round(this.videoHeight * factor)
new WinBox("Casting Tab",{
width,
height,
x:"center",
y:"center",
id: instance.uid, // important hint for html-mesh
root: document.querySelector("#overlay"),
mount: instance.dom,
onclose: () => { instance.dom.style.display = 'none'; return false; },
oncreate: () => {
// instance.setAttribute("html",`html:#${instance.uid}; cursor:#cursor`) const createVideoTexture = () => {
} const texture = new THREE.VideoTexture( video );
}); texture.colorSpace = THREE.SRGBColorSpace;
instance.dom.style.display = '' // show 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)
}
// hint grabbable's obb-collider to track the window-object createVideoTexture.apply(this)
instance.components['obb-collider'].data.trackedObject3D = 'components.html.el.object3D.children.0' //this.el.setAttribute("window", `title: casting tab; uid: ${this.el.uid}; attach: #overlay; dom: #${this.el.dom.id}; width:${width}; height: ${height}`)
instance.components['obb-collider'].update() })
})
video.srcObject = instance.stream
video.play()
this.createVideoTexture.apply(instance) const el = document.querySelector('body');
} const cropTarget = await CropTarget.fromElement(el);
setTimeout( () => setupWindow(), 10 ) // give new components time to init const stream = await navigator.mediaDevices.getDisplayMedia();
}, const [track] = stream.getVideoTracks();
this.track = track
this.stream = stream
video.srcObject = this.stream
video.play()
createVideoTexture: function(){
console.dir(this)
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( this.sceneEl.camera.position );
this.object3D.add(mesh)
}, },
manifest: { // HTML5 manifest to identify app to xrsh manifest: { // HTML5 manifest to identify app to xrsh
@ -116,6 +90,7 @@ AFRAME.registerComponent('cast', {
"icons": [ "icons": [
{ {
"src": "https://css.gg/cast.svg", "src": "https://css.gg/cast.svg",
"src": "data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKPgogIDxwYXRoCiAgICBkPSJNMjAgNkg0VjhIMlY2QzIgNC44OTU0MyAyLjg5NTQzIDQgNCA0SDIwQzIxLjEwNDYgNCAyMiA0Ljg5NTQzIDIyIDZWMThDMjIgMTkuMTA0NiAyMS4xMDQ2IDIwIDIwIDIwSDE1VjE4SDIwVjZaIgogICAgZmlsbD0iY3VycmVudENvbG9yIgogIC8+CiAgPHBhdGgKICAgIGQ9Ik0yIDEzQzUuODY1OTkgMTMgOSAxNi4xMzQgOSAyMEg3QzcgMTcuMjM4NiA0Ljc2MTQyIDE1IDIgMTVWMTNaIgogICAgZmlsbD0iY3VycmVudENvbG9yIgogIC8+CiAgPHBhdGggZD0iTTIgMTdDMy42NTY4NSAxNyA1IDE4LjM0MzEgNSAyMEgyVjE3WiIgZmlsbD0iY3VycmVudENvbG9yIiAvPgogIDxwYXRoCiAgICBkPSJNMiA5QzguMDc1MTMgOSAxMyAxMy45MjQ5IDEzIDIwSDExQzExIDE1LjAyOTQgNi45NzA1NiAxMSAyIDExVjlaIgogICAgZmlsbD0iY3VycmVudENvbG9yIgogIC8+Cjwvc3ZnPg==",
"type": "image/svg+xml", "type": "image/svg+xml",
"sizes": "512x512" "sizes": "512x512"
} }