Read the article

Technologies Used:

Delight Engine

Role:

Development

Category:

WebXR

I was tasked to create a tipping bar and a chat window as UI components, that let the user tip streamers and read messages while in VR mode using our in-house Delight 3D WebGL engine.

Our client would supply the messages using their chat backend to our engine to render using simple BBCode, which we in turn would convert to HTML, insert in SVG and render the resulting inlined SVG image as a WebGL Texture on a quad.

Since foreignObject uses the normal browser rendering pipeline, rich text styles, layout, images and emojis could easily be converted to bitmap and drawn in WebGL.

A separate engine API functionality for receiving and displaying tip values was also developed.

Here is sample code for

1. displaying a newly received message from the server to our user while in VR mode
2. let the user tip the streamer

Markup:

<!-- Initialize live video powered by Delight Engine -->
<dl8-live-video
  format="STEREO_180_LR"
  autostart
  no-seeking
  display-mode="force-inline"
  not-pausable
>

  <!-- Initialize live video chat as a UINode in our engine -->
  <dl8-live-video-chat />

  <!-- Initialize live video tipping bar as a UINode in our engine -->
  <dl8-live-video-tipping-bar
    default-budget="8"
    on-submit-tip="window.onSubmitTip"
  />

  <source src="path/to/your/hls.m3u8" type="application/x-mpegurl" />
</dl8-live-video>

JS API:

/* ------ Adding a chat message to the stream ------ */

const $liveChat = document.getElementsByTagName('dl8-live-video-chat')[0]

/* The message poster's username formatted using simple BBCode */
const messagePosterBBCode = '[color=white][big]Georgi Nikolov[/big][/color]'

/* The message contents formatted */
const messageContentsBBCode = '[small]wow, cant believe I am here for this [big][color="#f00"]amazing stream!!!
[/color][/big][small]'

/* Display the new message positioned in 3D space and oriented towards the user camera */
$liveChat.addMessage(messagePosterBBCode, messageContentsBBCode)

/* ------ Tipping the streamer ------ */

const $tippingElement = document.getElementsByTagName('dl8-live-video-tipping-bar')[0]
const tippingBufget = 100

/* Update the on-screen remaining tip budget using custom engine call */
tippingBarEl.updateBudget(tippingBudget)