MediaBoards (Images, Videos, Screenshare)

Jump to:

FAQs

How do I resize mediaboards?

My mediaboard shows “Rendering…” even after a couple of hours

What pixel size should mediaboard thumbnails be?

How can I play and pause a video mediaboard?

How can I autoplay a video mediaboard?

Why does website XYZ open in a new tab instead of directly in the 3D environment?

Do you support GIFs?

Can I show a thumbnail? My video mediaboard is black until I click on it!

Images

Transparent PNGs

Animated mediaboards (2.12+)

I have the images but they are not online – where can I upload them?

Videos

Adding a video through the chat (“pinning”)

How to upload and play an .mp4 video as a texture in the 3d scene

Using YouTube URLs

Disable suggested videos when pausing or at the end

Using Vimeo URLs

Video Resolution

Privacy Settings

DASH Video Format & Playlists

Vimeo Live

Video textures (MP4, YouTube, Vimeo) on IE11 (2.8+)

Video Play & Pause

Autoplay

Setting a thumbnail

Live Video Streaming

Twitch

YouTube Live

Using your webcam

Screen sharing

Supported Browsers

Chrome Browser Sharing Options

Share Your Entire Screen

Share an Application Window

Share a Chrome Tab

Extension for Chrome (prior to version 70)

FAQs

How do I resize mediaboards?

In 2.9+ you can scale by grabbing the corners of an item in edit mode and dragging them to resize.

Or, you can also manually adjust the scale in a mediaboard’s settings.

  1. Edit mode > Editable Items List Icon
  2. Find your mediaboard
  3. Click Edit
  4. In the scale field change
    {"x":1,"y":1,"z":1}
    To larger
    {"x":2.4,"y":2.4,"z":2.4}
    Or smaller
    {"x":0.2,"y":0.2,"z":0.2}

Note: there must be a leading zero for less than 1 scale. This won’t work: {"x":.2,"y":.2,"z":.2}

My mediaboard shows “Rendering…” even after a couple of hours

If your mediaboard never shows a captured image, ensure the url starts with `https://` or `http://` when creating the mediaboard in order to get the capture image, otherwise you’ll need to delete and create it again.

What pixel size should mediaboard thumbnails be?

You can make the image whatever pixel dimensions you wish, as long as it maintains that ratio it will not look distorted.

We have on our roadmap to resize using the blue gizmo handles in edit mode , however in some cases entering numeric values is more accurate.

How can I play and pause a video mediaboard?

See Video Play & Pause below.

How can I autoplay a video mediaboard?

See Autoplay below.

Why does website XYZ open in a new tab instead of directly in the 3D environment?

If a website does not allow iframing (Google, for instance), it will need to be opened in a new tab. From version 2.13 onward, any website that can be iframed will be, and for sites that cannot the platform will show a link to open the website in another tab.

Do you support GIFs?

GIFs are not supported for mediaboards. The suggested way to get animated content in the 3D environment is to use a video, or to use the method described below to use a series of images.

Can I show a thumbnail? My video mediaboard is black until I click on it!

See Setting a thumbnail below.

Images

Transparent PNGs

To enable transparency for a png image edit its properties and set transparent to true

Animated mediaboards (2.12+)

It is possible to show an “animation” by using a set of images instead of a single one.

This section assumes you know how to edit a mediaboard – if not, you can learn how to do so in the “Introduction to Editing” guide, specifically under the “Changing the image on a mediaboard” section.

You will need to edit the diffuseMap field of the mediaboard, inserting an array of images. Normally diffuseMap might look like this:

https://cache.learnbrite.com/example1.png

But in this case we will need a URL for each “frame” of the animation, for example:

https://cache.learnbrite.com/example1.png
https://cache.learnbrite.com/example2.png

https://cache.learnbrite.com/example3.png
https://cache.learnbrite.com/example4.png

To format this properly, we will need to:wrap each of the lines in quotes, separate them with a comma, and finally wrap everything together with a pair of square brackets. In order:https://cache.learnbrite.com/_assets_/clients/learnbrite/mootup/scenarioConfig.js

  1. Wrap each line in quotation marks, add a comma after each line but the last

