ios - 仅在 iOS (iphone) Safari 上不显示 Twilio 摄像机

Question

我已经使用本教程在 Angular 上实现了 Twilio Video: https://www.twilio.com/blog/video-chat-app-asp-net-core-angular-twilio

值得一提的是，我之前遇到了一个问题，我无法通过 safari 浏览器显示或接收任何视频。我通过将我的 zone.js 版本降级到 1.0.82 解决了这个问题。

既然视频在所有浏览器(包括 Mac 上的 safari)上都能正确显示，现在我正在 iOS safari 上进行测试。

问题:本地视频(来自 iphone 摄像头的视频)未在 iOS Safari 中显示。但是远程视频确实显示。而在另一端，远程和本地视频都完美显示。

除 Safari iOS 之外的所有浏览器上的 Twilio 视频

Safari iOS 上的 Twilio 视频

相机 View (html):

<div id="preview" #preview>
<div *ngIf="isInitializing">Camera is initializing</div>
</div>

相机 TS (camera.ts)

import { Component, ElementRef, ViewChild, AfterViewInit, Renderer2 } from '@angular/core';
import { createLocalTracks, LocalTrack, LocalVideoTrack } from 'twilio-video';

@Component({
  selector: 'app-camera',
  templateUrl: './camera.component.html',
  styleUrls: ['./camera.component.scss']
})
export class CameraComponent implements AfterViewInit {

  @ViewChild('preview', { read: "", static: false }) previewElement: ElementRef;

  get tracks(): LocalTrack[] {
    return this.localTracks;
  }
  isInitializing: boolean = true;

  videoTrack: LocalVideoTrack;
  localTracks: LocalTrack[] = [];

  constructor(
    private readonly renderer: Renderer2) { }

  async ngAfterViewInit() {
  }

  initializePreview(deviceInfo?: MediaDeviceInfo) {

    if (deviceInfo) {
      this.initializeDevice(deviceInfo.kind, deviceInfo.deviceId);
    } else {
      this.initializeDevice();
    }
  }

  finalizePreview() {
    try {
      if (this.videoTrack) {
        this.videoTrack.detach().forEach(element => element.remove());
      }
    } catch (e) {
      console.error(e);
    }
  }

  private async initializeDevice(kind?: MediaDeviceKind, deviceId?: string) {
    try {
      this.isInitializing = true;

      this.finalizePreview();

      this.localTracks = kind && deviceId
        ? await this.initializeTracks(kind, deviceId)
        : await this.initializeTracks();

      this.videoTrack = this.localTracks.find(t => t.kind === 'video') as LocalVideoTrack;
      let videoElement = this.videoTrack.attach();
      this.renderer.setStyle(videoElement, 'height', '100%');
      this.renderer.setStyle(videoElement, 'width', '100%');
      this.renderer.appendChild(this.previewElement.nativeElement, videoElement);
    } finally {
      this.isInitializing = false;
    }
  }

  private initializeTracks(kind?: MediaDeviceKind, deviceId?: string) {
    if (kind) {
      switch (kind) {
        case 'audioinput':
          return createLocalTracks({ audio: { deviceId }, video: true });
        case 'videoinput':
          return createLocalTracks({ audio: true, video: { deviceId } });
      }
    }

    return createLocalTracks({ audio: true, video: true });
  }
}

此代码可用here

Answer 1

我终于设法解决了这个问题。我会将此发布给遇到此问题的任何人。

根本问题是什么？问题是，虽然笔记本电脑和 macbook 以及一些手机浏览器允许您创建多个网络摄像头，但 iphone 上的浏览​​器却不允许。

我做了什么来解决这个问题？我所做的是使用 twilio 用来创建或连接到房间的相机。我做错的是我正在创建第二个网络摄像头层并从那里访问我的网络摄像头。 (这是 twilio 代码中的错误，而不是我的错误)。所以基本上我所做的就是这样:

room.localParticipant.tracks.foreach((a=>any)=>{if(a.kind=="video"){videoelement=a.track}})