Hello! Please choose your
desired language:
Dismiss

Video Streaming

You can display a video streaming source as a material placed on a primitive shape.

The source of the streaming must be an https URL (http URLs aren’t supported), and the source should have CORS policies (Cross Origin Resource Sharing) that permit externally accessing it. If this is not the case, you might need to set up a server to act as a proxy and expose the stream in a valid way.

To stream a video:

  1. Create a VideoClip object, referencing the streaming URL.

  2. Create a VideoTexture object, and assign the VideoClip to it.

  3. Create a Material or BasicMaterial, and set its albedoTexture or texture to the VideoTexture you created.

  4. Then add that Material to an entity that has a primitive shape, like a PlaneShape or a BoxShape.

// #1
const myVideoClip = new VideoClip("https://theuniverse.club/live/consensys/index.m3u8")

// #2
const myVideoTexture = new VideoTexture(myVideoClip)

// #3
const myMaterial = new BasicMaterial()
myMaterial.texture = myVideoTexture

// #4
const screen = new Entity()
screen.addComponent(new PlaneShape())
screen.addComponent(
  new Transform({
    position: new Vector3(8, 1, 8),
  })
)
screen.addComponent(myMaterial)
screen.addComponent(
  new OnPointerDown(() => {
    myVideoTexture.playing = !myVideoTexture.playing
  })
)
engine.addEntity(screen)

Keep in mind that streaming video demands a significant effort from the player’s machine. We recommend not having more than one video stream displayed at a time per scene. Also avoid streaming videos that are in very high resolution, don’t use anything above HD. We also recommend activating the stream only once the player performs an action or approaches the screen, to avoid affecting neighbouring scenes.

Since the streamed video is a texture that’s added to a material, you can also experiment with other properties of materials, like tinting it with a color, of adding other texture layers. for example to produce a dirty screen effect.