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,
|
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
|
* An optional callback to invoke after the component has completed its
|
||||||
* mount logic.
|
* mount logic.
|
||||||
|
@ -201,17 +213,20 @@ class DeviceSelection extends AbstractDialogTab<Props, State> {
|
||||||
const {
|
const {
|
||||||
hideAudioInputPreview,
|
hideAudioInputPreview,
|
||||||
hideAudioOutputSelect,
|
hideAudioOutputSelect,
|
||||||
|
hideVideoInputPreview,
|
||||||
selectedAudioOutputId
|
selectedAudioOutputId
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className = 'device-selection'>
|
<div className = { `device-selection${hideVideoInputPreview ? ' video-hidden' : ''}` }>
|
||||||
<div className = 'device-selection-column column-video'>
|
<div className = 'device-selection-column column-video'>
|
||||||
<div className = 'device-selection-video-container'>
|
{ !hideVideoInputPreview
|
||||||
|
&& <div className = 'device-selection-video-container'>
|
||||||
<VideoInputPreview
|
<VideoInputPreview
|
||||||
error = { this.state.previewVideoTrackError }
|
error = { this.state.previewVideoTrackError }
|
||||||
track = { this.state.previewVideoTrack } />
|
track = { this.state.previewVideoTrack } />
|
||||||
</div>
|
</div>
|
||||||
|
}
|
||||||
{ !hideAudioInputPreview
|
{ !hideAudioInputPreview
|
||||||
&& <AudioInputPreview
|
&& <AudioInputPreview
|
||||||
track = { this.state.previewAudioTrack } /> }
|
track = { this.state.previewAudioTrack } /> }
|
||||||
|
@ -264,6 +279,12 @@ class DeviceSelection extends AbstractDialogTab<Props, State> {
|
||||||
* @returns {void}
|
* @returns {void}
|
||||||
*/
|
*/
|
||||||
_createVideoInputTrack(deviceId) {
|
_createVideoInputTrack(deviceId) {
|
||||||
|
const { hideVideoInputPreview } = this.props;
|
||||||
|
|
||||||
|
if (hideVideoInputPreview) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
return this._disposeVideoInputPreview()
|
return this._disposeVideoInputPreview()
|
||||||
.then(() => createLocalTrack('video', deviceId, 5000))
|
.then(() => createLocalTrack('video', deviceId, 5000))
|
||||||
.then(jitsiLocalTrack => {
|
.then(jitsiLocalTrack => {
|
||||||
|
@ -342,18 +363,6 @@ class DeviceSelection extends AbstractDialogTab<Props, State> {
|
||||||
const { availableDevices, hasAudioPermission, hasVideoPermission } = this.props;
|
const { availableDevices, hasAudioPermission, hasVideoPermission } = this.props;
|
||||||
|
|
||||||
const configurations = [
|
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,
|
devices: availableDevices.audioInput,
|
||||||
hasPermission: hasAudioPermission,
|
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) {
|
if (!this.props.hideAudioOutputSelect) {
|
||||||
configurations.push({
|
configurations.push({
|
||||||
devices: availableDevices.audioOutput,
|
devices: availableDevices.audioOutput,
|
||||||
|
|
|
@ -13,6 +13,7 @@ import {
|
||||||
setAudioOutputDeviceId,
|
setAudioOutputDeviceId,
|
||||||
setVideoInputDevice
|
setVideoInputDevice
|
||||||
} from '../base/devices';
|
} from '../base/devices';
|
||||||
|
import { isIosMobileBrowser } from '../base/environment/utils';
|
||||||
import JitsiMeetJS from '../base/lib-jitsi-meet';
|
import JitsiMeetJS from '../base/lib-jitsi-meet';
|
||||||
import { toState } from '../base/redux';
|
import { toState } from '../base/redux';
|
||||||
import {
|
import {
|
||||||
|
@ -33,6 +34,7 @@ export function getDeviceSelectionDialogProps(stateful: Object | Function) {
|
||||||
const settings = state['features/base/settings'];
|
const settings = state['features/base/settings'];
|
||||||
const { conference } = state['features/base/conference'];
|
const { conference } = state['features/base/conference'];
|
||||||
const { permissions } = state['features/base/devices'];
|
const { permissions } = state['features/base/devices'];
|
||||||
|
const isMobileSafari = isIosMobileBrowser();
|
||||||
let disableAudioInputChange = !JitsiMeetJS.mediaDevices.isMultipleAudioInputSupported();
|
let disableAudioInputChange = !JitsiMeetJS.mediaDevices.isMultipleAudioInputSupported();
|
||||||
let selectedAudioInputId = settings.micDeviceId;
|
let selectedAudioInputId = settings.micDeviceId;
|
||||||
let selectedAudioOutputId = getAudioOutputDeviceId();
|
let selectedAudioOutputId = getAudioOutputDeviceId();
|
||||||
|
@ -62,6 +64,8 @@ export function getDeviceSelectionDialogProps(stateful: Object | Function) {
|
||||||
!JitsiMeetJS.isCollectingLocalStats(),
|
!JitsiMeetJS.isCollectingLocalStats(),
|
||||||
hideAudioOutputSelect: !JitsiMeetJS.mediaDevices
|
hideAudioOutputSelect: !JitsiMeetJS.mediaDevices
|
||||||
.isDeviceChangeAvailable('output'),
|
.isDeviceChangeAvailable('output'),
|
||||||
|
hideVideoInputPreview: isMobileSafari,
|
||||||
|
hideVideoOutputSelect: isMobileSafari,
|
||||||
selectedAudioInputId,
|
selectedAudioInputId,
|
||||||
selectedAudioOutputId,
|
selectedAudioOutputId,
|
||||||
selectedVideoInputId
|
selectedVideoInputId
|
||||||
|
|
Loading…
Reference in New Issue