Comment on page
DigitalSambaEmbedded class
- Using the constructor which will load immediately the specified room based on the InitOptions and the optional InstanceProperties.//instanceProperties is an optional paramconst sambaFrame = new DigitalSambaEmbedded(initOptions, instanceProperties);
- Using the
createControl
factory method. Later you can load the room by calling the load method. That way creation of the DigitalSambaEmbedded class is decoupled from the actual loading of the room which gives you more control during initialization.// notice `createControl` vs constructor callconst sambaFrame = DigitalSambaEmbedded.createControl(initOptions);// ...// when necessary, load the room in the frame// instanceProperties is optionalsambaFrame.load(instanceProperties);
root
- HTMLElement. If specified, target frame will be created as a child tag ofroot
. Otherwise the created iframe will be appended to thebody
tag of the pageframe
- HTMLIFrameElement to be wrapped. This is useful if you want the room to be loaded in aniframe
element which already exists. Ifframe
is not specified, then aniframe
element will be created automatically by the SDKurl
- full room URL to be applied as the iframe src attribute. Must include https protocol.https://
[teamNameHere]
.digitalsamba.com/
[roomNameHere]
team
- team name (string) - used if you do not want to specify theurl
manuallyroom
- room name (string) - used if you do not want to specify theurl
manuallyroomSettings
- an optional JSON object configuring the initial room settings. Read also about the possible VirtualBackgroundOptions.{//Configures if user's video device will be enabled on entering the roomvideoEnabled: boolean,//Configures if user's audio device will be enabled on entering the roomaudioEnabled: boolean,//Configures initial video and audio devices to use on entering the roommediaDevices: {videoinput: 'id of camera',audioinput: 'id of microphone',audiooutput: 'id of speaker device'},//Language for the user. Use language code - e.g. en, de, esappLanguage: string,//Configures name of the user on entering the roomusername: string,//Configures custom initials (max 2 letters) for the user tileinitials: string,//Configures if 'auto' or 'tiled' layout mode will be usedlayoutMode: string,//Configures if the toolbar will be visible or notshowToolbar: boolean,//Configures if the captions panel will be visible or notshowCaptions: boolean,//Configures the virtual backgroundvirtualBackground: VirtualBackgroundOptions,//Configures if the frame will be muted on join for the local usermuteFrame: boolean}
The following combinations of fields are valid for initOptions (token and roomSettings can be used with any of them):
url
- will create a frame as a child of thebody
tag and load the room urlurl + root
- will create a frame as a child ofroot
element and load the room urlurl + frame
- will load the room url in the provided existing frameteam + room
- will create a frame as a child of thebody
tag and load the specified roomteam + room + root
- will create a frame insideroot
element and load the specified roomteam + room + frame
- will load the specified room in the provided existing frameframe
- will attach to the specified existing frame (assuming you've manually set correct room url as the iframe src)
frameAttributes
- list of attributes to be applied to the target iframereportErrors
- boolean, false by default. Whether to report misconfiguration or runtime errors to the browser console
1
//SDK will create a frame as a child of the body tag and load the room url
2
import DigitalSambaEmbedded from '@digitalsamba/embedded-sdk';
3
const roomUrl = 'https://[TEAM_NAME_HERE].digitalsamba.com/[ROOM_NAME_HERE]';
4
const sambaFrame = DigitalSambaEmbedded.createControl({
5
url: roomUrl,
6
//Optional room settings
7
/*roomSettings: {
8
username: 'John Smith'
9
layoutMode: 'auto',
10
virtualBackground: { blur: 'balanced' },
11
.....................
12
},*/
13
//token: TOKEN_HERE_IF_YOU_ARE_USING_IT
14
});
15
sambaFrame.load();
1
//SDK will create a frame as a child of the parent element and load the room url
2
import DigitalSambaEmbedded from '@digitalsamba/embedded-sdk';
3
const parentElement = document.querySelector('USE_CSS_SELECTOR_HERE');
4
const roomUrl = 'https://[TEAM_NAME_HERE].digitalsamba.com/[ROOM_NAME_HERE]';
5
const sambaFrame = DigitalSambaEmbedded.createControl({
6
url: roomUrl,
7
root: parentElement,
8
//token: TOKEN_HERE_IF_YOU_ARE_USING_IT
9
});
10
sambaFrame.load();
1
//SDK will load the room url in the specified existing iframe
2
import DigitalSambaEmbedded from '@digitalsamba/embedded-sdk';
3
const existingIFrame = document.querySelector('USE_CSS_SELECTOR_HERE');
4
const roomUrl = 'https://[TEAM_NAME_HERE].digitalsamba.com/[ROOM_NAME_HERE]';
5
const sambaFrame = DigitalSambaEmbedded.createControl({
6
url: roomUrl,
7
frame: existingIFrame,
8
//token: TOKEN_HERE_IF_YOU_ARE_USING_IT
9
});
10
sambaFrame.load();
1
//SDK will create a frame as a child of the body tag and load the specified room
2
import DigitalSambaEmbedded from '@digitalsamba/embedded-sdk';
3
const teamName = 'TEAM_NAME_HERE';
4
const roomName = 'ROOM_NAME_HERE';
5
const sambaFrame = DigitalSambaEmbedded.createControl({
6
team: teamName,
7
room: roomName,
8
//token: TOKEN_HERE_IF_YOU_ARE_USING_IT
9
});
10
sambaFrame.load();
1
//SDK will create a frame as a child of the parent element and load the room
2
import DigitalSambaEmbedded from '@digitalsamba/embedded-sdk';
3
const parentElement = document.querySelector('USE_CSS_SELECTOR_HERE');
4
const teamName = 'TEAM_NAME_HERE';
5
const roomName = 'ROOM_NAME_HERE';
6
const sambaFrame = DigitalSambaEmbedded.createControl({
7
team: teamName,
8
room: roomName,
9
root: parentElement,
10
//token: TOKEN_HERE_IF_YOU_ARE_USING_IT
11
});
12
sambaFrame.load();
1
//SDK will load the room in the specified existing frame
2
import DigitalSambaEmbedded from '@digitalsamba/embedded-sdk';
3
const existingIFrame = document.querySelector('USE_CSS_SELECTOR_HERE');
4
const teamName = 'TEAM_NAME_HERE';
5
const roomName = 'ROOM_NAME_HERE';
6
const sambaFrame = DigitalSambaEmbedded.createControl({
7
team: teamName,
8
room: roomName,
9
frame: existingIFrame,
10
//token: TOKEN_HERE_IF_YOU_ARE_USING_IT
11
});
12
sambaFrame.load();
1
//SDK will attach to the specified existing frame
2
//Assuming you've manually preset correct room url as the iframe src
3
import DigitalSambaEmbedded from '@digitalsamba/embedded-sdk';
4
const existingIFrame = document.querySelector('USE_CSS_SELECTOR_HERE');
5
const sambaFrame = DigitalSambaEmbedded.createControl({
6
frame: existingIFrame,
7
//token: TOKEN_HERE_IF_YOU_ARE_USING_IT
8
});
9
sambaFrame.load();
1
import DigitalSambaEmbedded from '@digitalsamba/embedded-sdk';
2
const roomUrl = 'https://[TEAM_NAME_HERE].digitalsamba.com/[ROOM_NAME_HERE]';
3
const sambaFrame = DigitalSambaEmbedded.createControl({ url: roomUrl });
4
5
//SDK will put a 5px solid red border around the iframe
6
const instanceProps = {
7
frameAttributes: {style: "border: 5px solid red"},
8
reportErrors: true
9
};
10
sambaFrame.load(instanceProps);
Last modified 2mo ago