Doing a Video Stream in Decentraland

Premise 

"Create, explore and trade in the first-ever virtual world owned by its users." With this welcoming phrase Decentraland invite us to dive into one of the first blockchain-backed platform that enhances an alternate reality to express our ideas and projects into the world.
​
Launched in February 2020, Decentraland has seen its potential grow as a place to display and showcase cryptoart. Nowadays you can find NFTs placed all over the Land, some of them inside buildings specifically made to gather them, others in parks and open areas and even some of them can be found flying around.

A caption of different points where NFT art can be seen, near coordinates 15,44 in Decentraland

---

The mission

This guide focuses into the steps to follow if you want to display a video NFT in Decentraland with the current version of the SDK (6.4.9 at the time of writing). We will see what it can and what it cannot do Decentraland and the chunks of code needed.

Resources

• Unity Editor (2018.3.6f1)
  unityhub://2018.3.6f1/a220877bc173
  
• Decentraland SDK
  https://docs.decentraland.org/development-guide/SDK-101/
• Unity Decentraland Plug-in
  https://github.com/fairwood/DecentralandUnityPlugin
• Decentraland Picture Frame Display
  https://docs.decentraland.org/development-guide/display-a-certified-nft/
• Decentraland Video Stream
  https://docs.decentraland.org/development-guide/video-playing/

Listing your NFTs, knowing your limitations

---

The most important thing to do at first is to create a list of your desired NFTs to be in place. Decentraland doesn't have a hard limit regarding NFT placing or video streaming as they count in the Entity limitation.
​
If you don't know your limitations, you can find a lovely spredsheet here: https://docs.google.com/spreadsheets/d/1BTm0C20PqdQDAN7vOQ6FpnkVncPecJt-EwTSNHzrsmg/edit#gid=0

---

This is the list of assets we are going to display in:

• https://app.rarible.com/token/0xb932a70a57673d89f4acffbe830e8ed7f75fb9e0:16973:0xfec33a90737254dcf9aa33188a11f32797197f93 by ToxSam (https://app.rarible.com/toxsam/created)

Address: 0xb932a70a57673d89f4acffbe830e8ed7f75fb9e0

Token: 16973

• https://app.rarible.com/token/0xd07dc4262bcdbf85190c01c996b4c06a461d2430:92976:0xfec33a90737254dcf9aa33188a11f32797197f93 by Bananakin (https://app.rarible.com/bananakin/created)

Address: 0xd07dc4262bcdbf85190c01c996b4c06a461d2430

Token: 92976

• https://app.rarible.com/token/0x60f80121c31a0d46b5279700f9df786054aa5ee5:59183:0xb7ee502c4dadcc9a62934b02c5f8decbbfa32c48 by kourtin (https://app.rarible.com/kourtin/created)​

Address: 0x60f80121c31a0d46b5279700f9df786054aa5ee5

Token: 59183

• https://superrare.co/artwork-v2/painting-study-01-8552 by Lauretta (https://superrare.co/lauretta)​

Address: 0xb932a70a57673d89f4acffbe830e8ed7f75fb9e0

Token: 8552

---

For our example we will use a splendid land of 1x1. Here we will build our environment and decide where to place our finest cryptoart pieces. For this small piece of metaverse the platform allows us to have a maximum of 10.000 triangles, 200 entities, 30 bodies, 20 materials and 10 textures in our exported project zip folder.

Caption of the ECS limitations spreadsheet

To have a better understanding of limitations, we have to take into account that every "entity" (called in Unity gameObject) that has it's own independent Transformation node (Position, Rotation and Scale) is considered an Entity. Even if it doesn't have a 3D mesh (Body) attached to it.

This means that every NFT, video stream or model will count at least as one entity each.
​
So for now we know that our NFTs will "size" 4 Entities within the limitations and we know that although they are all animated, only one is a video source and it will be the one to do a video stream. The other three artworks are in GIF format, supported by the Picture Frame by Decentraland.

Extracting the video source

---

There is one simple rule in Decentraland to do a display of NFT picture frame and it's that: if it is in OpenSea, it can be shown. This is due to the API used to extract the blockchain data to display the artwork that requires the Entity to include a NFTShape stating the Smart Contract Address and the Token ID of the artwork. This flexible set up allows you to incorpore to your land NFT assets from SuperRare, Rarible, KnownOrigin, Whale, MakersPlace and many more!

For all the artworks that remain apart of the current admitted formats (Image file formats), we have to do a video stream of them but we must know that even video streams have limitations.

The formats currently supported by the Decentraland API are .mp4 , .mov , .ogg , .webm.

Note: The inclusion of the .ogg format makes possible to only stream audio indeed :)
​
To extract the video source of an artwork it's just as simple to catch the static video source some platforms give you by right clicking on the artwork

Original artwork by: Bananakin

Source link: https://storage.opensea.io/files/28b5a343586b597f755148a85d8edd23.mp4
​
With this source our artwork can be streamed.

Deciding the placing

---

For this test we have developed a small environment scenario where we place a "dummy" game object that will indicate the complete transform data we need, position of the video stream, its rotation and its very own scale. We have named this personal beacon "COG VideoDisplay (1)", this code name will make it easier to find it in the game.ts code the export processes for us.

Our view with Unity, you can already spot the place where we will place a video stream

​The view of the same place for the video stream in the game.ts code

As you may have noticed among the code, rotations are not set in Euler angles. Instead unity runs angles in Quaternions to avoid the gimbal to happen. If you want to input Euler angles remember to put .eulerAngles after rotation to indicate that your values are being written differently.

More about Euler vs Quaternions
​https://stackoverflow.com/questions/6002516/quaternions-vs-euler-angles

Placing the chunk of code

---

As the official Decentraland documentation follows, the code to do a stream goes by stating the following lines:

CODE

Code

This chunk of code would create a video in the position 8,1,8 located in the land with a size of 1 meters square.
​
To adapt it we extract the code needed to our scene, specifically we need the part where a plane is spawned in the world position.

CODE

Code

This is the vanilla code, stating that "entity77588n" is called "COG VideoDisplay (1)". This is the Entity we need to work on to make it stream a video on it. For it we add the following lines:

CODE

Code

Instead of spawning a new entity, we have decided to set a material on the current one and tell it to have an specific material (that contains the VideoTexture) and describe the behaviour it has to have when the player interacts with it.

Local deploying and debugging

---

After setting our code we can deploy it locally and see if Decentraland runs our chunk of code, luckily for us this works and so the video can be seen in motion alongside the other NFTs.
​
The main counterpart to stream a video it's the fact that it is not an NFT in essence, somewhat we could say that breaks the spirit of the blockchain but it's the only way possible to do this at the moment.

Another point against it's use is the memory usage and the overload that may cause to play raw videos or stream to much data into Decentraland. Because it is a platform that it is already streaming a lot of information, overloading it with additional videos and images can be problematic if you look to have a smooth experience.

Additional features to your stream

---

You can also set different properties to the stream that by default are not enabled. Or you may want to start the video in a specific position or stream it slower. This is the complete list of things you can add to you custom stream code:
​

• videoTextureName.Play()

Simple performer to play the stream, useful to trigger a video by custom events

• videoTextureName.Pause()

Pause the video

• videoTextureName.Reset()

Takes the stream to the start point

• videoTextureName.Loop

(true or false), set a boolean to indicate if your stream continously loops or stops at the end of the video stream

• videoTextureName.PlaybackRate

The speed of streaming your video has, 1 is the default speed.

• videoTextureName.Volume

The audio volume of the video, 1 by default.

• videoTextureName.Seek

Allows you to change the starting point of the video once it's played or reset. -1 by default.

Conclusion

---

Streaming a video source in Decentraland is, among other things to develop to your land, simpler than it can be thought at first glance. But be careful when placing multiple streaming videos without stop as they can overload your scene (and your neighbouring lands too!)

​Kourtin

​ENVIRONMENT ARTIST

​I purr when you're not looking. I'm passionate about environments and all the techie stuff to make them look rad. Learning and improving everyday to be a better hooman.

TWITTER