react-native exoplayer scaling和rtmp-Java 学习之路

我正在使用android端的exoplayer创建一个反应原生的RTMP库 . 当视图出现时，我无法缩放视频 .

基本上我正在准备一个没有视图存在的SimpleExoplayer（为了启动缓冲）然后在反应原生视图出现时将它附加到View . 我的问题是它没有扩展，因为我想要它出现我要调整反应原生视图然后它可以很好地扩展 .

以下是相关代码部分：

负责创建播放器的类：

public class RTMPPlayer{
private static RTMPPlayer sharedPlayer;
public SimpleExoPlayer player;
private Context myContext;
private DefaultBandwidthMeter defaultBandwidthMeter;
private RtmpDataSourceFactory rtmpDataSourceFactory;
private boolean prepared;
private RTMPPlayer(final Context context) {
    runOnUiThread(new Runnable(){
        public void run() {
            // UI code goes here

    myContext = context;
    TrackSelection.Factory videoTrackSelectionFactory = new AdaptiveTrackSelection.Factory(defaultBandwidthMeter);
    TrackSelector trackSelector = new DefaultTrackSelector(videoTrackSelectionFactory);
    DefaultAllocator defaultAllocator = new DefaultAllocator(true, C.DEFAULT_BUFFER_SEGMENT_SIZE);
    LoadControl loadControl = new DefaultLoadControl(defaultAllocator, 1050, 1600, 1000, 1000, C.LENGTH_UNSET, false);

    RenderersFactory renderersFactory = new DefaultRenderersFactory(myContext);
    player = ExoPlayerFactory.newSimpleInstance(renderersFactory, trackSelector, loadControl);
        }
    });
}

public static RTMPPlayer getSharedPlayer(Context context){
    if(sharedPlayer == null) {
        sharedPlayer = new RTMPPlayer(context);
    }
    return sharedPlayer;
}

public void preparePlayer(final String source){
    if(prepared){
        return;
    }
    runOnUiThread(new Runnable(){
        public void run() {
            rtmpDataSourceFactory = new RtmpDataSourceFactory(defaultBandwidthMeter);
            MediaSource videoSource = new ExtractorMediaSource.Factory(rtmpDataSourceFactory).createMediaSource(Uri.parse(source));
            player.addListener(new RTMPPlayer.PlayerEventListener());
            player.setPlayWhenReady(true);
            player.seekToDefaultPosition();
            player.prepare(videoSource);
            prepared = true;
        }
    });
}

public void releasePlayer() {
    runOnUiThread(new Runnable(){
        public void run() {
            player.release();
            player = null;
            sharedPlayer = null;
            prepared = false;
        }
    });
}

负责视图的类：

public class ReactVideoView extends FrameLayout {

private RtmpDataSourceFactory rtmpDataSourceFactory;
private PlayerView playerView;
private Context myContext;
public String source;
public Boolean shouldAutoPlay;
public ReactVideoView(Context context) {
    super(context);
    createView(context);
}

private void createView(Context context) {
    LayoutParams layoutParams = new LayoutParams(
            LayoutParams.MATCH_PARENT,
            LayoutParams.MATCH_PARENT);
    playerView = new PlayerView(context);
    playerView.setLayoutParams(layoutParams);
    playerView.setResizeMode(AspectRatioFrameLayout.RESIZE_MODE_ZOOM);
    myContext = context;
    addView(playerView, 0, layoutParams);
    RTMPPlayer playerManager = RTMPPlayer.getSharedPlayer(context);
    SimpleExoPlayer player = playerManager.player;
    playerView.setUseController(false);
    playerView.setPlayer(player);
    playerView.requestLayout();
}

//Completely clears the player
public void releasePlayer() {
    RTMPPlayer playerManager = RTMPPlayer.getSharedPlayer(myContext);
    SimpleExoPlayer player = playerManager.player;
    if (player != null) {
        playerView.setPlayer(null);
    }
}


public void pausePlayer() {
    RTMPPlayer playerManager = RTMPPlayer.getSharedPlayer(myContext);
    SimpleExoPlayer player = playerManager.player;
    if (player != null) {
        player.setPlayWhenReady(false);
    }
}

public void resumePlayer() {
    RTMPPlayer playerManager = RTMPPlayer.getSharedPlayer(myContext);
    SimpleExoPlayer player = playerManager.player;
    if (player != null) {
        player.setPlayWhenReady(true);
        player.seekToDefaultPosition();
    }
}
}

ViewManager（用于RN）：

public class RNVideoViewManager extends SimpleViewManager<ReactVideoView> {

public static final String REACT_CLASS = "RNVideoView";

public Map getExportedCustomBubblingEventTypeConstants() {
    return MapBuilder.builder()
            .put(
                    "stateChange",
                    MapBuilder.of(
                            "phasedRegistrationNames",
                            MapBuilder.of("bubbled", "onStateChange")))
            .put(
                    "error",
                    MapBuilder.of(
                            "phasedRegistrationNames",
                            MapBuilder.of("bubbled", "onError")))
            .build();
}

@Override
public String getName() {
    return REACT_CLASS;
}

@Override
protected ReactVideoView createViewInstance(ThemedReactContext reactContext) {
    return new ReactVideoView(reactContext);
}

@ReactProp(name = "pause", defaultBoolean = false)
public void setPause( ReactVideoView view, boolean pause){
    if(pause){
        view.pausePlayer();
    } else {
        view.resumePlayer();
    }
}
@Override
public void receiveCommand(ReactVideoView view, int commandId, @Nullable ReadableArray args) {
    super.receiveCommand(view, commandId, args);
    if (commandId == 1) {
        view.releasePlayer();
    }
}

}

JS中的视图：

export class VideoView extends React.PureComponent<Props, State> {
    video: ?VideoView;
    _onStateChange: Function;
    _onError: Function;
    static emitter = new EventEmitter();

   constructor(props: Props) {
     super(props);
     this.state = {
     pause: false
   };

   this._onStateChange = this._onStateChange.bind(this);
   this._onError = this._onError.bind(this);
}

componentDidMount() {
   this.addListener();
// initialize the player  }

componentWillUnmount() {
  VideoView.emitter.removeAllListeners("video-event");
  VideoManager.release();
// release the player
  UIManager.dispatchViewManagerCommand(findNodeHandle(this.video), 1, null);
}

pauseRendering() {
  this.setState({ pause: true });
}

resumeRendering() {
  this.setState({ pause: false });
}

addListener() {
  VideoView.emitter.addListener("video-event", (message: string) => {
    if (message === "STOP_RENDERING") {
      this.pauseRendering();
    } else if (message === "START_RENDERING") {
      this.resumeRendering();
    }
  });
}

_onError(event) {
  if (!this.props.onErrorMessage) {
    return;
  }
  this.props.onErrorMessage(event.nativeEvent.message);
}

_onStateChange(event) {
  if (!this.props.onStateChangeMessage) {
    return;
  }
  this.props.onStateChangeMessage(event.nativeEvent.message);
}

render() {
  return (
    <RNVideo
      style={this.props.style}
      ref={(videoView: any) => {
        this.video = videoView;
      }}
      pause={this.state.pause}
    />
  );
}
}

VideoView.propTypes = {
  ...ViewPropTypes
};

const RNVideo = requireNativeComponent("RNVideoView", VideoView, {
 nativeOnly: {
   pause: true,
   onStateChange: true,
   onError: true,
 }
});

基本上我正在准备播放器 . 然后附加它并且它不会立即调整大小，我必须旋转设备或调整视图大小，然后才能正确更新 .

我尝试了很多不同的东西，但我现在卡住了，所以任何帮助都会非常感激

谢谢

react-native exoplayer scaling和rtmp

相关问题