Question

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

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

现在视频可以在所有浏览器（包括Mac上的safari）上正确显示，现在我正在iOS safari上进行测试。

问题：本地视频（来自iPhone摄像头的视频）未在iOS Safari中显示。但是会显示远程视频。另一方面，远程和本地视频都可以完美显示。

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

野生动物园iOS上的Twilio视频

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

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

这些填充材料解决了我的问题。

Answer 2

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

潜在的问题是什么？ 问题是，尽管笔记本电脑和Macbook以及某些电话浏览器允许您创建多个网络摄像头，但iPhone上的浏览器却不允许。

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

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

Twilio摄像机未在iOS（iphone）Safari上显示

2 个答案: