Rendering Streaming HTML5 Video in a Browser-based 3D Enviroment

By: Stew Hering | Published: 03/05/2021

A critical feature of our web AR platform is the ability to render streaming HTML5 video content in a browser-based 3D enviroment. For abstraction's sake, we build on top of the open-source THREE JS framework which provides a great WebGL renderer and base 3D enviroment.

Although THREE JS does natively support video textures, their use cases can be limited, especially when one is looking to dynamically change video sources at runtime as our web AR platform does. For this reason, we developed a CommonJS object which extends the behavior of a standard THREE JS mesh to create a video player object which can be simply integrated into a THREE JS scene.

Recently, we have been able to release a version of this object on GitHub for use by the open-source community.

For the software developer, documentation, source code, and a usage guideo for our video player object can be found on its GitHub page. A demo of the object in action can also be viewed here!

As an integrated product development company, we here at Snapp Development love the open-source community. Wherever possible, we look to release our codebases and designs for use by this community. We firmly believe that open-source is the way of the future for technology development and look foreward both to seeing what the community creates next, and to contributing in whatever ways we can.