Skip to content

Commit

Permalink
Allow stubbing join info to enable easy cross account joining from br…
Browse files Browse the repository at this point in the history 
…owser demo (#2511) (#2934)
  • Loading branch information
@hensmi-amazon
hensmi-amazon authored Aug 16, 2024
1 parent bec2e70 commit ce73c3d
Show file tree
Hide file tree
Showing 6 changed files with 3,571 additions and 2,525 deletions.
66 changes: 65 additions & 1 deletion demos/browser/app/meetingV2/meetingV2.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ <h5 class="modal-title" id="additional-options-modal-label">Additional Options</
<input type="checkbox" id="join-muted" class="form-check-input"></input>
<label for="join-muted-setting" class="form-check-label">Join Muted</label>
</div>
<div class="form-check" style="text-align: left;">
<div class="form-check" style="text-align: left;">
<input type="checkbox" id="webaudio" class="form-check-input">
<label for="webaudio" class="form-check-label">Use WebAudio</label>
</div>
Expand Down Expand Up @@ -264,11 +264,75 @@ <h5 class="modal-title" id="additional-options-modal-label">Additional Options</
</div>
</fieldset>
</div>
<button type="button" class="btn btn-outline-secondary mb-3" data-bs-toggle="modal" data-bs-target="#join-info-override-modal">Override Join Info</button>
<button type="button" class="btn btn-primary" data-bs-dismiss="modal" id="additional-options-save-button">Save</button>
</div>
</div>
</div>

<div class="modal fade" id="join-info-override-modal" tabindex="-1" aria-labelledby="join-info-override-modal-label"
aria-hidden="true">
<div class="modal-dialog modal-lg" style="width: 90%">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="join-info-override-modal-label">Join Info Override</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Use the following overrides to enable joining meetings created from services that do not utilize the
serverless demo, for example, meetings created for your application, or meetings created in
different accounts. To get these response you can use the following CLI commands with appropriate
credentials</p>
<ul>
<li>
<code>aws chime-sdk-meetings create-attendee --meeting-id &lt;value&gt; --external-user-id &lt;value&gt; --region &lt;region&gt;</code>
</li>
<li><code>aws chime-sdk-meetings get-meeting --meeting-id &lt;value&gt; --region &lt;region&gt;</code></li>
</ul>
<div class="form-group">
<label for="create-attendee-override-input" class="mb-2">
<h6><a href="https://docs.aws.amazon.com/chime/latest/APIReference/API_CreateAttendee.html">
CreateAttendee</a> Override</h6>
</label>
<textarea class="form-control" id="create-attendee-override-input" rows="7" placeholder='{
"Attendee": {
"ExternalUserId": "John",
"AttendeeId": "18ba3ce2-9d76-722f-6b58-2c2fe0db5c94",
"JoinToken": "..."
}
}
'></textarea>
<div class="form-group">
<label for="get-meeting-override-input" class="mb-2 mt-3">
<h6><a href="https://docs.aws.amazon.com/chime/latest/APIReference/API_GetMeeting.html">
GetMeeting</a> Override</h6>
</label>
<textarea class="form-control" id="get-meeting-override-input" rows="17" placeholder='{
"Meeting": {
"MeetingId": "35f23a2b-c4d7-413f-a299-2b1dc3f63314",
"ExternalMeetingId": "f7f76d4a-08ba-4001-8900-2b3fba4b6b3f",
"MediaRegion": "us-east-1",
"MediaPlacement": {
"AudioHostUrl": "...",
"AudioFallbackUrl": "...",
"SignalingUrl": "...",
"TurnControlUrl": "...",
"ScreenDataUrl": "...",
"ScreenViewingUrl": "...",
"ScreenSharingUrl": "...",
"EventIngestionUrl": "..."
}
}
}'></textarea>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" data-bs-dismiss="modal" id="join-info-override-join-button">Join
Meeting</button>
</div>
</div>
</div>

<!-- Authenticate for SIP with meeting and voice connector ID -->

<div id="flow-sip-authenticate" class="flow text-center">
Expand Down
42 changes: 37 additions & 5 deletions demos/browser/app/meetingV2/meetingV2.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@ import { getPOSTLogger } from './util/MeetingLogger';
import Roster from './component/Roster';
import ContentShareManager from './component/ContentShareManager';
import { AudioBufferMediaStreamProvider, SynthesizedStereoMediaStreamProvider } from './util/mediastreamprovider/DemoMediaStreamProviders';

import { BackgroundImageEncoding } from './util/BackgroundImage';

