-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #10 from dyte-in/feat/WEB-3445-symbl-custom-connec…
…tionId-userId feat(custom-connectionId-userId): WEB-3445 added support for custom connectionId, userId along with some fixes
- Loading branch information
Showing
12 changed files
with
699 additions
and
696 deletions.
There are no files selected for viewing
This file contains 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
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| import DyteClient from '@dytesdk/web-core'; | ||
| import { defineCustomElements } from '@dytesdk/ui-kit/loader/index.es2017'; | ||
| import { | ||
| activateTranscriptions, | ||
| addTranscriptionsListener, | ||
| deactivateTranscriptions, | ||
| removeTranscriptionsListener, | ||
| } from '../src/index'; | ||
|
|
||
| defineCustomElements(); | ||
|
|
||
| const init = async () => { | ||
| try { | ||
| const params = new URLSearchParams(window.location.search); | ||
| const roomName = params.get('roomName') || ''; | ||
| const authToken = params.get('authToken') || ''; | ||
| const symblAccessToken = params.get('symblAccessToken') || ''; | ||
|
|
||
| if (!authToken || (roomName && !authToken)) { | ||
| alert('Please pass authToken (and roomName, if you are using v1 APIs) in query params'); | ||
| return; | ||
| } | ||
| if (!symblAccessToken) { | ||
| alert('Please pass symblAccessToken in query params'); | ||
| return; | ||
| } | ||
|
|
||
| const meeting = await DyteClient.init({ | ||
| authToken, | ||
| roomName, | ||
| apiBase: 'https://api.dyte.io', | ||
| defaults: { | ||
| audio: false, | ||
| video: false, | ||
| }, | ||
| }); | ||
|
|
||
| (document.getElementById('my-meeting') as any).meeting = meeting; | ||
| Object.assign(window, { meeting }); | ||
|
|
||
| // Initialize speech client | ||
| await activateTranscriptions({ | ||
| meeting, | ||
| languageCode: 'en-US', | ||
| symblAccessToken, | ||
| }); | ||
|
|
||
| await addTranscriptionsListener({ | ||
| meeting, | ||
| noOfTranscriptionsToCache: 200, | ||
| transcriptionsCallback: (transcriptions) => { | ||
| const transcription = document.getElementById('dyte-transcriptions') as HTMLDivElement; | ||
| const list = transcriptions.slice(-3); | ||
| transcription.innerHTML = ''; | ||
| list.forEach((item) => { | ||
| const speaker = document.createElement('span'); | ||
| speaker.classList.add('dyte-transcription-speaker'); | ||
| speaker.innerText = `${item.displayName}: `; | ||
|
|
||
| const text = document.createElement('span'); | ||
| text.classList.add('dyte-transcription-text'); | ||
| text.innerText = item.text.toString().trim() !== '' ? item.text.toString().trim() : '...'; | ||
|
|
||
| const container = document.createElement('span'); | ||
| container.classList.add('dyte-transcription-line'); | ||
| container.appendChild(speaker); | ||
| container.appendChild(text); | ||
|
|
||
| transcription.appendChild(container); | ||
| }); | ||
| }, | ||
| }); | ||
|
|
||
| meeting.self.on('roomLeft', () => { | ||
| const transcriptionsDiv = document.getElementById('dyte-transcriptions') as HTMLDivElement; | ||
| transcriptionsDiv.innerHTML = ''; | ||
| deactivateTranscriptions({ meeting }); | ||
| removeTranscriptionsListener({ meeting }); | ||
| }); | ||
| } catch (e) { | ||
| console.log(e); | ||
| } | ||
| }; | ||
|
|
||
| init(); |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,109 +1,44 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <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.js"></script> | ||
| <script type="module" src="/src/index.ts"></script> | ||
| <style> | ||
| #dyte-transcriptions{ | ||
| position: absolute; | ||
| bottom: 15%; | ||
| left: 25%; | ||
| background-color: black; | ||
| opacity: 0.7; | ||
| width: auto; | ||
| padding: 10px 10px; | ||
| max-width: 50%; | ||
| min-width: 10%; | ||
| } | ||
| .dyte-transcription-line{ | ||
| display: block; | ||
| } | ||
| .dyte-transcription-speaker{ | ||
| font-weight: bold; | ||
| color: white; | ||
| } | ||
| .dyte-transcription-text{ | ||
| color: white; | ||
| font-weight: normal; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <dyte-meeting id="my-meeting"></dyte-meeting> | ||
| <div id="dyte-transcriptions"></div> | ||
| <script> | ||
| const params = new Proxy(new URLSearchParams(window.location.search), { | ||
| get: (searchParams, prop) => searchParams.get(prop), | ||
| }); | ||
|
|
||
| function transcriptionsListenerCB(transcriptions) { | ||
| const transcriptionsDiv = document.getElementById('dyte-transcriptions'); | ||
|
|
||
| if (transcriptionsDiv) { | ||
| transcriptionsDiv.innerHTML = ''; | ||
| transcriptionsDiv.classList.remove('hidden'); | ||
|
|
||
| const transcriptionsToShow = transcriptions.slice(-3); | ||
|
|
||
| transcriptionsToShow.forEach((transcription) => { | ||
| const speakerSpan = document.createElement('span'); | ||
| speakerSpan.classList.add('dyte-transcription-speaker'); | ||
| speakerSpan.innerText = `${transcription.displayName}: `; | ||
|
|
||
| const transcriptionSpan = document.createElement('span'); | ||
| transcriptionSpan.classList.add('dyte-transcription-text'); | ||
| transcriptionSpan.innerText = transcription.text?.toString(); | ||
|
|
||
| const transcriptionLine = document.createElement('span'); | ||
| transcriptionLine.classList.add('dyte-transcription-line'); | ||
| transcriptionLine.appendChild(speakerSpan).appendChild(transcriptionSpan); | ||
|
|
||
| transcriptionsDiv.appendChild(transcriptionLine); | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| const init = async () => { | ||
| if(!params.authToken || (params.roomName && !params.authToken)){ | ||
| alert("Please pass authToken (and roomName, if you are using v1 APIs) in query params"); | ||
| return; | ||
| } | ||
| if(!params.symblAccessToken){ | ||
| alert("Please pass symblAccessToken in query params"); | ||
| return; | ||
| } | ||
| const meeting = await DyteClient.init({ | ||
| authToken: params.authToken, | ||
| roomName: params.roomName, | ||
| defaults: { | ||
| audio: true, | ||
| video: false, | ||
| }, | ||
| }); | ||
|
|
||
| document.getElementById('my-meeting').meeting = meeting; | ||
| Symbl.activateTranscriptions({ | ||
| meeting: meeting, // From DyteClient.init | ||
| symblAccessToken: params.symblAccessToken | ||
| }); | ||
| await Symbl.addTranscriptionsListener({ | ||
| meeting: meeting, | ||
| noOfTranscriptionsToCache: 200, | ||
| transcriptionsCallback: transcriptionsListenerCB, | ||
| }); | ||
| meeting.self.on('roomLeft', () => { | ||
| const transcriptionsDiv = document.getElementById('dyte-transcriptions') | ||
| transcriptionsDiv.innerHTML = ''; | ||
| transcriptionsDiv.classList.add('hidden'); | ||
| Symbl.deactivateTranscriptions({ meeting }); | ||
| }); | ||
| }; | ||
| init(); | ||
| </script> | ||
| </body> | ||
| <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>Transcription Demo</title> | ||
| <style> | ||
| body { | ||
| height: 100vh; | ||
| width: 100vw; | ||
| } | ||
|
|
||
| #dyte-transcriptions{ | ||
| position: absolute; | ||
| z-index: 99999; | ||
| bottom: 15%; | ||
| width: 100%; | ||
| display:flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items:center; | ||
| } | ||
|
|
||
| .dyte-transcription-line{ | ||
| display: block; | ||
| max-width: 80%; | ||
| text-align: center !important; | ||
| } | ||
| .dyte-transcription-speaker{ | ||
| font-weight: 500; | ||
| color: orange; | ||
| } | ||
| .dyte-transcription-text{ | ||
| color: white; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <dyte-meeting id="my-meeting" show-setup-screen="false"></dyte-meeting> | ||
| <div id="dyte-transcriptions"></div> | ||
| <script type="module" src="./demo/index.ts"></script> | ||
| </body> | ||
| </html> |
Oops, something went wrong.