4

我已经使用本教程在 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 上显示。但是远程视频确实显示。另一方面，远程和本地视频都完美显示。

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

Safari 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 });
  }
}

此代码可在此处获得

4

2 回答 2

3

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

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

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

room.localParticipant.tracks.foreach((a=>any)=>{if(a.kind=="video"){videoelement=a.track}})
于 2019-10-20T22:04:52.210 回答
1 
import 'zone.js/dist/zone-patch-user-media';
import 'zone.js/dist/webapis-rtc-peer-connection';

这些 polyfill 解决了我的问题。

于 2020-03-25T10:14:54.167 回答