fix(DeviceSelection): Remove video from mobile Safari

This commit is contained in:
Mihai-Andrei Uscat 2021-06-09 09:22:16 +03:00 committed by GitHub
parent 3917c5b283
commit a564ce581d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 63 additions and 18 deletions

View File

@ -129,3 +129,20 @@
}
}
}
.device-selection.video-hidden {
display: flex;
flex-direction: column;
width: 100%;
.column-selectors {
width: 100%;
margin-left: 0;
}
.column-video {
order: 1;
width: 100%;
margin-top: 8px;
}
}

View File

@ -64,6 +64,18 @@ export type Props = {
*/
hideAudioOutputSelect: boolean,
/**
* Whether video input preview should be displayed or not.
* (In the case of iOS Safari)
*/
hideVideoInputPreview: boolean,
/**
* Whether video output dropdown should be displayed or not.
* (In the case of iOS Safari)
*/
hideVideoOutputSelect: boolean,
/**
* An optional callback to invoke after the component has completed its
* mount logic.
@ -201,17 +213,20 @@ class DeviceSelection extends AbstractDialogTab<Props, State> {
const {
hideAudioInputPreview,
hideAudioOutputSelect,
hideVideoInputPreview,
selectedAudioOutputId
} = this.props;
return (
<div className = 'device-selection'>
<div className = { `device-selection${hideVideoInputPreview ? ' video-hidden' : ''}` }>
<div className = 'device-selection-column column-video'>
<div className = 'device-selection-video-container'>
<VideoInputPreview
error = { this.state.previewVideoTrackError }
track = { this.state.previewVideoTrack } />
</div>
{ !hideVideoInputPreview
&& <div className = 'device-selection-video-container'>
<VideoInputPreview
error = { this.state.previewVideoTrackError }
track = { this.state.previewVideoTrack } />
</div>
}
{ !hideAudioInputPreview
&& <AudioInputPreview
track = { this.state.previewAudioTrack } /> }
@ -264,6 +279,12 @@ class DeviceSelection extends AbstractDialogTab<Props, State> {
* @returns {void}
*/
_createVideoInputTrack(deviceId) {
const { hideVideoInputPreview } = this.props;
if (hideVideoInputPreview) {
return;
}
return this._disposeVideoInputPreview()
.then(() => createLocalTrack('video', deviceId, 5000))
.then(jitsiLocalTrack => {
@ -342,18 +363,6 @@ class DeviceSelection extends AbstractDialogTab<Props, State> {
const { availableDevices, hasAudioPermission, hasVideoPermission } = this.props;
const configurations = [
{
devices: availableDevices.videoInput,
hasPermission: hasVideoPermission,
icon: 'icon-camera',
isDisabled: this.props.disableDeviceChange,
key: 'videoInput',
label: 'settings.selectCamera',
onSelect: selectedVideoInputId =>
super._onChange({ selectedVideoInputId }),
selectedDeviceId: this.state.previewVideoTrack
? this.state.previewVideoTrack.getDeviceId() : null
},
{
devices: availableDevices.audioInput,
hasPermission: hasAudioPermission,
@ -369,6 +378,21 @@ class DeviceSelection extends AbstractDialogTab<Props, State> {
}
];
if (!this.props.hideVideoOutputSelect) {
configurations.unshift({
devices: availableDevices.videoInput,
hasPermission: hasVideoPermission,
icon: 'icon-camera',
isDisabled: this.props.disableDeviceChange,
key: 'videoInput',
label: 'settings.selectCamera',
onSelect: selectedVideoInputId =>
super._onChange({ selectedVideoInputId }),
selectedDeviceId: this.state.previewVideoTrack
? this.state.previewVideoTrack.getDeviceId() : null
});
}
if (!this.props.hideAudioOutputSelect) {
configurations.push({
devices: availableDevices.audioOutput,

View File

@ -13,6 +13,7 @@ import {
setAudioOutputDeviceId,
setVideoInputDevice
} from '../base/devices';
import { isIosMobileBrowser } from '../base/environment/utils';
import JitsiMeetJS from '../base/lib-jitsi-meet';
import { toState } from '../base/redux';
import {
@ -33,6 +34,7 @@ export function getDeviceSelectionDialogProps(stateful: Object | Function) {
const settings = state['features/base/settings'];
const { conference } = state['features/base/conference'];
const { permissions } = state['features/base/devices'];
const isMobileSafari = isIosMobileBrowser();
let disableAudioInputChange = !JitsiMeetJS.mediaDevices.isMultipleAudioInputSupported();
let selectedAudioInputId = settings.micDeviceId;
let selectedAudioOutputId = getAudioOutputDeviceId();
@ -62,6 +64,8 @@ export function getDeviceSelectionDialogProps(stateful: Object | Function) {
!JitsiMeetJS.isCollectingLocalStats(),
hideAudioOutputSelect: !JitsiMeetJS.mediaDevices
.isDeviceChangeAvailable('output'),
hideVideoInputPreview: isMobileSafari,
hideVideoOutputSelect: isMobileSafari,
selectedAudioInputId,
selectedAudioOutputId,
selectedVideoInputId