I want to thank the team for providing everyone with this amazing resource in the first place.
In my application, I used the @videosdk.live/js-sdk package. It runs smoothly on the web and Android but not in the iOS apps.
I'm having trouble with the join meeting(join()) function because I'm not receiving a response from the "meeting-joined" event; instead, I'm getting a "meeting-left" event only in iOS apps.
startMeeting() {
this.initMeeting();
this.meeting.join();
this.handleMeetingEvents(this.meeting);
const showJoinScreenMessage = this.renderer.createElement('div');
this.renderer.setAttribute(
showJoinScreenMessage,
'id',
'show-join-screen-message'
);
this.renderer.setProperty(
showJoinScreenMessage,
'innerHTML',
'Please wait to join meeting...'
);
this.renderer.setStyle(showJoinScreenMessage, 'color', 'black');
this.renderer.setStyle(showJoinScreenMessage, 'fontSize', '20px');
this.renderer.setStyle(showJoinScreenMessage, 'fontWeight', 'bold');
this.renderer.setStyle(showJoinScreenMessage, 'marginTop', '20px');
this.renderer.setStyle(showJoinScreenMessage, 'marginLeft', '20px');
this.renderer.appendChild(document.body, showJoinScreenMessage);
}
async initMeeting() {
this.showParticipantNameError = false;
VideoSDK.config(meetingToken);
this.meeting = VideoSDK.initMeeting({
meetingId: this.meetingId,
name: this.participantName,
micEnabled: true,
webcamEnabled: true,
maxResolution: 'hd',
});
}
handleMeetingEvents(meeting: any) {
this.localParticipant = meeting.localParticipant;
this.participants = meeting.participants;
meeting.on('meeting-joined', () => {
var showJoinScreenMessage = document.getElementById(
'show-join-screen-message'
);
this.renderer.removeChild(document.body, showJoinScreenMessage);
const { participantMediaElement } = this.participantGridGenerator(
this.meeting.localParticipant
);
meeting.localParticipant.on('stream-enabled', (stream: any) => {
console.log('Stream Enabled: ');
this.handleStreamEnabled(
stream,
meeting.localParticipant,
true,
participantMediaElement
);
});
meeting.localParticipant.on('stream-disabled', (stream: any) => {
console.log('Stream Disabled: ');
this.handleStreamDisabled(
stream,
meeting.localParticipant,
true,
participantMediaElement
);
});
});
meeting.on('participant-left', (participant: any) => {
console.log('Participant Left: ', participant.id);
var participantGridItem = document.getElementById(
`participant-grid-item-${participant.id}`
);
this.participantGridContainer.nativeElement.removeChild(participantGridItem);
});
meeting.on('meeting-left', () => {
console.log('Meeting Left');
console.log(this.meeting.MediaStream)
// remove all children nodes from participant grid container
while (this.participantGridContainer.nativeElement.firstChild) {
this.participantGridContainer.nativeElement.removeChild(
this.participantGridContainer.nativeElement.firstChild
);
}
this.showMeetingScreen = false;
this.showJoinScreen = true;
});
//remote participant
meeting.on('participant-joined', (participant: any) => {
console.log('New Participant Joined: ', participant, participant.id);
this.totalParticipant.push({
displayName: participant.displayName,
id: participant.id,
isAdmin: false
});
this.disableMicUserResponse();
console.log('totalParticipant', this.totalParticipant);
var { participantMediaElement } =
this.participantGridGenerator(participant);
participant.setQuality('high');
participant.on('stream-enabled', (stream: any) => {
this.handleStreamEnabled(
stream,
participant,
false,
participantMediaElement
);
});
participant.on('stream-disabled', (stream: any) => {
this.handleStreamDisabled(
stream,
participant,
false,
participantMediaElement
);
});
});
meeting.on("speaker-changed", (participant: any) => {
this.changedFullVideoMode(participant, true);
});
meeting.on("presenter-changed", (participant: any) => {
console.log(participant, 'presenter-changed');
document.getElementById('participant-grid-item-' + participant)?.classList.add('active-presenter');
});
if (meeting) {
this.showJoinScreen = false;
this.showMeetingScreen = true;
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent