[RN] Remove workaround for video mirroring on iOS
It's now natively supported: https://github.com/oney/react-native-webrtc/pull/244
This commit is contained in:
parent
fd10362bef
commit
ae8c5287e4
|
@ -1,20 +1,8 @@
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import { View } from 'react-native';
|
|
||||||
import { RTCView } from 'react-native-webrtc';
|
import { RTCView } from 'react-native-webrtc';
|
||||||
|
|
||||||
import { Platform } from '../../../react';
|
|
||||||
|
|
||||||
import { styles } from './styles';
|
import { styles } from './styles';
|
||||||
|
|
||||||
/**
|
|
||||||
* Indicates whether RTCView (is to be considered that it) natively supports
|
|
||||||
* i.e. implements mirroring the video it renders. If false, a workaround will
|
|
||||||
* be used in an attempt to support mirroring in Video. If RTCView does not
|
|
||||||
* implement mirroring on a specific platform but the workaround causes issues,
|
|
||||||
* set to true for that platform to disable the workaround.
|
|
||||||
*/
|
|
||||||
const RTCVIEW_SUPPORTS_MIRROR = Platform.OS === 'android';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The React Native component which is similar to Web's video element and wraps
|
* The React Native component which is similar to Web's video element and wraps
|
||||||
* around react-native-webrtc's RTCView.
|
* around react-native-webrtc's RTCView.
|
||||||
|
@ -91,31 +79,15 @@ export class Video extends Component {
|
||||||
const style = styles.video;
|
const style = styles.video;
|
||||||
const objectFit = (style && style.objectFit) || 'cover';
|
const objectFit = (style && style.objectFit) || 'cover';
|
||||||
|
|
||||||
const { mirror } = this.props;
|
|
||||||
|
|
||||||
// XXX RTCView may not support support mirroring, even when
|
|
||||||
// providing a transform style property (e.g. iOS) . As a
|
|
||||||
// workaround, wrap the RTCView inside another View and apply the
|
|
||||||
// transform style property to that View instead.
|
|
||||||
const mirrorWorkaround = mirror && !RTCVIEW_SUPPORTS_MIRROR;
|
|
||||||
|
|
||||||
// eslint-disable-next-line no-extra-parens
|
// eslint-disable-next-line no-extra-parens
|
||||||
const video = (
|
return (
|
||||||
<RTCView
|
<RTCView
|
||||||
mirror = { mirrorWorkaround ? false : mirror }
|
mirror = { this.props.mirror }
|
||||||
objectFit = { objectFit }
|
objectFit = { objectFit }
|
||||||
streamURL = { streamURL }
|
streamURL = { streamURL }
|
||||||
style = { style }
|
style = { style }
|
||||||
zOrder = { this.props.zOrder } />
|
zOrder = { this.props.zOrder } />
|
||||||
);
|
);
|
||||||
|
|
||||||
if (mirrorWorkaround) {
|
|
||||||
return (
|
|
||||||
<View style = { styles.mirroredVideo }>{ video }</View>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return video;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// RTCView has peculiarities which may or may not be platform specific.
|
// RTCView has peculiarities which may or may not be platform specific.
|
||||||
|
|
|
@ -7,18 +7,9 @@ const video = {
|
||||||
flex: 1
|
flex: 1
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
|
||||||
* Transform local videos to behave like a mirror.
|
|
||||||
*/
|
|
||||||
const mirroredVideo = {
|
|
||||||
...video,
|
|
||||||
transform: [ { scaleX: -1 } ]
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Native-specific styles for media components.
|
* Native-specific styles for media components.
|
||||||
*/
|
*/
|
||||||
export const styles = StyleSheet.create({
|
export const styles = StyleSheet.create({
|
||||||
mirroredVideo,
|
|
||||||
video
|
video
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue