Last active
January 17, 2024 09:16
-
-
Save Tushkiz/2e965176e4f27c7105c2c78bc5387413 to your computer and use it in GitHub Desktop.
Dyte Video Background in vanilla html
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Virtual Background Addons | Dyte UI Kit</title> | |
| <!-- Import helper to load UI Kit components --> | |
| <script type="module"> | |
| import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/@dytesdk/[email protected]/loader/index.es2017.js'; | |
| defineCustomElements(); | |
| </script> | |
| <!-- Import Web Core via CDN too --> | |
| <script src="https://cdn.dyte.in/core/dyte-1.20.0.js"></script> | |
| <!-- Video Background Transformer --> | |
| <script src="https://cdn.jsdelivr.net/npm/@dytesdk/video-background-transformer/dist/index.iife.js"></script> | |
| </head> | |
| <body> | |
| <dyte-meeting id="my-meeting" show-setup-screen="true" /> | |
| <script type="module"> | |
| import VideoBackgroundAddon from 'https://cdn.jsdelivr.net/npm/@dytesdk/[email protected]/dist/video-background.js'; | |
| import { registerAddons } from 'https://cdn.jsdelivr.net/npm/@dytesdk/[email protected]/dist/index.js'; | |
| const videoBackground = new VideoBackgroundAddon({ | |
| modes: ["blur", "virtual"], | |
| 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 searchParams = new URL(window.location.href).searchParams; | |
| const authToken = searchParams.get('authToken'); | |
| if (!authToken) { | |
| alert( | |
| "An authToken wasn't passed, please pass an authToken in the URL query to join a meeting." | |
| ); | |
| } | |
| // Initialize a meeting | |
| DyteClient.init({ | |
| authToken, | |
| }).then(async (meeting) => { | |
| document.getElementById('my-meeting').meeting = meeting; | |
| document.getElementById('my-meeting').config = registerAddons([videoBackground], meeting); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment