-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
115 lines (101 loc) · 5.58 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"
/>
<title>Dyte UI Kit Addons</title>
<script src="https://cdn.dyte.in/core/dyte-2.2.0.js"></script>
</head>
<body>
<div id="root">
<dyte-meeting id="meeting"></dyte-meeting>
</div>
<script type="module">
import { defineCustomElements } from "https://cdn.jsdelivr.net/npm/@dytesdk/ui-kit@2.1.3/loader/index.es2017.js";
import { registerAddons } from "https://cdn.jsdelivr.net/npm/@dytesdk/ui-kit@2.1.3/dist/esm/index.js";
// Import addons
import DyteVideoBackground from "/src/video-background/index.ts";
import ParticipantsTabAction from "/src/participants-tab-action/index.ts";
import HandRaise from "/src/hand-raise/index.ts";
import ChatHostControl from "/src/chat-host-control/index.ts";
import MicHostControl from "/src/mic-host-control/index.ts";
import CameraHostControl from "/src/camera-host-control/index.ts";
import ParticipantTileMenu from "/src/participant-tile-menu/index.ts";
defineCustomElements();
async function dyteSetupMeetingAndAddons(authToken) {
const meetingRef = document.getElementById("meeting");
const url = new URL(window.location.href);
authToken = authToken || url.searchParams.get("authToken");
if (!authToken) {
alert("Please provide an authToken in the URL");
return;
}
const videoBackground = new DyteVideoBackground({
modes: ["blur", "virtual"],
blurStrength: 50, // 0 - 100 for opacity
images: [
"https://images.unsplash.com/photo-1487088678257-3a541e6e3922?q=80&w=2874&auto=format&fit=crop&ixlib=rb-4.0.3",
"https://images.unsplash.com/photo-1496715976403-7e36dc43f17b?q=80&w=2848&auto=format&fit=crop&ixlib=rb-4.0.3",
"https://images.unsplash.com/photo-1600431521340-491eca880813?q=80&w=2938&auto=format&fit=crop&ixlib=rb-4.0.3"
]
});
const tabAction = new ParticipantsTabAction({
onClick: () => {
alert("Clicked!");
},
label: "Click me",
position: "start"
});
const participantMenu = new ParticipantTileMenu([{
label: "Custom Toggle",
onClick: (participantId) => {
console.log('Clicked on custom toggle for ', participantId);
}
}], 'top-right');
const meeting = await DyteClient.init({ authToken, modules: {
devTools: {
logs: true
}}});
window.meeting = meeting;
const handRaise = await HandRaise.init({
meeting,
canRaiseHand: true,
canManageRaisedHand: true,
handRaiseIcon: '<svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M4 12.02c0 1.06.2 2.1.6 3.08l.6 1.42c.22.55.64 1.01 1.17 1.29.27.14.56.21.86.21h2.55c.77 0 1.49-.41 1.87-1.08.5-.87 1.02-1.7 1.72-2.43l1.32-1.39c.44-.46.97-.84 1.49-1.23l.59-.45a.6.6 0 0 0 .23-.47c0-.75-.54-1.57-1.22-1.79a3.34 3.34 0 0 0-2.78.29V4.5a1.5 1.5 0 0 0-2.05-1.4 1.5 1.5 0 0 0-2.9 0A1.5 1.5 0 0 0 6 4.5v.09A1.5 1.5 0 0 0 4 6v6.02ZM8 4.5v4a.5.5 0 0 0 1 0v-5a.5.5 0 0 1 1 0v5a.5.5 0 0 0 1 0v-4a.5.5 0 0 1 1 0v6a.5.5 0 0 0 .85.37h.01c.22-.22.44-.44.72-.58.7-.35 2.22-.57 2.4.5l-.53.4c-.52.4-1.04.78-1.48 1.24l-1.33 1.38c-.75.79-1.31 1.7-1.85 2.63-.21.36-.6.58-1.01.58H7.23a.87.87 0 0 1-.4-.1 1.55 1.55 0 0 1-.71-.78l-.59-1.42a7.09 7.09 0 0 1-.53-2.7V6a.5.5 0 0 1 1 0v3.5a.5.5 0 0 0 1 0v-5a.5.5 0 0 1 1 0Z" fill="#ff0000"></path></svg>'
});
const chatHostControl = await ChatHostControl.init({
meeting,
hostPresets: ['webinar_presenter'],
targetPresets: ['webinar_viewer'],
addActionInParticipantMenu: true,
userBlockType: 'TEMPORARY',
});
const micHostControl = await MicHostControl.init({
meeting,
hostPresets: ['webinar_presenter'],
targetPresets: ['webinar_viewer'],
addActionInParticipantMenu: true,
});
const cameraHostControl = await CameraHostControl.init({
meeting,
hostPresets: ['webinar_presenter'],
targetPresets: ['webinar_viewer'],
addActionInParticipantMenu: true,
});
const config = await registerAddons(
[handRaise, chatHostControl, micHostControl, cameraHostControl, videoBackground, tabAction, participantMenu],
meeting
);
meetingRef.meeting = meeting;
meetingRef.config = config;
};
window.dyteSetupMeetingAndAddons = dyteSetupMeetingAndAddons;
window.onload = () => {
dyteSetupMeetingAndAddons();
};
</script>
</body>
</html>