Safari iPhone的Twilio远程视频显示Angular 5中的黑屏

Question

iPhone safari版本：11.2.5

Chrome版本：检查更新版本80.0.3987.163(官方版本((64位(

该连接是对等的。

If I can give you an overview it's like -
Video is coming on iPhone from mac safari, Chrome, window laptop
Video is coming on Android Phone from mac safari, Chrome, window laptop
Video is coming on mac safari, Chrome, window laptop from Android Phone
Video is NOT COMING on mac safari, Chrome, window laptop from iPhone

如果你能帮忙，请告诉我。提前谢谢。

Answer 1

我解决了这个问题

createLocalVideoTrack({
video: { width: 1280, height: 720 },
}).then(track => {
if (this.localVideo) {
const element = track.attach();
this.renderer.data.id = track.sid;
this.renderer.setStyle(element, 'width', '25%');
this.renderer.appendChild(this.localVideo.nativeElement, element);
this.attachVideoClass();
}
});

应为：

this.roomObj.localParticipant.videoTracks.forEach(publication => {
const element = publication.track.attach();
this.renderer.data.id = publication.track.sid;
this.renderer.setStyle(element, 'width', '25%');
this.renderer.appendChild(this.localVideo.nativeElement, element);
})

Answer 2

这里是Twilio开发人员的传道者。

我建议大家通读一下Safari11的开发文章，这篇文章讨论了一系列潜在的问题。

Answer 3

请检查代码：

import { Injectable, EventEmitter, ElementRef, Renderer2, RendererFactory2 } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Observer } from 'rxjs';
import { connect, createLocalTracks, createLocalVideoTrack } from 'twilio-video';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Http } from '@angular/http';
import { Router } from '@angular/router';
import { BaCustomPreLoader } from './baCustomPreloader.service';

@Injectable()
export class TwilioService {
remoteVideo: ElementRef;
localVideo: ElementRef;
previewing: boolean;
msgSubject = new BehaviorSubject("");
roomObj: any;
roomParticipants;
private renderer: Renderer2;
constructor(
private http: Http,
private router: Router,
private rendererFactory: RendererFactory2,
private baCustomPreLoader: BaCustomPreLoader) {
this.renderer = rendererFactory.createRenderer(null, null);
}
getToken(username): Observable<any> {
return this.http.post('/abc', { uid: 'ashish' });
}
microphone = true;
mute() {
this.roomObj.localParticipant.audioTracks.forEach(function (
audioTrack
) {
audioTrack.track.disable();
});
this.microphone = false;
}

unmute() {
this.roomObj.localParticipant.audioTracks.forEach(function (
audioTrack,
key,
map
) {
audioTrack.track.enable();
});
this.microphone = true;
}

connectToRoom(accessToken: string, options): void {
connect(accessToken, options).then(room => {
this.roomObj = room;
if (!this.previewing && options['video']) {
this.startLocalVideo();
this.previewing = true;
}
this.roomParticipants = room.participants;
room.participants.forEach(participant => {
this.attachParticipantTracks(participant);
});
room.on('participantDisconnected', (participant) => {
this.detachParticipantTracks(participant);
});
room.on('participantConnected', (participant) => {
this.roomParticipants = room.participants;
this.attachParticipantTracks(participant);
participant.on('trackAdded', track => {
const element = track.attach();
this.renderer.data.id = track.sid;
this.renderer.setStyle(element, 'height', '100%');
this.renderer.setStyle(element, 'max-width', '100%');
this.renderer.appendChild(this.remoteVideo.nativeElement, element);
this.attachVideoClass();
this.baCustomPreLoader.hide();
});
});
// When a Participant adds a Track, attach it to the DOM.
room.on('trackAdded', (track, participant) => {
this.attachTracks([track]);
});
// When a Participant removes a Track, detach it from the DOM.
room.on('trackRemoved', (track, participant) => {
this.detachTracks([track]);
});
room.once('disconnected', room => {
room.localParticipant.tracks.forEach(track => {
track.track.stop();
const attachedElements = track.track.detach();
attachedElements.forEach(element => element.remove());
room.localParticipant.videoTracks.forEach(video => {
const trackConst = [video][0].track;
trackConst.stop();  // <- error
trackConst.detach().forEach(element => element.remove());
room.localParticipant.unpublishTrack(trackConst);
});

let element = this.remoteVideo.nativeElement;
while (element.firstChild) {
element.removeChild(element.firstChild);
}
let localElement = this.localVideo.nativeElement;
while (localElement.firstChild) {
localElement.removeChild(localElement.firstChild);
}
this.router.navigate(['thanks']);
setTimeout(() => {
window.location.reload();
}, 1000)
});
});
}, (error) => {
alert(error.message);
});
}
attachParticipantTracks(participant): void {
participant.tracks.forEach(part => {
this.trackPublished(part);
});
}
trackPublished(publication) {
if (publication.isSubscribed)
this.attachTracks(publication.track);
if (!publication.isSubscribed)
publication.on('subscribed', track => {
this.attachTracks(track);
});
}
attachTracks(tracks) {
const element = tracks.attach();
this.renderer.data.id = tracks.sid;
this.renderer.setStyle(element, 'height', '100%');
this.renderer.setStyle(element, 'max-width', '100%');
this.renderer.appendChild(this.remoteVideo.nativeElement, element);
this.attachVideoClass();
this.baCustomPreLoader.hide();
}
startLocalVideo(): void {
createLocalVideoTrack({
video: { width: 1280, height: 720 },
}).then(track => {
if (this.localVideo) {
const element = track.attach();
this.renderer.data.id = track.sid;
this.renderer.setStyle(element, 'width', '25%');
this.renderer.appendChild(this.localVideo.nativeElement, element);
this.attachVideoClass();
}
});
}
detachParticipantTracks(participant) {
this.detachTracks(participant);
}
detachTracks(tracks): void {
tracks.tracks.forEach(track => {
let element = this.remoteVideo.nativeElement;
while (element.firstChild) {
element.removeChild(element.firstChild);
}
});
}
attachVideoClass() {
let remote = document.getElementById('remote');
}
}