Missing videoTracks from HLS (m3u8) onLoad Data on iOS getting all data on android

Bug

Screenshot: https://ibb.co/v4JjyqP

I need to show the video quality options from the m3u8 Playlist (hls) but on andorid working properly as expected but on ios getting all data like textTracks audioTracks but missing videoTracks …

Platform

iOS

Which player are you experiencing the problem on:

• React Native Video

Environment info

React native info output:

System: OS: macOS 12.2 CPU: (8) arm64 Apple M1 Memory: 92.59 MB / 8.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 17.5.0 - /opt/homebrew/bin/node Yarn: 1.22.17 - /opt/homebrew/bin/yarn npm: 8.4.1 - /opt/homebrew/bin/npm Watchman: 2022.02.14.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: Not Found SDKs: iOS SDK: Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3 Android SDK: Not Found IDEs: Android Studio: Not Found Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild Languages: Java: Not Found npmPackages: @react-native-community/cli: ^6.3.1 => 6.3.1 react: ^17.0.1 => 17.0.2 react-native: 0.64.2 => 0.64.2 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Library version: x.x.x

Steps To Reproduce

1. put the video link on source uri
2. console the onLoad data …

Expected behaviour

{“audioTracks”: [{“bitrate”: “”, “index”: 0, “language”: “en”, “title”: “1/15”, “type”: “audio/mp4a-latm”}], “canPlayFastForward”: true, “canPlayReverse”: true, “canPlaySlowForward”: true, “canPlaySlowReverse”: true, “canStepBackward”: true, “canStepForward”: true, “currentTime”: 0, “duration”: 693.039, “naturalSize”: {“height”: 720, “orientation”: “landscape”, “width”: 1280}, “textTracks”: [{“index”: 0, “language”: “”, “title”: “1/8219”, “type”: “application/cea-608”}, {“index”: 1, “language”: “en”, “title”: “subs:English”, “type”: “text/vtt”}], “trackId”: “2”, “videoTracks”: [{“bitrate”: 413696, “codecs”: “”, “height”: 360, “trackId”: “0”, “width”: 640}, {“bitrate”: 964608, “codecs”: “”, “height”: 480, “trackId”: “1”, “width”: 854}, {“bitrate”: 2424832, “codecs”: “”, “height”: 720, “trackId”: “2”, “width”: 1280}]}

1. on android getting all videoTracks data like 360,480,720
2. on ios missing videoTracks object so im unable to get the data

Reproducible sample code

<Video ref={setRef} // source={{ uri: source, type: ‘m3u8’ }} source={{ uri: source }} minLoadRetryCount={5} hls={true} rate={rate} paused={paused} volume={volume} muted={muted} onLoad={onLoad} << console this line />

Video sample

If possible, include a link to the video that has the problem that can be streamed or downloaded from. Video Link: https://mukti-prime-bucket.s3.ap-south-1.amazonaws.com/hls/f1/multi_audio_sub_53s.m3u8

[ConnorMoodyDev]

Working on a fix for this right now! Doesn’t appear to be a getVideoTrackInfo in RTCVideo, so it just simply does not return anything.

[dilipsuthar97]

@ConnorMoodyDev please let me know how I can help!

@alecdewitz Got a fix for it already, just have to make a PR which I will do later today!

Did some research on it and iOS doesn’t expose the resolutions via their API, however, they do offer a preferredMaximumResolution option which can be used in the exact same way as changing the resolutions so I’ve added a preferredMaxHeight and a preferredMaxWidth option to RTCVideo which when set together let you set a maximum resolution. There might still be a way to get around the initial inability to get the resolutions

So the way it currently works is

<Video perferredMaxHeight={1920} preferredMaxWidth={1080} />

I’m not well versed in Objective-C, but I do want to do something along these lines:

<Video preferredMaxResolution={{height: 1920, width: 1080}} />

Do you know if I can use a NSDictionary as the setMaxResolution parameter to accept a JSON Object automatically via React Native or would I have to pass it as a string and convert the JSON to a NSDictionairy somehow in Objective-C?

@ConnorMoodyDev It seems workaround for the resolution issue. If possible can you please share the native code where you have made the change to achieve this?