📺Decentraland Playback

Adding the provided m3u8 URL to your scene

After a stream has been scheduled you will receive a playback URL (m3u8) needed to playback your stream. For Decentraland, this URL needs to be placed within your scene (game.ts) and deployed. More information on this can be found here.

Serraform recommends certain configurations for the best playback experience. Example implementations are provided below for Video on Demand (VOD) and Live Streams, and are based on the Decentraland SDK v7.

Video on Demand (VOD)

To playback a pre-recorded video file or a stream relay (eg. YouTube video) on-demand, there are many ways to approach this. In our example we provide a playback button to trigger the video to be played when the user chooses to. If another person joins the scene, they will not be able to watch the same video until they click the playback button as well. This means each user gets their own personal experience of the video on-demand, without interrupting one another.

// Video will start playing when you click on the screen.
const myVideoClip1 = new VideoClip(
    
    // Enter your playback URL below
    'https://playback.livepeer.studio/asset/hls/54bd2bvcxp0y9x7u/index.m3u8?accessKey=349619f3-6gca-44e0-9dce-ea267ab23be0')

const myVideoTexture1 = new VideoTexture(myVideoClip1)

const myMaterial1 = new Material()
myMaterial1.albedoTexture = myVideoTexture1
myMaterial1.roughness = 1
myMaterial1.specularIntensity = 2
myMaterial1.metallic = 0
myMaterial1.emissiveTexture = myVideoTexture1
myMaterial1.emissiveColor = Color3.White()
myMaterial1.emissiveIntensity = 1

const screen1 = new Entity()
screen1.addComponent(new PlaneShape())
screen1.addComponent(
  new Transform({
    position: new Vector3(10.000, 3.000, 2.000),
    scale: new Vector3(9.000, 4.000, 4.000),
    rotation: new Quaternion().setEuler(360.000, 180.000, 360.000),
  })
)
screen1.addComponent(new OnPointerDown(()=>{
  
  myVideoTexture1.playing = !myVideoTexture1.playing
},{hoverText:'Play/Pause'}))

screen1.addComponent(myMaterial1)

engine.addEntity(screen1)

Live Streams

To playback a live stream or a live stream relay (eg. Twitch) you will want to make sure that everybody within your scene is watching the same part of the video at the same time. Unlike video-on-demand where you may decide the user can play the video when they click a button (on-demand), live requires all of the audience to witness the same video at the same time, regardless if they join late or are in a different realm.

// Video will start playing as soon as you enter the scene.

const myVideoClip = new VideoClip(
  
  // Enter your playback URL below
  'https://livepeercdn.studio/hls/8j5g3o3b7bc6zxz/index.m3u8')

const myVideoTexture = new VideoTexture(myVideoClip)

const myMaterial = new Material()
myMaterial.albedoTexture = myVideoTexture
myMaterial.roughness = 1
myMaterial.specularIntensity = 2
myMaterial.metallic = 0
myMaterial.emissiveTexture = myVideoTexture
myMaterial.emissiveColor = Color3.White()
myMaterial.emissiveIntensity = 1


// #4
const screen = new Entity()
screen.addComponent(new PlaneShape())
screen.addComponent(
    new Transform({
        position: new Vector3(7.000, 3.000, 8.000),
        scale: new Vector3(9.000, 4.000, 4.000),
        rotation: new Quaternion().setEuler(360.000, 90.000, 360.000),
    })
)

screen.addComponent(myMaterial)

engine.addEntity(screen)


myVideoTexture.play()
myVideoTexture.loop
myVideoTexture.volume = 1