let SHOULD_EARLY_CONNECT = (() => {
Expand Down Expand Up @@ -275,7 +276,7 @@ export class DemoMeetingApp

attendeeIdPresenceHandler: (undefined | ((attendeeId: string, present: boolean, externalUserId: string, dropped: boolean) => void)) = undefined;
activeSpeakerHandler: (undefined | ((attendeeIds: string[]) => void)) = undefined;
volumeIndicatorHandler: (undefined | ((attendeeId: string, volume: number, muted: boolean, signalStrength: number) => void)) = undefined;
volumeIndicatorHandler: (undefined | ((attendeeId: string, volume: number, muted: boolean, signalStrength: number) => void)) = undefined;
canUnmuteLocalAudioHandler: (undefined | ((canUnmute: boolean) => void)) = undefined;
muteAndUnmuteLocalAudioHandler: (undefined | ((muted: boolean) => void)) = undefined;
blurObserver: (undefined | BackgroundBlurVideoFrameProcessorObserver) = undefined;
Expand Down Expand Up @@ -378,6 +379,7 @@ export class DemoMeetingApp
voiceFocusTransformer: VoiceFocusDeviceTransformer | undefined;
voiceFocusDevice: VoiceFocusTransformDevice | undefined;
joinInfo: any | undefined;
joinInfoOverride: any | undefined = undefined;
deleteOwnAttendeeToLeave = false;
disablePeriodicKeyframeRequestOnContentSender = false;
allowAttendeeCapabilities = false;
Expand Down Expand Up @@ -519,6 +521,17 @@ export class DemoMeetingApp
} else {
(document.getElementById('inputMeeting') as HTMLInputElement).focus();
}

if (new URL(window.location.href).searchParams.has('join-info-override')) {
const joinInfoOverride = JSON.parse(new URL(window.location.href).searchParams.get('join-info-override'));
(document.getElementById('create-attendee-override-input') as HTMLTextAreaElement).value = JSON.stringify(joinInfoOverride.JoinInfo.Attendee, null, 4);
(document.getElementById('get-meeting-override-input') as HTMLTextAreaElement).value = JSON.stringify(joinInfoOverride.JoinInfo.Meeting, null, 4);
new Modal(document.getElementById('join-info-override-modal'), {}).show();

document.getElementById('join-info-override-join-button').addEventListener('click', () => {
this.isViewOnly = (document.getElementById('join-view-only') as HTMLInputElement).checked;
});
}
}

async initVoiceFocus(): Promise<void> {
Expand Down Expand Up @@ -700,6 +713,11 @@ export class DemoMeetingApp
this.redirectFromAuthentication(true);
});

document.getElementById('join-info-override-join-button').addEventListener('click', e => {
e.preventDefault();
this.redirectFromAuthentication(true);
});

document.getElementById('form-authenticate').addEventListener('submit', e => {
e.preventDefault();
this.redirectFromAuthentication();
Expand Down Expand Up @@ -3460,7 +3478,7 @@ export class DemoMeetingApp
}

async authenticate(): Promise<string> {
this.joinInfo = (await this.sendJoinRequest(
this.joinInfo = this.joinInfoOverride ? this.joinInfoOverride.JoinInfo : (await this.sendJoinRequest(
this.meeting,
this.name,
this.region,
Expand Down Expand Up @@ -3640,7 +3658,7 @@ export class DemoMeetingApp

audioVideoDidStop(sessionStatus: MeetingSessionStatus): void {
this.log(`session stopped from ${JSON.stringify(sessionStatus)}`);
if(this.behaviorAfterLeave === 'nothing') {
if (this.behaviorAfterLeave === 'nothing') {
return;
}
this.log(`resetting stats`);
Expand Down Expand Up @@ -3940,6 +3958,20 @@ export class DemoMeetingApp
this.enableSimulcast = false;
}

const createAttendeeOverride = (document.getElementById('create-attendee-override-input') as HTMLTextAreaElement).value;
const getMeetingOverride = (document.getElementById('get-meeting-override-input') as HTMLTextAreaElement).value;
if (createAttendeeOverride.length !== 0 && getMeetingOverride.length !== 0) {
this.joinInfoOverride = {
JoinInfo: {
Meeting: JSON.parse(getMeetingOverride),
Attendee: JSON.parse(createAttendeeOverride),
}
};
this.meeting = this.joinInfoOverride.JoinInfo.Meeting.Meeting.ExternalMeetingId;
this.name = this.joinInfoOverride.JoinInfo.Attendee.Attendee.ExternalUserId;
this.region = this.joinInfoOverride.JoinInfo.Meeting.Meeting.MediaRegion;
}

const chosenContentSendCodec = (document.getElementById('contentCodecSelect') as HTMLSelectElement).value;
this.contentCodecPreferences = getCodecPreferences(chosenContentSendCodec);

Expand Down Expand Up @@ -4020,9 +4052,9 @@ export class DemoMeetingApp
}
this.audioVideo.setVideoMaxBandwidthKbps(this.maxBitrateKbps);

// `this.primaryExternalMeetingId` may by the join request
// `this.primaryExternalMeetingId` may by set by the join request. Not relevant with overriden info.
const buttonPromoteToPrimary = document.getElementById('button-promote-to-primary');
if (!this.primaryExternalMeetingId) {
if (!this.primaryExternalMeetingId || this.joinInfoOverride !== undefined) {
buttonPromoteToPrimary.style.display = 'none';
} else {
this.setButtonVisibility('button-record-cloud', false);
Expand Down
4 changes: 4 additions & 0 deletions demos/browser/app/meetingV2/styleV2.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1016,6 +1016,10 @@ a.markdown:active {
max-width: 480px;
}

#join-info-override-modal .modal-content {
max-width: 600px;
}

.modal-content-header {
display: flex;
flex-direction: row;
Expand Down
Loading

0 comments on commit ce73c3d

Please sign in to comment.