Something really simple, spawning a plane, scale to respect the aspect ratio.
For video, a play/pause button.
Image and videos are generally in a hubs room so in the objects.gltf file, not in hubs glb scene.
The objects.gltf file can be downloaded for any hubs rooms at https://hubs.mozilla.com/xxxxxxx/objects.gltf
The objects.gltf file is the non binary format but that's the same than the scene glb with hubs extensions. Mainly pinnable and media extensions (glb, sketchfab glb, png, mp4).
For images, we can do a simplified version of https://github.com/mozilla/hubs/blob/master/src/components/media-image.js just supporting jpg, webp, png by creating a a-plane entity, and scaling the entity based on image dimensions.
For videos, it's https://github.com/mozilla/hubs/blob/master/src/components/media-video.js there is lots of code in there, but at first we can just do like images and use a VideoTexture, similar to networked-video-source, and adding a simple pause/play button on it. Syncing video time between participants is another subject.
Hubs uses https://github.com/mozilla/hubs/blob/master/src/components/media-loader.js to guess the mime type of the media and use the correct component, but this code is so complex! We can do a simpler one.
Something really simple, spawning a plane, scale to respect the aspect ratio.
For video, a play/pause button.
Image and videos are generally in a hubs room so in the objects.gltf file, not in hubs glb scene.
The objects.gltf file can be downloaded for any hubs rooms at
https://hubs.mozilla.com/xxxxxxx/objects.gltfThe objects.gltf file is the non binary format but that's the same than the scene glb with hubs extensions. Mainly pinnable and media extensions (glb, sketchfab glb, png, mp4).
For images, we can do a simplified version of https://github.com/mozilla/hubs/blob/master/src/components/media-image.js just supporting jpg, webp, png by creating a a-plane entity, and scaling the entity based on image dimensions.
For videos, it's https://github.com/mozilla/hubs/blob/master/src/components/media-video.js there is lots of code in there, but at first we can just do like images and use a VideoTexture, similar to networked-video-source, and adding a simple pause/play button on it. Syncing video time between participants is another subject.
Hubs uses https://github.com/mozilla/hubs/blob/master/src/components/media-loader.js to guess the mime type of the media and use the correct component, but this code is so complex! We can do a simpler one.