Call lobby: render local preview at camera's aspect ratio

This commit is contained in:
Evan Hahn 2020-12-11 18:44:07 -06:00 committed by GitHub
parent 819f5f3001
commit c87ffcd2e9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 189 additions and 52 deletions

View file

@ -2,6 +2,8 @@
// SPDX-License-Identifier: AGPL-3.0-only
import React, { ReactNode } from 'react';
import Measure from 'react-measure';
import { debounce } from 'lodash';
import {
SetLocalAudioType,
SetLocalPreviewType,
@ -15,6 +17,15 @@ import { Spinner } from './Spinner';
import { ColorType } from '../types/Colors';
import { LocalizerType } from '../types/Util';
import { ConversationType } from '../state/ducks/conversations';
import {
REQUESTED_VIDEO_WIDTH,
REQUESTED_VIDEO_HEIGHT,
} from '../calling/constants';
// We request dimensions but may not get them depending on the user's webcam. This is our
// fallback while we don't know.
const VIDEO_ASPECT_RATIO_FALLBACK =
REQUESTED_VIDEO_WIDTH / REQUESTED_VIDEO_HEIGHT;
export type PropsType = {
availableCameras: Array<MediaDeviceInfo>;
@ -61,7 +72,18 @@ export const CallingLobby = ({
toggleParticipants,
toggleSettings,
}: PropsType): JSX.Element => {
const localVideoRef = React.useRef(null);
const [
localPreviewContainerWidth,
setLocalPreviewContainerWidth,
] = React.useState<null | number>(null);
const [
localPreviewContainerHeight,
setLocalPreviewContainerHeight,
] = React.useState<null | number>(null);
const [localVideoAspectRatio, setLocalVideoAspectRatio] = React.useState(
VIDEO_ASPECT_RATIO_FALLBACK
);
const localVideoRef = React.useRef<null | HTMLVideoElement>(null);
const toggleAudio = React.useCallback((): void => {
setLocalAudio({ enabled: !hasLocalAudio });
@ -71,6 +93,24 @@ export const CallingLobby = ({
setLocalVideo({ enabled: !hasLocalVideo });
}, [hasLocalVideo, setLocalVideo]);
const hasEverMeasured =
localPreviewContainerWidth !== null && localPreviewContainerHeight !== null;
const setLocalPreviewContainerDimensions = React.useMemo(() => {
const set = (bounds: Readonly<{ width: number; height: number }>) => {
setLocalPreviewContainerWidth(bounds.width);
setLocalPreviewContainerHeight(bounds.height);
};
if (hasEverMeasured) {
return debounce(set, 100, { maxWait: 3000 });
}
return set;
}, [
hasEverMeasured,
setLocalPreviewContainerWidth,
setLocalPreviewContainerHeight,
]);
React.useEffect(() => {
setLocalPreview({ element: localVideoRef });
@ -79,6 +119,21 @@ export const CallingLobby = ({
};
}, [setLocalPreview]);
// This isn't perfect because it doesn't react to changes in the webcam's aspect ratio.
// For example, if you changed from Webcam A to Webcam B and Webcam B had a different
// aspect ratio, we wouldn't update.
//
// Unfortunately, RingRTC (1) doesn't update these dimensions with the "real" camera
// dimensions (2) doesn't give us any hooks or callbacks. For now, this works okay.
// We have `object-fit: contain` in the CSS in case we're wrong; not ideal, but
// usable.
React.useEffect(() => {
const videoEl = localVideoRef.current;
if (hasLocalVideo && videoEl && videoEl.width && videoEl.height) {
setLocalVideoAspectRatio(videoEl.width / videoEl.height);
}
}, [hasLocalVideo, setLocalVideoAspectRatio]);
React.useEffect(() => {
function handleKeyDown(event: KeyboardEvent): void {
let eventHandled = false;
@ -141,6 +196,33 @@ export const CallingLobby = ({
joinButtonChildren = i18n('calling__start');
}
let localPreviewStyles: React.CSSProperties;
// It'd be nice to use `hasEverMeasured` here, too, but TypeScript isn't smart enough
// to understand the logic here.
if (
localPreviewContainerWidth !== null &&
localPreviewContainerHeight !== null
) {
const containerAspectRatio =
localPreviewContainerWidth / localPreviewContainerHeight;
localPreviewStyles =
containerAspectRatio < localVideoAspectRatio
? {
width: '100%',
height: Math.floor(
localPreviewContainerWidth / localVideoAspectRatio
),
}
: {
width: Math.floor(
localPreviewContainerHeight * localVideoAspectRatio
),
height: '100%',
};
} else {
localPreviewStyles = { display: 'none' };
}
return (
<div className="module-calling__container">
<CallingHeader
@ -153,37 +235,58 @@ export const CallingLobby = ({
toggleSettings={toggleSettings}
/>
<div className="module-calling-lobby__video">
{hasLocalVideo && availableCameras.length > 0 ? (
<video
className="module-calling-lobby__video-on__video"
ref={localVideoRef}
autoPlay
/>
) : (
<CallBackgroundBlur avatarPath={me.avatarPath} color={me.color}>
<div className="module-calling__video-off--icon" />
<span className="module-calling__video-off--text">
{i18n('calling__your-video-is-off')}
</span>
</CallBackgroundBlur>
)}
<Measure
bounds
onResize={({ bounds }) => {
if (!bounds) {
window.log.error('We should be measuring bounds');
return;
}
setLocalPreviewContainerDimensions(bounds);
}}
>
{({ measureRef }) => (
<div
ref={measureRef}
className="module-calling-lobby__local-preview-container"
>
<div
className="module-calling-lobby__local-preview"
style={localPreviewStyles}
>
{hasLocalVideo && availableCameras.length > 0 ? (
<video
className="module-calling-lobby__local-preview__video-on"
ref={localVideoRef}
autoPlay
/>
) : (
<CallBackgroundBlur avatarPath={me.avatarPath} color={me.color}>
<div className="module-calling-lobby__local-preview__video-off__icon" />
<span className="module-calling-lobby__local-preview__video-off__text">
{i18n('calling__your-video-is-off')}
</span>
</CallBackgroundBlur>
)}
<div className="module-calling__buttons">
<CallingButton
buttonType={videoButtonType}
i18n={i18n}
onClick={toggleVideo}
tooltipDirection={TooltipPlacement.Top}
/>
<CallingButton
buttonType={audioButtonType}
i18n={i18n}
onClick={toggleAudio}
tooltipDirection={TooltipPlacement.Top}
/>
</div>
</div>
<div className="module-calling__buttons">
<CallingButton
buttonType={videoButtonType}
i18n={i18n}
onClick={toggleVideo}
tooltipDirection={TooltipPlacement.Top}
/>
<CallingButton
buttonType={audioButtonType}
i18n={i18n}
onClick={toggleAudio}
tooltipDirection={TooltipPlacement.Top}
/>
</div>
</div>
</div>
)}
</Measure>
{isGroupCall ? (
<div className="module-calling-lobby__info">