Видеокамера Twilio не отображается на iOS (iphone) только Safari - PullRequest
Новая
       58

Видеокамера Twilio не отображается на iOS (iphone) только Safari

0 голосов
/ 18 октября 2019

Я реализовал Twilio Video на Angular с помощью этого учебного пособия: https://www.twilio.com/blog/video-chat-app-asp-net-core-angular-twilio

Стоит отметить, что ранее я столкнулся с проблемой, когда я не смог показать или получить видео через браузер Safari. Я исправил эту проблему, понизив версию своей zone.js до версии 1.0.82.

Теперь, когда видео корректно отображалось во всех браузерах, включая сафари на Mac, сейчас я тестирую сафари на iOS.

Проблема: локальное видео (видео с камеры iphone) не отображается в iOS-сафари. Однако удаленное видео действительно показывает. А с другой стороны, и удаленное, и локальное видео отображаются отлично.

Видео Twilio во всех браузерах, кроме Safari iOS

Twilio видео на сафари iOS

Просмотр камеры (html): 

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

Камера TS (камера. 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 });
  }
}

Этот код доступен здесь

1 Ответ

0 голосов
/ 21 октября 2019

Мне наконец-то удалось решить проблему. Я опубликую это для всех, кто сталкивается с этой проблемой.

В чем заключалась основная проблема? Проблема в том, что хотя ноутбук, MacBook и некоторые браузеры телефонов позволяют создавать несколько веб-камер,браузеры на iphone, нет.

Что я сделал, чтобы решить эту проблему? Я использовал камеру, которую twilio использует для создания или подключения к комнате. Что я делал неправильно, так это то, что я создавал второй слой веб-камеры и оттуда получал доступ к своей веб-камере. (Это ошибка в коде twilio, а не в моем). В общем, все, что я сделал, это: 

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