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'; import { Component, Input } from '@angular/core';
/** /**
@ -7,13 +8,19 @@ import { Component, Input } from '@angular/core';
@Component({ @Component({
selector: 'ov-avatar-profile', selector: 'ov-avatar-profile',
template: ` template: `
<div class="poster"> <div class="poster" @posterAnimation>
<div class="initial" [ngStyle]="{ 'background-color': color }"> <div class="initial" [ngStyle]="{ 'background-color': color }">
<span id="poster-text">{{ letter }}</span> <span id="poster-text">{{ letter }}</span>
</div> </div>
</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 { export class AvatarProfileComponent {
letter: string; 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 { RecordingService } from '../../services/recording/recording.service';
import { TranslateService } from '../../services/translate/translate.service'; import { TranslateService } from '../../services/translate/translate.service';
import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service'; import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service';
import { PlatformService } from '../../services/platform/platform.service';
/** /**
* @internal * @internal
@ -85,7 +86,8 @@ export class SessionComponent implements OnInit {
protected layoutService: LayoutService, protected layoutService: LayoutService,
protected panelService: PanelService, protected panelService: PanelService,
private recordingService: RecordingService, private recordingService: RecordingService,
private translateService: TranslateService private translateService: TranslateService,
private platformService: PlatformService
) { ) {
this.log = this.loggerSrv.get('SessionComponent'); this.log = this.loggerSrv.get('SessionComponent');
} }
@ -142,11 +144,11 @@ export class SessionComponent implements OnInit {
this.onSessionCreated.emit(this.session); this.onSessionCreated.emit(this.session);
await this.connectToSession(); await this.connectToSession();
// Workaround, firefox does not have audio when publisher join with muted camera // ios devices appear with blank video. Muting and unmuting it fix this problem
// if (this.platformService.isFirefox() && !this.participantService.hasCameraVideoActive()) { if (this.platformService.isIos() && this.participantService.isMyCameraActive()) {
// this.openviduService.publishVideo(this.participantService.getMyCameraPublisher(), true); await this.openviduService.publishVideo(false);
// this.openviduService.publishVideo(this.participantService.getMyCameraPublisher(), 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 { #audio-wave-container {
position: absolute; position: absolute;
right: 0; right: 0;
z-index: 1; z-index: 2;
padding: 5px; 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); 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); return /\b(\w*Android\w*)\b/.test(navigator.userAgent) && /\b(\w*Mobile\w*)\b/.test(navigator.userAgent);
} }
private isIos(): boolean { isIos(): boolean {
return this.isIPhoneOrIPad(navigator?.userAgent) && this.isIOSWithSafari(navigator?.userAgent); return this.isIPhoneOrIPad(navigator?.userAgent);
} }
private isIPhoneOrIPad(userAgent): boolean { private isIPhoneOrIPad(userAgent): boolean {
const isIPad = /\b(\w*Macintosh\w*)\b/.test(userAgent); const isIPad = /\b(\w*Macintosh\w*)\b/.test(userAgent);
@ -33,6 +33,10 @@ export class PlatformService {
return (isIPad || isIPhone) && isTouchable; return (isIPad || isIPhone) && isTouchable;
} }
private isSafariIos(): boolean {
return this.isIos() && this.isIOSWithSafari(navigator?.userAgent);
}
private isIOSWithSafari(userAgent): boolean { private isIOSWithSafari(userAgent): boolean {
return ( return (
/\b(\w*Apple\w*)\b/.test(navigator.vendor) && /\b(\w*Apple\w*)\b/.test(navigator.vendor) &&