Я использую Angular 7, и в моем приложении есть видео с камеры. Я использовал Chrome веб-браузер для этого теста. Это код:
[HTML]
<video #videoElement autoplay [ngStyle]="videoStyle"></video>
[TS]
contentMargin: any = { top: 62, right: 0, bottom: 62, left: 0 };`
this.containerWidth = window.innerWidth - this.contentMargin.left - this.contentMargin.right;
this.containerHeight = window.innerHeight - this.contentMargin.top - this.contentMargin.bottom;
this.videoContainerStyle = {
'width': '100%',
'height': this.containerHeight + 'px',
'margin': '0',
'overflow': 'hidden',
};
this.scaleRatio = Math.max(this.containerWidth / this.videoWidth, this.containerHeight / this.videoHeight);
let transform = 'scale(' + this.scaleRatio + ', ' + this.scaleRatio + ')';
var offsetTop = 0;
var offsetLeft = 0;
offsetTop = this.videoHeight * this.scaleRatio / 2 - this.videoHeight / 2;
offsetLeft = this.videoWidth * this.scaleRatio / 2 - this.videoWidth / 2;
this.videoStyle = {
'height': this.videoHeight + 'px',
'width': this.videoWidth + 'px',
'transform-origin': 'center center',
'transform': transform,
'overflow': 'hidden',
'position': 'relative',
'top': offsetTop + 'px',
'left': offsetLeft + 'px'
};
Этот код хорошо работает для всех устройств, кроме одна таблетка Когда мое приложение включает камеру для планшетов, это нормально, но когда я поворачиваю планшет (это означает портретный режим), видеоэкран переворачивается. Я думаю, что это проблема с драйвером камеры, потому что он хорошо работает для другого устройства. Я пытался связаться со службой поддержки планшетов, но так и не ответил об этой проблеме, поэтому я хотел бы исправить ее с помощью своего кода. Однако я не знаю, как обнаружить, что видео перевернуто или нет.
Одна странная вещь - этот код хорошо работает для браузера MS Edge. Chrome и Firefox браузер не работает.
Пожалуйста, дайте мне совет для этого.
Буду признателен заранее.