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

Question

我已经使用本教程在 Angular 上实现了 Twilio 视频： 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 中显示。但是远程视频确实显示。而在另一端，远程和本地视频都显示完美。

所有浏览器上的 Twilio 视频，除了 safari iOS

Safari 上的 Twilio 视频iOS

相机视图（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

我终于设法解决了这个问题。我会 post 为遇到此问题的任何人提供此信息。

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

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

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

Answer 2

import 'zone.js/dist/zone-patch-user-media';
import 'zone.js/dist/webapis-rtc-peer-connection';

这些 polyfill 解决了我的问题。

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

Twilio Video Camera Not Showing on iOS (iphone) Safari Only

ios

angular

safari

twilio

twilio-video