Pixel Streaming Integration

A bridge between native and web

Company

Viruma

Role

Part-time Developer

Contribution

Development

Brief Description

Allowing users to access viruma

native metaverse app through

web video streaming

During the early days, Viruma aims to have its metaverse services to be accessible and portable. Customers should be able to access and run the software at any platform preferable without installing a software. Hence, the web is a very compelling candidate. As a web developer, I was tasked with connecting their metaverse with the web

Challenges

Obscure and Uncommon

Unreal Engine's Pixel Streaming is a very obscure and rarely used technology. The lack of documentations and community support made it a very hard technology to work with, even with provided template

Fast. Fast.

Another challenge with this project is the fast requirement. Due to an upcoming meeting with a client, the first functional prototype must be produced within one month. Combined with a very small team, this was a very challenging work

Methodology

Due to the nature of the project, I decided to use an iterative approach. The prototype should meet the bare minimum requirement, performance and structural issue would be addressed later down the line whenever the minimum requirement is satisfied

Timeline

Early DevelopmentFebruary 2022 - June 2022

The goal is simple: To overlay the render canvas. At this stage of development, I only add html, css, and javascript to have additional ui interaction that allows basic activity such as interacting with object, walk, or logout from th system

Frontend Framework IntegrationJune 2022 - August 2022

A few months of development later, the features grow richer and more complex, this include video conferencing, image slideshow, and animations. Basic HTML would not suffice anymore. I decided to migrate the front end components into ReactJS Framework. Setting up and linking the rendering function manually into Pixel Streaming.

Stability, Refactoring, and AutomationAugust 2022 - October 2022

During this month I learned the importance of reducing technical debt early in time. There are many parts of the codebase that are susceptible to network interference, this also includes the template provided by unreal. The stream wold not reconnect whenever the internet is too slow or simply disconnected for a while. The bridge between unreal engine's event and front-end triggers were also broken. This periods are about cleaning the codebase, restructuring the code to be more network resilient and automating the deployment process.