"https://cache.learnbrite.com/example1.png",
"https://cache.learnbrite.com/example2.png",
"https://cache.learnbrite.com/example3.png",
"https://cache.learnbrite.com/example4.png"

  1. Put them on a single line, and wrap it in square brackets

["https://cache.learnbrite.com/example1.png","https://cache.learnbrite.com/example2.png","https://cache.learnbrite.com/example3.png","https://cache.learnbrite.com/example4.png"]

Finally, we can add this to the diffuseMap field of the mediaboard, and click “Save item”.

I have the images but they are not online – where can I upload them?

You can put the images in any place that offers a public URL (Dropbox, Google Drive, imgur, etc). Alternatively, LearnBrite also offers a storage service which you can learn more about here: Storage & Files 

Videos

Note: you should avoid videos in the DASH (Dynamic Adaptive Streaming over HTTP) format. To display them (or playlists) we suggest using a popup instead.

Adding a video through the chat (“pinning”)

If you are an Editor of the 3D environment, a quick way to add videos (and any other content) is to paste the URL in the chat, send the message, and then “pin” it by clicking on the red pin icon beside the message. We have recorded a brief video showing this in action: https://youtu.be/4EmmrhRyVTs 

How to upload and play an .mp4 video as a texture in the 3d scene

This can be done by uploading the mp4 file to LearnBrite Storage, then clicking on the “World” icon on their right. This will copy the file’s global link.

Then, in the 3D environment, you can either paste the link in the chat and pin it (see “Adding a video through the chat” above) or use the “Add Mediaboard” option within the edit menu.

A quick video showing the link being copied and adding the mediaboard to the space can be found here: https://youtu.be/EspBRpyYt_M 

Using YouTube URLs

Although YouTube is great for experimental and proof of concept productions, occasionally the API may not respond. For commercial productions, we recommend using services such as Vimeo, or alternatively uploading your videos to our included platform storage.

YouTube URLs work mostly like all others URLs, with a couple of quirks:

  • To iframe YouTube videos you can't use the “watch” type URLs, as iframing is blocked by YouTube. You will need to modify the URL:

Disable suggested videos when pausing or at the end

Use the parameter

rel=0

Example

https://www.youtube.com/embed/3E7hkPZ-HTk?modestbranding=1&rel=0&autohide=1 

Using Vimeo URLs

Video Resolution

You can request a specific resolution of a vimeo video using a url parameter, this is useful for forcing faster loading/playback performance (at the expense of quality):

  • https://vimeo.com/229643605?res=2k
  • https://vimeo.com/229643605?res=1080
  • https://vimeo.com/229643605?res=4k

Privacy Settings

Be sure to check the video privacy settings are not restricting video playback.

DASH Video Format & Playlists

Some videos on Vimeo are in this format and will not play as a texture in a space, we suggest using a popup to display videos that are in DASH format or are Playlists.

If you have Vimeo Pro account you can use .mp4 and Live Streaming links as described here https://help.vimeo.com/hc/en-us/articles/224823567-Third-party-player-links

Vimeo Live

When using Vimeo Live, note that Vimeo will generate different URLs before and after the video has gone live.

If you generate an RTMP destination before the video is live, Vimeo will generate a URL that includes /event/ . However, when the video goes live, a second URL is generated that does not include the /event/ part. It’s therefore best to insert the Video in the 3D environment after the video goes live.

Video textures (MP4, YouTube, Vimeo) on IE11 (2.8+)

Video textures are not supported in IE11, so MP4, YouTube, Vimeo and other videos will not play in mediaboards or 360s. An error will be generated only when the video is triggered to play (the space can still load without issue).

Clicking a video texture to play will crash IE11 with the following error

Video Play & Pause

Identify the name of the target mediaboard by clicking the setting icon for the object. The unique name will be at the top of the popup.

E.g. Mediaboard_xo2p

Then use the scripts below using the name of your mediaboard in the video field

Using a Script to Play

