Blank screen upon loading any video file

[aivct]

Steps to Reproduce

1. Download razorRun's test repo
2. Run npm i and npx react-native run-android

Expected Behaviour

A video file ought to play. See https://www.wowza.com/developer/rtsp-stream-test

Result

There are no logs either from the developer console or from node.js

Additional Notes

Tested on Android. Tested client on emulator and a physical android phone. Have not tested compiling on other development environments. The same applies to getting files from https. Have not tested with local files yet.

System Config Information

C:\Users\Test>npm version
{
  'onvif-test': '0.0.1',
  npm: '8.1.0',
  node: '16.13.0',
  v8: '9.4.146.19-node.13',
  uv: '1.42.0',
  zlib: '1.2.11',
  brotli: '1.0.9',
  ares: '1.17.2',
  modules: '93',
  nghttp2: '1.45.1',
  napi: '8',
  llhttp: '6.0.4',
  openssl: '1.1.1l+quic',
  cldr: '39.0',
  icu: '69.1',
  tz: '2021a',
  unicode: '13.0',
  ngtcp2: '0.1.0-DEV',
  nghttp3: '0.1.0-DEV'
}

[camilobaezcamba]

@aivct I'm having the same problem. Were you able to solve it?

[adok0001]

Having the same issue here. @camilobaezcamba @aivct any luck?

[camilobaezcamba]

@adok0001 If I'm not mistaken, this happened because the video I was trying to play needed basic auth and I was passing it as a header (Authorization: Basic <Base64(user:pass)>), however it was necessary to pass it in the following format https://user:[email protected]/video.mp4 in the URL

Change this:

source={{
  uri: "https://www.example.com/video.mp4",
  headers: {
    Authorization: 'Basic <Base64(user:pass)',
  }
}}

for this:

source={{
  uri: "https://user:[email protected]/video.mp4",
}}