How To Add Background Image In Scene Builder

Skip to chief content

Custom Together Fashion scenes in Teams

Commodity
04/08/2022
8 minutes to read

Custom Together Mode scenes in Microsoft Teams provide an immersive and engaging meeting environment with the following deportment:

Bring people together and encourage them to turn on their video.
Combine participants digitally into a single virtual scene.
Place the participants' video streams in pre-determined seats designed and fixed by the scene creator.

In custom Together Style scenes, the scene is an artifact. The scene is created by the scene developer using the Microsoft Scene studio. In a conceived scene setting, participants have seats with video streams. The videos are rendered in those seats. Scene only apps are recommended as the feel for such apps is clear.

The following procedure gives an overview to create a scene only app:

Create scene only app

A scene just app is notwithstanding an app in Microsoft Teams. The Scene studio handles the app bundle cosmos in the background. Multiple scenes in a single app bundle appear equally a flat listing to the users.

Note

Users can't initiate Together Mode from mobile. However, afterward a user joins a coming together through mobile and Together Mode is turned on from desktop, the mobile users who have turned on the video, will appear in Together Mode on desktop.

Prerequisites

You lot must take a basic understanding of the following to use custom Together Style scenes:

Define scene and seats in a scene.
Accept a Microsoft Developer account and be familiar with the Microsoft Teams Developer Portal and App Studio.
Sympathise the concept of app sideloading.
Ensure that the Administrator has granted permission to Upload a custom app and select all filters every bit function of App Setup and Meeting policies respectively.

All-time practices

Consider the following practices for a scene edifice experience:

Ensure that all images are in PNG format.
Ensure that the final package with all the images put together must not exceed 1920x1080 resolution. The resolution is an even number. This resolution is a requirement for scenes to be shown successfully.
Ensure that the maximum scene size is ten MB.
Ensure that the maximum size of each image is v MB. A scene is a collection of multiple images. The limit is for each individual image.
Ensure to select Transparent as required. This checkbox is bachelor on the correct panel when an paradigm is selected. The overlapping images must be marked as Transparent to point that they're overlapping images in the scene.

Build a scene using the Scene studio

Microsoft has a Scene studio that allows y'all to build scenes. It'southward available on Scenes Editor - Teams Programmer Portal. This certificate refers to Scene studio in the Microsoft Teams Developer Portal. The interface and functionalities are notwithstanding in App Studio Scene Designer.

A scene in the context of the Scene studio is an antiquity that contains the following elements:

Seats reserved for coming together organizer and meeting presenters. The presenter doesn't refer to the user who is actively sharing. It refers to the meeting office.
Seat and image for each participant with an adjustable width and acme. Only PNG format is supported for the prototype.
XYZ coordinates of all the seats and images.
Collection of images that are camouflaged as one epitome.

The following image shows each seat represented as an avatar for building the scenes:

Scene studio

To build a scene using the Scene studio, follow these steps:

Become to Scenes Editor - Teams Developer Portal.

Alternately, to open up Scene studio y'all can go to the home page of Teams Developer Portal:
- Select Create custom scenes for meetings.
- Select Tools from the left-hand section, and select Scene studio from the Tools section.
In Scenes Editor, select Create a new scene.
In Scene Proper noun, enter a name for the scene.
- You can select Shut to toggle between endmost or reopening the correct pane.
- You can zoom in or zoom out of the scene using the zoom bar for a improve view of the scene.
Select Add images to add the image into the environment:
Select the image that you've added.
From the right pane, select an alignment for the paradigm or use Resize to suit the image size:
Select an area exterior of the image.
In the upper-right corner, select Participants under Layers.
Select the number of participants for the scene from the Number of participants box, and select Add. After the scene is shipped, the avatar placements are replaced with bodily participant's video streams. You can drag the images of the participants around the scene and place them in the required position. Y'all can resize them using the resize arrow.
Select any participant image, and select Assign Spot to assign the spot to the participant.
Select Coming together Organizer or Presenter part for the participant. In a meeting, ane participant must be assigned the function of a meeting organizer:
Select Save and select View in Teams to quickly test your scene in Microsoft Teams.
- Selecting View in Teams automatically creates a Microsoft Teams app that can exist viewed in the Apps folio in the Teams Developer Portal.
- Selecting View in Teams automatically creates an app parcel that is appmanifest.json behind the scene. You can go to Apps from the menu and access the automatically created app parcel.
- To delete a scene you created, select Delete scene on the elevation bar.
In View in Teams, select Preview in Teams.
In the dialog box that appears, select Add.

The scene is tested or accessed by creating a test coming together and launching custom Together Fashion scenes. For more information, see actuate custom Together Mode scenes:

