Create Media Layer API Sample Project

[mkcode]

Summary:

• Build a WebXR Sample using the Media Layers API, demonstrating how to easily create a high-quality video player inside of an immersive WebXR application.
• Include media controls (play/pause/jump ahead/jump back/scrub, adjust volume, mute, etc.) that can be summoned and interacted with using controller input
• Extend sample to support different types of media -- traditional 2D video on a flat screen, 180/360-degree mono video, 180/360-degree stereo video
• [Stretch] Extend media controls to support interaction with WebXR hands input
• [Stretch] Allow the user to choose between different immersive 3D environments
• [Stretch] Allow the user to control screen size for 2D video screen using controllers and hands input

Level of complexity: Medium

Deliverables and timelines:

• Gather requirements and design the app - 2 weeks
• Create the basic application (2D video playback using media layers, basic media controls) - 4 weeks
• Extend the application (180/360 video support, hands interactions, more advanced media controls, etc.) - 2 weeks
• Refine code to make sure it is clear, well-documented, and will work well as an instructive code sample - 2 weeks

[mkcode]

Media Layers API: https://immersive-web.github.io/layers/

[mkcode]

Additional Info:

• Layers Spec
  • Explainer - https://github.com/immersive-web/layers/blob/master/explainer.md
  • Full Spec - https://immersive-web.github.io/layers/
  • Media Layers sub-section - https://immersive-web.github.io/layers/#videolayer
• Example projects:
  • WebXR Layers Samples - https://github.com/cabanier/WebXRLayers-samples
  • Rough WebXR Media Layers Sample: https://artyom17.github.io/ahmedsabie/webxr-samples/video5.html
  • Code is here: https://github.com/Artyom17/ahmedsabie/tree/master/webxr-samples