fix(video-quality): Add the ability to request Ultra HD resolutions

Change the preferredVideoQuality and maxReceiverVideoQuality values to Ultra HD resolutions. The requested resolution can be as high as 4K to facilitate VPaaS customers to request 4K. The sender video resolution will always max out at the value specified in the video constraints from config.js settings.
This commit is contained in:
Jaya Allamsetty 2020-10-06 16:42:38 -04:00 committed by Jaya Allamsetty
parent f01869c21c
commit 39af6f5943
6 changed files with 26 additions and 7 deletions

View File

@ -21,6 +21,7 @@ import { findNearestQualityLevel } from '../functions';
* @type {Object}
*/
const VIDEO_QUALITY_TO_ICON = {
[VIDEO_QUALITY_LEVELS.ULTRA]: IconVideoQualityHD,
[VIDEO_QUALITY_LEVELS.HIGH]: IconVideoQualityHD,
[VIDEO_QUALITY_LEVELS.STANDARD]: IconVideoQualitySD,
[VIDEO_QUALITY_LEVELS.LOW]: IconVideoQualityLD

View File

@ -14,6 +14,7 @@ import { VIDEO_QUALITY_LEVELS } from '../constants';
import logger from '../logger';
const {
ULTRA,
HIGH,
STANDARD,
LOW
@ -97,6 +98,7 @@ class VideoQualitySlider extends Component<Props> {
this._enableLowDefinition = this._enableLowDefinition.bind(this);
this._enableStandardDefinition
= this._enableStandardDefinition.bind(this);
this._enableUltraHighDefinition = this._enableUltraHighDefinition.bind(this);
this._onSliderChange = this._onSliderChange.bind(this);
/**
@ -125,9 +127,9 @@ class VideoQualitySlider extends Component<Props> {
videoQuality: STANDARD
},
{
onSelect: this._enableHighDefinition,
onSelect: this._enableUltraHighDefinition,
textKey: 'videoStatus.highDefinition',
videoQuality: HIGH
videoQuality: ULTRA
}
];
}
@ -298,6 +300,21 @@ class VideoQualitySlider extends Component<Props> {
this._setPreferredVideoQuality(STANDARD);
}
_enableUltraHighDefinition: () => void;
/**
* Dispatches an action to receive ultra HD quality video from remote
* participants.
*
* @private
* @returns {void}
*/
_enableUltraHighDefinition() {
sendAnalytics(createEvent('ultra high'));
logger.log('Video quality: ultra high enabled');
this._setPreferredVideoQuality(ULTRA);
}
/**
* Matches the current video quality state with corresponding index of the
* component's slider options.

View File

@ -5,6 +5,7 @@
* @type {object}
*/
export const VIDEO_QUALITY_LEVELS = {
ULTRA: 2160,
HIGH: 720,
STANDARD: 360,
LOW: 180

View File

@ -2,8 +2,8 @@
import { CFG_LVL_TO_APP_QUALITY_LVL, VIDEO_QUALITY_LEVELS } from './constants';
const { LOW, STANDARD, HIGH } = VIDEO_QUALITY_LEVELS;
const videoQualityLevels = [ LOW, STANDARD, HIGH ];
const { LOW, STANDARD, HIGH, ULTRA } = VIDEO_QUALITY_LEVELS;
const videoQualityLevels = [ LOW, STANDARD, HIGH, ULTRA ];
/**
* Finds the nearest video quality level to the passed video quality.

View File

@ -81,7 +81,7 @@ StateListenerRegistry.register(
const { maxReceiverVideoQuality } = state['features/video-quality'];
const { maxFullResolutionParticipants = 2 } = state['features/base/config'];
let newMaxRecvVideoQuality = VIDEO_QUALITY_LEVELS.HIGH;
let newMaxRecvVideoQuality = VIDEO_QUALITY_LEVELS.ULTRA;
if (reducedUI) {
newMaxRecvVideoQuality = VIDEO_QUALITY_LEVELS.LOW;

View File

@ -7,9 +7,9 @@ import { validateMinHeightForQualityLvl } from './functions';
import logger from './logger';
const DEFAULT_STATE = {
maxReceiverVideoQuality: VIDEO_QUALITY_LEVELS.HIGH,
maxReceiverVideoQuality: VIDEO_QUALITY_LEVELS.ULTRA,
minHeightForQualityLvl: new Map(),
preferredVideoQuality: VIDEO_QUALITY_LEVELS.HIGH
preferredVideoQuality: VIDEO_QUALITY_LEVELS.ULTRA
};
DEFAULT_STATE.minHeightForQualityLvl.set(360, VIDEO_QUALITY_LEVELS.STANDARD);