The scene can then be viewed in the custom Together Mode scenes gallery.

Optionally, you can select Share from the Save drop-down carte du jour. Yous tin can create a shareable link to distribute your scenes for others to apply. The user tin open the link to install the scene and kickoff using information technology.

After preview, the scene is shipped as an app to Teams by post-obit the steps for app submission. This footstep requires the app package. The app package is different from the scene parcel, for the scene that was designed. The app package created automatically is institute in the Apps section in the Teams Developer Center.

Optionally, the scene parcel is retrieved by selecting Consign from the Relieve drop-down card. A .zip file, that is the scene package, is downloaded. Scene bundle includes a scene.json and the PNG assets used to build a scene. The scene packet is reviewed for incorporating other changes:

Export a scene

A complex scene that uses the Z-axis is demonstrated in the stride-by-footstep getting started sample.

Sample scene.json

Scene.json forth with the images bespeak the exact position of the seats. A scene consists of bitmap images, sprites, and rectangles to put participant videos in. These sprites and participant boxes are defined in a globe coordinate system. The X-axis points to the right and the Y-axis points downwards.

Custom Together Mode scenes support zooming in on the current participants. This characteristic is helpful for small meetings in a large scene. A sprite is a static bitmap image positioned in the world. The Z value of the sprite determines the position of the sprite. Rendering starts with the sprite with lowest Z value, so higher Z value means information technology's closer to the camera. Each participant has its own video feed, which is segmented so only the foreground is rendered.

The following code is the scene.json sample:

              {    "protocolVersion": "1.0",    "id": "A",    "autoZoom": true,    "mirrorParticipants ": true,    "extent":{       "left":0.0,       "peak":0.0,       "width":16.0,       "top":9.0    },    "sprites":[       {          "filename":"background.png",          "cx":8.0,          "cy":4.5,          "width":sixteen.0,          "height":ix.0,          "zOrder":0.0,    "isAlpha":faux       },       {          "filename":"table.png",          "cx":viii.0,          "cy":7.0,          "width":12.0,          "height":4.0,          "zOrder":3.0,    "isAlpha":true       },       {          "filename":"row0.png",          "cx":12.0,          "cy":15.0,          "width":viii.0,          "height":4.0,          "zOrder":2.0,    "isAlpha":truthful       }     ],    "participants":[       {          "cx":5.0,          "cy":4.0,          "width":four.0,          "superlative":two.25,          "zOrder":i.0,          "seatingOrder":0       },       {          "cx":11.0,          "cy":4.0,          "width":4.0,          "height":two.25,          "zOrder":1.0,          "seatingOrder":i       }    ] }

Each scene has a unique ID and name. The scene JSON also contains information on all the assets used for the scene. Each asset contains a filename, width, height, and position on the X and Y-axis. Similarly, each seat contains a seat ID, width, superlative, and position on the X and Y-centrality. The seating club is generated automatically and is altered as per preference. The seating order number corresponds to the order of people joining the call.

The zOrder represents the order of placing images and seats along the Z-axis. It gives a sense of depth or segmentation if necessary. Run across the step-by-step getting started sample. The sample uses the zOrder.

Now that you've gone through the sample scene.json, yous tin activate the custom Together Mode scenes to engage in scenes.

Activate custom Together Mode scenes

Get more data of how a user engages with scenes in custom Together Way scenes.

To select scenes and actuate custom Together Mode scenes, follow these steps:

Create a new examination meeting.

Note

On selecting Preview in the Scene studio, the scene is installed as an app in Microsoft Teams. This is the model for a developer to test and attempt out scenes from the Scene studio. After a scene is shipped as an app, users run across these scenes in the scene gallery.
From the Gallery drib-down in the upper-left corner, select Together Way. The Picker dialog box appears and the scene that is added is available.
Select Change scene to change the default scene.
From the Scene Gallery, select the scene you want to employ for your meeting.

Optionally, the meeting organizer and presenter can Change scene for all participants in the meeting.

Note

At any point in time, only one scene is used homogeneously for the meeting. If a presenter or organizer changes a scene, it changes for all. Switching in or out of custom Together Style scenes is up to individual participants, but while in custom Together Mode scenes, all participants take the aforementioned scene.
Select Apply. Teams installs the app for the user and applies the scene.

Open a custom Together Style scenes Scene Bundle

You lot tin can share the Scene Parcel that is a .zip file retrieved from the Scene studio to other creators to farther raise the scene. The Import a Scene functionality helps unwrap a scene parcel to let the creator continue building the scene.

Scene zip file

Feedback

Submit and view feedback for