ios - Twilio 摄像机仅在 iOS (iphone) Safari 上不显示
问题描述
我已经使用本教程在 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 });
}
}
此代码可在此处获得
解决方案
我终于设法解决了这个问题。我会为遇到此问题的任何人发布此信息。
根本问题是什么? 问题是,虽然笔记本电脑、macbook 和某些手机浏览器允许您创建多个网络摄像头,但 iphone 上的浏览器却不允许。
我做了什么来解决这个问题? 我所做的是使用 twilio 用来创建或连接到房间的摄像头。我做错的是我正在创建第二个网络摄像头层并从那里访问我的网络摄像头。(这是 twilio 代码中的错误,不是我的)。所以基本上我所做的就是:
room.localParticipant.tracks.foreach((a=>any)=>{if(a.kind=="video"){videoelement=a.track}})
推荐阅读
- javascript - 离开页面前的对话框动作
- vb.net - 如何用函数做一个方法?
- javascript - 当我不希望它时,Visual Code 自动格式会放置新行
- sql - Teradata SQL - CREATE table as select - 表填充的结果集与手动运行查询不同
- angular6 - 如何在 ngOnInit 获得 localstorage 的值
- python - Python随机生成每个实例的种子
- arrays - 在 Matlab 中使用匿名 fnc 时如何将值存储到数组中以绘制它们
- game-maker - GameMaker Studio 2 - 中心 + 钳位相机变焦
- tensorflow - 从 tfrecords 中的不平衡数据生成平衡批次
- php - 如何在 html 和 php 中制作 PIVOT(Crosstab)