LB.Actions.setVideoboardControls({videoProxy:false,video:"MEDIABOARD_NAME",videoForcePlay:true,executedFromEA:true});

Using a Script to Pause

LB.Actions.setVideoboardControls({videoProxy:false,video:"MEDIABOARD_NAME",videoForcePause:true,executedFromEA:true})

Autoplay

Some videos can be set up so that they immediately start playing when the environment has loaded. To do this,

  1. Click Edit menu, enter edit mode
  2. Hover over the mediaboard, then click on the cog icon
  3. Copy the contents of the onclick field – they should start with {"action":"setVideoboardControls"
  4. Paste them into the onstart field
  5. Click Save

Note that browsers restrict this functionality by preventing any video with sound (or audio) to play unless the user interacted with the page in some way first, e.g. with a click or tap.

Therefore, on versions 2.13 and earlier, only muted videos will be allowed to autoplay. From version 2.14 onward, if playback fails because the user has not interacted with the page a popup will be shown with a “start” button. The videos will start playing as soon as the user interacts with the page, whether they clicked on the button or dismissed it.

Setting a thumbnail

To avoid this you can use a poster parameter with the URL of the video, by adding the following to your URL: ?poster=URL_OF_IMAGE

So for instance, if your video has the URL:

https://storage.learnbrite.com/my_video.mp4

you can add a thumbnail by updating it to:

https://cache.learnbrite.com/my_video.mp4?poster=https://cache.learnbrite.com/my_image.jpg

Live Video Streaming

Twitch

If you are using Twitch, you can paste your personal Twitch URL – e.g. https://www.twitch.tv/your_twitch_username – in chat and click the pin icon or using “Add Mediaboard” through the edit menu. That will show your current broadcast in the newly created Mediaboard.

YouTube Live

YouTube Live URLs have been tested successfully. Add the URL of the live stream via chat or Add MediaBoard in the edit menu: open the edit menu, then click “Add mediaboard”, insert the URL directly in the input field at the bottom of the popup, then click “Create”.

Using your webcam

In the 3D scene

  1. Click Edit menu
  2. Click Add mediaboard icon
  3. Choose "Share screen" tab
  4. Click "Make screen share" button
  5. Click and Drag to move the screen to where you want it placed.
  6. Stop Editing, click the video icon in the chat toolbar to start live video.

Screen sharing

Screen sharing is only available to authors, editors and presenters. Participants or guests will not see this option unless you escalate their role.

Click on a screenshare mediaboard (pictured below) or the screen share icon in the chat bar at the bottom right of your screen.

Supported Browsers

Screen sharing is supported on most modern desktop browsers.

  • Chrome **
  • Firefox *
  • Safari *
  • Edge ***
  • Opera *

* Audio sharing not supported as of September 2020

** On Windows and Chrome OS the entire system audio can be captured, but on Linux and Mac only the audio of a tab can be captured.

*** On Windows and Edge OS the entire system audio can be captured, but on Linux and Mac only the audio of a tab can be captured.

Source: https://caniuse.com/#search=getDisplayMedia

Chrome Browser Sharing Options

Share Your Entire Screen

To share your screen you must click on the picture first, this will enable the Share button.

There is an option to Share audio, check the box if you would like the audio from what you are sharing to also be heard by other participants.

Share an Application Window

Click the application you would like to share, then click the Share button.

Note: Application Window sharing does not support Share audio

Share a Chrome Tab

Click on a tab to share, the Share button will become enabled then click on it.

There is an option to Share audio, check the box if you would like the audio from what you are sharing to also be heard by other participants.

Extension for Chrome (prior to version 70)

Note: Recent versions of Chrome (70 and up) do not require the use of an extension.

To share your desktop or screen with Chrome browser versions prior to 70, you will need to use the Chrome browser on a computer and install the LearnBrite Chrome extension found here: LearnBrite Screen Sharing (the latest versions of the Chrome browser does not require the extension to be installed).

How useful was this article?

Click on a star to rate it!

We are sorry that this article was not useful for you!

Let us improve this article!

Tell us how we can improve this article?