ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

openvidu-components: Fixed video blank on iOS devices

pull/737/head
csantosm 2022-06-09 12:27:54 +02:00
parent 3c323233a5
commit 84bf80c24a
4 changed files with 25 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
openvidu-components-angular/projects/openvidu-angular/src/lib/components/avatar-profile/avatar-profile.component.ts
View File

@ -1,3 +1,4 @@
import { animate, style, transition, trigger } from '@angular/animations';
import { Component, Input } from '@angular/core';
/**
@ -7,13 +8,19 @@ import { Component, Input } from '@angular/core';
@Component({
selector: 'ov-avatar-profile',
template: `
<div class="poster">
<div class="poster" @posterAnimation>
<div class="initial" [ngStyle]="{ 'background-color': color }">
<span id="poster-text">{{ letter }}</span>
</div>
</div>
`,
styleUrls: ['./avatar-profile.component.css']
styleUrls: ['./avatar-profile.component.css'],
animations: [
trigger('posterAnimation', [
transition(':enter', [style({ opacity: 0 }), animate('600ms', style({ opacity: 1 }))])
// transition(':leave', [animate(600, style({ backgroundColor: 'yellow' }))]),
])
]
})
export class AvatarProfileComponent {
letter: string;

14
openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts
View File

@ -40,6 +40,7 @@ import { PanelService } from '../../services/panel/panel.service';
import { RecordingService } from '../../services/recording/recording.service';
import { TranslateService } from '../../services/translate/translate.service';
import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service';
import { PlatformService } from '../../services/platform/platform.service';
/**
* @internal
@ -85,7 +86,8 @@ export class SessionComponent implements OnInit {
protected layoutService: LayoutService,
protected panelService: PanelService,
private recordingService: RecordingService,
private translateService: TranslateService
private translateService: TranslateService,
private platformService: PlatformService
) {
this.log = this.loggerSrv.get('SessionComponent');
}
@ -142,11 +144,11 @@ export class SessionComponent implements OnInit {
this.onSessionCreated.emit(this.session);
await this.connectToSession();
// Workaround, firefox does not have audio when publisher join with muted camera
// if (this.platformService.isFirefox() && !this.participantService.hasCameraVideoActive()) {
// this.openviduService.publishVideo(this.participantService.getMyCameraPublisher(), true);
// this.openviduService.publishVideo(this.participantService.getMyCameraPublisher(), false);
// }
// ios devices appear with blank video. Muting and unmuting it fix this problem
if (this.platformService.isIos() && this.participantService.isMyCameraActive()) {
await this.openviduService.publishVideo(false);
await this.openviduService.publishVideo(true);
}
}
}

2
openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.css
View File

@ -41,7 +41,7 @@
#audio-wave-container {
position: absolute;
right: 0;
z-index: 1;
z-index: 2;
padding: 5px;
}

10
openvidu-components-angular/projects/openvidu-angular/src/lib/services/platform/platform.service.ts
View File

@ -17,12 +17,12 @@ export class PlatformService {
return /Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent);
}
private isAndroid(): boolean {
isAndroid(): boolean {
return /\b(\w*Android\w*)\b/.test(navigator.userAgent) && /\b(\w*Mobile\w*)\b/.test(navigator.userAgent);
}
private isIos(): boolean {
return this.isIPhoneOrIPad(navigator?.userAgent) && this.isIOSWithSafari(navigator?.userAgent);
isIos(): boolean {
return this.isIPhoneOrIPad(navigator?.userAgent);
}
private isIPhoneOrIPad(userAgent): boolean {
const isIPad = /\b(\w*Macintosh\w*)\b/.test(userAgent);
@ -33,6 +33,10 @@ export class PlatformService {
return (isIPad || isIPhone) && isTouchable;
}
private isSafariIos(): boolean {
return this.isIos() && this.isIOSWithSafari(navigator?.userAgent);
}
private isIOSWithSafari(userAgent): boolean {
return (
/\b(\w*Apple\w*)\b/.test(navigator.vendor) &&