Android black screen

[harrischelsea]

Can you provide solution for this problem? Code is same for both platforms.

`

Welcome to React Native! To get started, edit App.js {instructions} this.vlCPlayerView = ref} url={"rtmp://live.hkstv.hk.lxdns.com/live/hks"} Orientation={Orientation} />

`

I am using this dependencies:

"react": "16.6.0-alpha.8af6728",
    "react-native": "0.57.3",
    "react-native-firebase": "^5.0.0",
    "react-native-orientation": "^3.1.3",
    "react-native-slider": "^0.11.0",
    "react-native-vector-icons": "^6.0.2",
    "react-native-yz-vlcplayer": "^1.1.0"

[cylemonVip]

same，can you solve it?

[harrischelsea]

Still the same problem. If you solve it, help.

[xuyuanzhou]

use the latest version

[harrischelsea]

Thank you xuyuanzhou,

I tried but no success.

"react": "16.6.0-alpha.8af6728",
 "react-native": "0.57.3",
"react-native-yz-vlcplayer": "^1.1.1-beta1",

[xuyuanzhou]

I fix it in react-native-yz-vlcplayer@1.1.1-beta2

[harrischelsea]

Thank you xuyuanzhou,

That fixed my problem with black screen, but rtsp stream is not working on Android now. Everything is perfect on IOS.

Which import are you using?

import { VLCPlayer, VlCPlayerView, VlCPlayerViewByMethod, VlcSimplePlayer } from 'react-native-yz-vlcplayer';

[xuyuanzhou]

(1)VlcSimplePlayer (2) I use this url ,it is work fine. rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov

[harrischelsea]

I tried this url, but nothing. It is working on IOS. Do I have to link again after installing latest version?

[xuyuanzhou]

You need rebuild it again.

[harrischelsea]

I rebuilded but still the same problem.

[xuyuanzhou]

Please show me your environment on android?

[harrischelsea]

settings.gradle `rootProject.name = 'konaCC2' include ':react-native-vector-icons' project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android') include ':react-native-orientation' project(':react-native-orientation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-orientation/android') include ':react-native-yz-vlcplayer' project(':react-native-yz-vlcplayer').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-yz-vlcplayer/android') include ':react-native-firebase' project(':react-native-firebase').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-firebase/android')

include ':app' `

app build.gradle `dependencies { implementation project(':react-native-vector-icons') implementation project(':react-native-orientation') implementation project(':react-native-yz-vlcplayer') implementation project(':react-native-firebase') implementation fileTree(dir: "libs", include: ["*.jar"]) implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}" implementation "com.facebook.react:react-native:+" // From node_modules

// Firebase dependencies
implementation "com.google.android.gms:play-services-base:15.0.1"
implementation "com.google.firebase:firebase-core:16.0.4"
implementation 'com.google.firebase:firebase-storage:16.0.3'
implementation 'com.google.firebase:firebase-database:16.0.3'
implementation 'com.google.firebase:firebase-auth:16.0.4'
implementation 'com.google.firebase:firebase-messaging:17.3.4'
implementation 'com.google.firebase:firebase-ads:17.0.0'
implementation 'com.google.firebase:firebase-firestore:17.1.1'

}`

MainApplication.java `import com.facebook.react.ReactApplication; import com.oblador.vectoricons.VectorIconsPackage; import com.github.yamill.orientation.OrientationPackage; import com.yuanzhou.vlc.ReactVlcPlayerPackage; import io.invertase.firebase.RNFirebasePackage; import com.facebook.react.ReactNativeHost; import com.facebook.react.ReactPackage; import com.facebook.react.shell.MainReactPackage; import com.facebook.soloader.SoLoader;

@Override protected List getPackages() { return Arrays.asList( new MainReactPackage(), new VectorIconsPackage(), new OrientationPackage(), new ReactVlcPlayerPackage(), new RNFirebasePackage() ); } ` Do you need something else?

[xuyuanzhou]

Did you use

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

in AndroidManifest.xml

[harrischelsea]

I added that line and rebuilded again but still the same.

Do you have another idea what is happening?

[xuyuanzhou]

show me your js code.

[harrischelsea]

`import React, { Component } from 'react'; import { View } from 'react-native'; import { VLCPlayer, VlCPlayerView, VlCPlayerViewByMethod, VlcSimplePlayer } from 'react-native-yz-vlcplayer'; import Orientation from 'react-native-orientation';

import styles from './VideoPlayer.styles.js';

export class VideoPlayer extends Component { constructor(props) { super(props); this.state={ paused: false } }

onPlaying = () => { console.log("ONPLAYING"); //this.vlCPlayerView.play(true); this.vlCPlayerView.playAll(true) }

render() { return ( <View style={{ padding: 0, margin: 0, marginBottom: 10 }}>

    <View>
    <VlcSimplePlayer
          ref={ ref => this.vlCPlayerView = ref}
          url={this.props.url}
          autoPlay={true}
          onIsPlaying={this.onPlaying}
          Orientation={Orientation}      
      />
    </View>

  </View>
);

} } `

[xuyuanzhou]

I have no idea. I do not have this problem.

[xuyuanzhou]

You can see the log, and ensure what happy.

[harrischelsea]

[xuyuanzhou]

could you show me what rtsp url your use?

[harrischelsea]

I am using FOSCAM camera. First you have to connect camera to your wifi and then you use cameras local ip address to get stream.

You have example on this link: https://www.foscam.com/faqs/view.html?id=81

Everything is working on IOS.

Thank you for your help and support.

[tommasoverola]

in playerViewByMethod/index.js

at row 324 try to replace:

  `this.handleFirstConnectivityChange`

with this: this.handleFirstConnectivityChange()

hope this help.

[xuyuanzhou]

in playerViewByMethod/index.js

at row 324 try to replace:

  `this.handleFirstConnectivityChange`

with this: this.handleFirstConnectivityChange()

hope this help.

Why you want to do it? @tommasoverola maybe you can use 1.1.1-beta4.

[tzraeq]

this.getSurfaceTexture() == null，这句代码永远为true，所以android播不出来

[xuyuanzhou]

this.getSurfaceTexture() == null，这句代码永远为true，所以android播不出来

@tzraeq 1.1.4-beta5 had fixed this error.

[tommasoverola]

in playerViewByMethod/index.js

at row 324 try to replace:

  `this.handleFirstConnectivityChange`

with this: this.handleFirstConnectivityChange() hope this help.

Why you want to do it? @tommasoverola maybe you can use 1.1.1-beta4.

Now work really great, thanks :)

[xuyuanzhou]

@harrischelsea Have you try it on real android devices? not on simulator.

[harrischelsea]

xuyuanzhou,

Thank you for your support. There is no problem with black screen anymore and rtsp is working on both platforms. I am using beta7 version and

Last problem is with FULL SCREEN.

When click on fullscreen icon, this is the error. Cannot read property 'lockToLandscape' of undefined

Is there posbility to hide that icons (pause, volume, reload., fullscreen...)?

[xuyuanzhou]

npm install react-native-orientation --save react-native link react-native-orientation

import Orientation from 'react-native-orientation';