Question

我正在使用react-native-webrtc并能够访问远程视频并将其放在我的屏幕上。但是，视频只会占据屏幕的一部分，其上方和下方都有空白区域。

代码如下：

render() {
    if (this.state.isConnected) {
      return (
        <View style={styles.stretchContainer}>
          <RTCView streamURL={this.state.remoteURL} style={styles.video1} />
        </View>
      );
    } 
}

以下为styles

 stretchContainer: {
    flex: 1,
    backgroundColor: '#fff',
    borderWidth: 1,
    borderColor: '#000',
    alignItems: 'stretch'
  },
  video1: {
    flex: 1
  }

我也尝试过绝对定位并通过尺寸设置宽度和高度。但是，所有这些方法都会产生相同的结果。

我认为这是因为远程视频的宽度和高度已经与之相关（640 x 480），但我只想拉伸视频以填满屏幕而不管分辨率如何。这可能吗？

Answer 1

使用这段代码总是填充其父级

中的组件

video1: { ...StyleSheet.absoluteFillObject, }

希望它适合你

Answer 2

您应该将prop objectFit设置为“ cover”，如下所示： `

<RTCView
     style={styles.localVideo}
     streamURL={this.state.localStream.toURL()}
     objectFit={'cover'}
/>

`

如何在React Native / WebRTC中拉伸远程视频以填充屏幕？

2 个答案: