Merge pull request #215 from sharifrahaman/main

One click login and join meeting
Azure-Samples · Jan 31, 2024 · d67ccea · d67ccea
2 parents 0a8629a + 6b80e70
commit d67ccea
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 4 deletions.
diff --git a/Project/src/Constants.js b/Project/src/Constants.js
@@ -0,0 +1,7 @@
+export const URL_PARAM = {
+    DISPLAY_NAME: 'dn',
+    MEETING_LINK: 'ml',
+    VIDEO: 'video',
+    MIC: 'mic',
+    ON: 'on'
+}
diff --git a/Project/src/MakeCall/Login.js b/Project/src/MakeCall/Login.js
@@ -10,14 +10,18 @@ import OneSignal from "react-onesignal";
 import config from '../../clientConfig.json';
 import { TurnConfiguration } from './NetworkConfiguration/TurnConfiguration';
 import { ProxyConfiguration } from './NetworkConfiguration/ProxyConfiguration';
+import { URL_PARAM } from "../Constants";
 
 export default class Login extends React.Component {
     constructor(props) {
         super(props);
         this.callAgent = undefined;
         this.callClient = undefined;
         this.userDetailsResponse = undefined;
-        this.displayName = undefined;
+
+        // Set display name from the URL
+        const params = new URLSearchParams(window.location.search);
+        this.displayName = params.get(URL_PARAM.DISPLAY_NAME) === null ? undefined : params.get(URL_PARAM.DISPLAY_NAME);
         this.clientTag = uuid();
         this.isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
         this._callAgentInitPromise = undefined;
@@ -693,7 +697,7 @@ const isSupportedEnvironment = this.environmentInfo.isSupportedEnvironment;
                                                 <div className="ms-Grid-row">
                                                     <div className="ms-Grid-col ms-sm12 ms-md12 ms-lg9 ms-xl9 ms-xxl9">
                                                         <TextField
-                                                                defaultValue={undefined}
+                                                                defaultValue={this.displayName}
                                                                 placeholder="Display Name"
                                                                 label="Optional - Display name"
                                                                 onChange={(e) => { this.displayName = e.target.value }}/>

diff --git a/Project/src/MakeCall/MakeCall.js b/Project/src/MakeCall/MakeCall.js
@@ -15,6 +15,7 @@ import Login from './Login';
 import MediaConstraint from './MediaConstraint';
 import { setLogLevel, AzureLogger } from '@azure/logger';
 import { inflate } from 'pako';
+import { URL_PARAM } from "../Constants";
 export default class MakeCall extends React.Component {
     constructor(props) {
         super(props);
@@ -88,6 +89,19 @@ export default class MakeCall extends React.Component {
             }
         };
     }
+
+    autoJoinMeetingByMeetingLink = () => {
+        if (this.state.loggedIn) {
+            const params = new URLSearchParams(window.location.search);
+            if (params.get(URL_PARAM.MEETING_LINK)) {
+                const videoOn = params.get(URL_PARAM.VIDEO) && params.get(URL_PARAM.VIDEO).toLocaleLowerCase() === URL_PARAM.ON ? true : false;
+                const micMuted = params.get(URL_PARAM.MIC) && params.get(URL_PARAM.MIC).toLocaleLowerCase() === URL_PARAM.ON ? false : true;
+                this.joinTeamsMeeting(videoOn, micMuted);
+                // Remove the search params from the URL
+                window.history.replaceState({}, document.title, "/");
+            }
+        }
+    }
 
     handleMediaConstraint = (constraints) => {
         if (constraints.video) {
@@ -176,6 +190,7 @@ export default class MakeCall extends React.Component {
                 this.setState({ loggedIn: true });
                 this.logInComponentRef.current.setCallAgent(this.callAgent);
                 this.logInComponentRef.current.setCallClient(this.callClient);
+                this.autoJoinMeetingByMeetingLink();
             } catch (e) {
                 console.error(e);
             }
@@ -307,9 +322,9 @@ export default class MakeCall extends React.Component {
         }
     };
 
-    joinTeamsMeeting = async (withVideo) => {
+    joinTeamsMeeting = async (withVideo, micMuted = false) => {
         try {
-            const callOptions = await this.getCallOptions({video: withVideo, micMuted: false});
+            const callOptions = await this.getCallOptions({video: withVideo, micMuted: micMuted});
             if (this.meetingLink.value && !this.messageId.value && !this.threadId.value && this.tenantId && this.organizerId) {
                 this.callAgent.join({ meetingLink: this.meetingLink.value }, callOptions);
             } else if (this.meetingId.value  || this.passcode.value && !this.meetingLink.value && !this.messageId.value && !this.threadId.value && this.tenantId && this.organizerId) {
@@ -918,6 +933,7 @@ this.deviceManager.on('selectedSpeakerChanged', () => { console.log(this.deviceM
                                                         className="mb-3 mt-0"
                                                         disabled={this.state.call || !this.state.loggedIn}
                                                         label="Meeting link"
+                                                        defaultValue={new URLSearchParams(window.location.search).get(URL_PARAM.MEETING_LINK) ?? ''}
                                                         componentRef={(val) => this.meetingLink = val} />
                                                 </div>
                                                 <div className={this.state.call || !this.state.loggedIn ? "call-input-panel-input-label-disabled" : ""}>