fix(DeviceSelection): Remove video from mobile Safari
This commit is contained in:
parent
3917c5b283
commit
a564ce581d
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue